Advertisement
Sementara meneliti kinerja di Yahoo!, kami menemukan bahwa pindah ke stylesheet HEAD dokumen membuat halaman muncul untuk memuat lebih cepat. Hal ini karena menempatkan stylesheet di HEAD memungkinkan halaman untuk membuat progresif.
Insinyur Front-end yang peduli tentang performa ingin halaman untuk memuat progresif, yaitu, kita ingin agar browser untuk menampilkan konten apapun itu secepat mungkin. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat. Pentingnya memberikan pengguna umpan balik visual, seperti indikator kemajuan, telah diteliti dan didokumentasikan . Dalam kasus kami halaman HTML adalah indikator kemajuan! Ketika browser load halaman semakin header, bar navigasi, logo di bagian atas, dll semua berfungsi sebagai umpan balik visual bagi pengguna yang sedang menunggu untuk halaman. Hal ini meningkatkan pengalaman pengguna secara keseluruhan.
Masalah dengan menempatkan stylesheet dekat bagian bawah dokumen adalah bahwa ia melarang render progresif di banyak browser, termasuk Internet Explorer. Browser ini memblokir render untuk menghindari harus redraw elemen halaman jika gaya mereka berubah. Pengguna yang terjebak melihat halaman putih kosong.
The spesifikasi HTML jelas menyatakan bahwa stylesheet harus dimasukkan dalam HEAD halaman: "Tidak seperti A, [LINK] hanya mungkin muncul di bagian HEAD dokumen, meskipun mungkin muncul beberapa kali." Tak satu pun dari alternatif, layar putih kosong atau flash konten unstyled, yang sepadan dengan risikonya. Solusi optimal adalah mengikuti spesifikasi HTML dan memuat stylesheet di HEAD dokumen.
Masukan Script di Bawah
Masalah yang disebabkan oleh script adalah bahwa mereka memblokir paralel download. The HTTP/1.1 spesifikasi menunjukkan bahwa browser men-download tidak lebih dari dua komponen secara paralel per hostname. Jika Anda melayani gambar Anda dari beberapa hostname, Anda bisa mendapatkan lebih dari dua downloads terjadi secara paralel. Sementara naskah adalah men-download, namun, browser tidak akan memulai download lain, bahkan pada nama host yang berbeda.
Dalam beberapa situasi tidak mudah untuk memindahkan script ke bawah. Jika, misalnya, script menggunakan document.write untuk memasukkan bagian dari isi halaman, tidak bisa bergerak lebih rendah di halaman. Ada juga mungkin scoping masalah. Dalam banyak kasus, ada cara untuk solusi situasi ini.
Sebuah saran alternatif yang sering muncul adalah dengan menggunakan script ditangguhkan. The DEFER atribut menunjukkan bahwa script tidak mengandung document.write, dan petunjuk untuk browser yang mereka dapat terus rendering. Sayangnya, Firefox tidak mendukung DEFER atribut. Di Internet Explorer, script dapat ditangguhkan, tetapi tidak sebanyak yang diinginkan. Jika script bisa ditunda, juga dapat dipindahkan ke bagian bawah halaman. Itu akan membuat halaman web Anda memuat lebih cepat.
Insinyur Front-end yang peduli tentang performa ingin halaman untuk memuat progresif, yaitu, kita ingin agar browser untuk menampilkan konten apapun itu secepat mungkin. Hal ini sangat penting untuk halaman dengan banyak konten dan bagi pengguna koneksi internet lambat. Pentingnya memberikan pengguna umpan balik visual, seperti indikator kemajuan, telah diteliti dan didokumentasikan . Dalam kasus kami halaman HTML adalah indikator kemajuan! Ketika browser load halaman semakin header, bar navigasi, logo di bagian atas, dll semua berfungsi sebagai umpan balik visual bagi pengguna yang sedang menunggu untuk halaman. Hal ini meningkatkan pengalaman pengguna secara keseluruhan.
Masalah dengan menempatkan stylesheet dekat bagian bawah dokumen adalah bahwa ia melarang render progresif di banyak browser, termasuk Internet Explorer. Browser ini memblokir render untuk menghindari harus redraw elemen halaman jika gaya mereka berubah. Pengguna yang terjebak melihat halaman putih kosong.
The spesifikasi HTML jelas menyatakan bahwa stylesheet harus dimasukkan dalam HEAD halaman: "Tidak seperti A, [LINK] hanya mungkin muncul di bagian HEAD dokumen, meskipun mungkin muncul beberapa kali." Tak satu pun dari alternatif, layar putih kosong atau flash konten unstyled, yang sepadan dengan risikonya. Solusi optimal adalah mengikuti spesifikasi HTML dan memuat stylesheet di HEAD dokumen.
Masukan Script di Bawah
Masalah yang disebabkan oleh script adalah bahwa mereka memblokir paralel download. The HTTP/1.1 spesifikasi menunjukkan bahwa browser men-download tidak lebih dari dua komponen secara paralel per hostname. Jika Anda melayani gambar Anda dari beberapa hostname, Anda bisa mendapatkan lebih dari dua downloads terjadi secara paralel. Sementara naskah adalah men-download, namun, browser tidak akan memulai download lain, bahkan pada nama host yang berbeda.
Dalam beberapa situasi tidak mudah untuk memindahkan script ke bawah. Jika, misalnya, script menggunakan document.write untuk memasukkan bagian dari isi halaman, tidak bisa bergerak lebih rendah di halaman. Ada juga mungkin scoping masalah. Dalam banyak kasus, ada cara untuk solusi situasi ini.
Sebuah saran alternatif yang sering muncul adalah dengan menggunakan script ditangguhkan. The DEFER atribut menunjukkan bahwa script tidak mengandung document.write, dan petunjuk untuk browser yang mereka dapat terus rendering. Sayangnya, Firefox tidak mendukung DEFER atribut. Di Internet Explorer, script dapat ditangguhkan, tetapi tidak sebanyak yang diinginkan. Jika script bisa ditunda, juga dapat dipindahkan ke bagian bawah halaman. Itu akan membuat halaman web Anda memuat lebih cepat.
