Baru-baru ini saya membaca Manifesto Yahoo Praktik Terbaik untuk Mempercepat Situs Web Anda . Mereka merekomendasikan untuk meletakkan penyertaan JavaScript di bagian bawah kode HTML bila kita bisa.
Tapi di mana tepatnya dan kapan?
Haruskah kita meletakkannya sebelum menutup </html>atau sesudahnya? Dan yang terpenting, kapan kita masih harus meletakkannya di <head>bagian?
Jawaban:
Ada dua kemungkinan untuk skrip yang benar-benar tidak mengganggu:
</body></html>)Yang kedua bisa lebih cepat karena penelitian Yahoo asli menunjukkan beberapa browser mencoba memuat file skrip ketika mereka menekan tag skrip dan oleh karena itu tidak memuat sisa halaman sampai selesai. Namun, jika skrip Anda memiliki bagian 'siap' yang harus dijalankan segera setelah DOM siap, Anda mungkin perlu memilikinya di kepala. Masalah lainnya adalah tata letak - jika skrip Anda akan mengubah tata letak halaman yang Anda inginkan dimuat sedini mungkin sehingga halaman Anda tidak menghabiskan waktu lama untuk menggambar ulang sendiri di depan pengguna Anda.
Jika situs skrip eksternal berada di domain lain (seperti widget eksternal), sebaiknya letakkan di bagian bawah untuk menghindari penundaan pemuatan halaman.
Dan untuk masalah kinerja apa pun, lakukan tolok ukur Anda sendiri - apa yang mungkin benar pada saat studi selesai mungkin berubah dengan pengaturan lokal Anda sendiri atau perubahan di browser.
sumber
Tidak pernah semudah itu - Yahoo merekomendasikan untuk meletakkan skrip tepat sebelum
</body>tag penutup , yang akan menciptakan ilusi bahwa halaman memuat lebih cepat pada cache kosong (karena skrip tidak akan memblokir pengunduhan sisa dokumen). Namun, jika Anda memiliki beberapa kode yang ingin Anda jalankan saat pemuatan halaman, itu hanya akan mulai dijalankan setelah seluruh halaman dimuat. Jika Anda meletakkan skrip di<head>tag, skrip tersebut akan mulai dijalankan sebelumnya - jadi pada cache yang diprioritaskan, halaman akan benar-benar tampak memuat lebih cepat.Juga, hak istimewa untuk meletakkan skrip di bagian bawah halaman tidak selalu tersedia. Jika Anda perlu menyertakan skrip sebaris dalam tampilan Anda yang bergantung pada pustaka atau beberapa kode JavaScript lain yang dimuat sebelumnya, Anda harus memuat ketergantungan tersebut di
<head>tag.Semua rekomendasi Yahoo menarik tetapi tidak selalu dapat diterapkan dan harus dipertimbangkan berdasarkan kasus per kasus.
sumber
<script>tag sebaris tidak menyiratkan javascript yang mengganggu.<script>tag terpisah dari markup dan dapat digunakan dengan kode yang meningkatkan antarmuka tetapi tidak diperlukan. Jadi tidak ada yang secara inheren menonjol tentang<script>tag sebaris .<script>tag untuk menyandikan nilai-nilai itu ke dalam variabel javascript, untuk digunakan mungkin dengan pengeditan sebaris atau perilaku serupa lainnya.Seperti yang dikatakan orang lain, letakkan sebelum tag html tubuh penutup .
Beberapa hari yang lalu kami menerima banyak panggilan dari klien yang mengeluh bahwa situs mereka sangat lambat. Kami mengunjungi mereka secara lokal dan menemukan bahwa mereka membutuhkan waktu 20-30 detik untuk memuat satu halaman. Berpikir itu adalah server yang berkinerja buruk, kami masuk - tetapi server web dan sql adalah ~ 0% aktivitas.
Setelah beberapa menit, kami menyadari situs eksternal tidak aktif, yang kami tautkan untuk tag pelacakan Javascript. Ini berarti browser menekan tag skrip di bagian kepala situs dan menunggu untuk mengunduh file skrip.
Jadi, setidaknya untuk skrip pihak ketiga / eksternal, saya sarankan untuk meletakkannya sebagai hal terakhir di halaman. Kemudian jika mereka tidak tersedia, browser setidaknya akan memuat halaman sampai saat itu - dan pengguna tidak akan menyadarinya.
sumber
Untuk meringkas, berdasarkan saran di atas:
</body>tag.</body>kecuali Anda memiliki alasan edge-case untuk menempatkan skrip di head.sumber
Jika Anda ingin mengutak-atik posisi skrip Anda, YSlow adalah alat yang hebat untuk memberi Anda rasa apakah itu akan meningkatkan atau merusak kinerja. Menempatkan javascript pada posisi dokumen tertentu dapat benar-benar mematikan waktu pemuatan halaman.
http://developer.yahoo.com/yslow/
sumber
Tidak, seharusnya tidak setelah
</html>karena itu tidak valid. Tempat terbaik untuk meletakkan skrip adalah tepat sebelum</body>Ini pada dasarnya karena sebagian besar browser berhenti merender halaman saat mereka mengevaluasi skrip yang Anda berikan. Jadi tidak apa-apa untuk meletakkan kode non-pemblokiran di mana saja di halaman (saya terutama memikirkan hal-hal yang melampirkan fungsi ke
onLoadacara, karena pengikatan acara sangat cepat sehingga efektif menjadi gratis). Pembunuh besar di sini adalah di awal halaman memasukkan beberapa skrip server iklan, yang dapat mencegah pemuatan halaman apa pun sebelum iklan diunduh sepenuhnya, membuat waktu muat halaman Anda menggelembungsumber
Jika Anda meletakkannya di bagian bawah, itu memuat yang terakhir, sehingga mempercepat kecepatan pengguna dapat melihat halaman. Itu harus sebelum final
</html>meskipun jika tidak, itu tidak akan menjadi bagian dari DOM.Jika kode diperlukan secara instan, maka taruh di kepala.
Yang terbaik adalah meletakkan hal-hal seperti widget blog di bagian bawah sehingga jika tidak dimuat, itu tidak mempengaruhi kegunaan halaman.
sumber