Menempatkan <link>
di <head>
Menempatkan <link>
di <head>
adalah bagian dari spesifikasi yang tepat dalam membangun situs web yang dioptimalkan. Saat halaman pertama kali dimuat, HTML dan CSS diurai secara bersamaan; HTML membuat DOM (Document Object Model) dan CSS membuat CSSOM (CSS Object Model). Keduanya diperlukan untuk membuat visual di situs web, memungkinkan waktu "first meaningful paint" yang cepat. Render progresif ini adalah kategori situs optimisasi yang diukur dalam skor kinerja mereka. Menempatkan stylesheet di dekat bagian bawah dokumen adalah yang melarang render progresif di banyak browser. Beberapa browser memblokir rendering untuk menghindari harus mengecat ulang elemen halaman jika gaya mereka berubah. Pengguna kemudian terjebak melihat halaman putih kosong. Di lain waktu mungkin ada kilasan konten tanpa gaya (FOUC), yang menampilkan halaman web tanpa gaya yang diterapkan.
Menempatkan <script>
tepat sebelum </body>
Tag <script>
memblokir parsing HTML saat mereka diunduh dan dieksekusi yang dapat memperlambat halaman Anda. Menempatkan skrip di bagian bawah akan memungkinkan HTML diurai dan ditampilkan kepada pengguna terlebih dahulu.
Pengecualian untuk posisi <script>
di bagian bawah adalah ketika skrip Anda berisi document.write()
, tetapi saat ini tidak disarankan untuk menggunakan document.write()
. Selain itu, menempatkan <script>
di bagian bawah berarti browser tidak dapat mulai mengunduh skrip sampai seluruh dokumen diurai. Ini memastikan kode Anda yang perlu memanipulasi elemen DOM tidak akan memicu kesalahan dan menghentikan seluruh skrip. Jika Anda perlu menempatkan <script>
di <head>
, gunakan atribut defer
, yang akan mencapai efek yang sama yaitu menjalankan skrip hanya setelah HTML diurai tetapi browser dapat mengunduh skrip lebih awal.
Ingatlah bahwa menempatkan skrip tepat sebelum tag </body>
penutup akan menciptakan ilusi bahwa halaman memuat lebih cepat pada cache kosong (karena skrip tidak akan memblokir pengunduhan sisa dokumen). Namun, jika Anda memiliki kode yang ingin Anda jalankan selama pemuatan halaman, itu hanya akan mulai dieksekusi setelah seluruh halaman dimuat. Jika Anda menempatkan skrip tersebut di tag <head>
, mereka akan mulai dieksekusi sebelumnya - jadi pada cache yang diisi, halaman sebenarnya akan tampak memuat lebih cepat.
Tag <head>
dan <body>
sekarang opsional
Sesuai spesifikasi HTML5, tag HTML tertentu seperti <head>
dan <body>
adalah opsional. Panduan gaya Google bahkan merekomendasikan menghapusnya untuk menghemat byte. Namun, praktik ini masih belum banyak diadopsi dan peningkatan kinerja kemungkinan akan minimal dan untuk sebagian besar situs mungkin tidak akan menjadi masalah.