Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa HTML Anda merujuk pada file JavaScript eksternal yang memblokir
di bagian paruh atas halaman.
Ringkasan
Sebelum browser dapat merender suatu halaman, browser harus membuat pohon DOM dengan menguraikan markup HTML.
Ketika proses ini berlangsung, setiap kali parser menemukan skrip, parser harus berhenti dan mengeksekusinya
sebelum parser melanjutkan penguraian HTML. Pada kasus skrip eksternal, parser juga
dipaksa untuk menunggu sampai resource didownload, yang menyebabkan adanya 1 roundtrip jaringan atau lebih dan
menunda waktu perenderan halaman untuk pertama kalinya.
Lihat
Menambahkan Interaktivitas dengan JavaScript untuk mempelajari lebih lanjut tentang cara JavaScript memengaruhi jalur
perenderan kritis.
Saran
Sebaiknya Anda menghindari dan meminimalkan penggunaan JavaScript pemblokiran, khususnya skrip eksternal yang
harus diambil sebelum dapat dieksekusi. Skrip yang diperlukan untuk merender konten halaman
dapat dijadikan inline guna menghindari permintaan jaringan ekstra, namun konten yang dijadikan inline harus berukuran kecil
dan harus dieksekusi dengan cepat agar dapat memberikan performa yang baik. Skrip yang tidak penting untuk perenderan
awal harus dibuat dalam mode asinkron atau ditunda hingga perenderan pertama selesai. Harap diingat
bahwa agar hal ini dapat meningkatkan waktu pemuatan, Anda juga harus
mengoptimalkan pengiriman CSS.
JavaScript Inline
Skrip eksternal yang memblokir memaksa browser untuk menunggu JavaScript diambil,
yang dapat menambah 1 roundtrip jaringan atau lebih sebelum halaman dapat dirender. Jika skrip eksternal
berukuran kecil, Anda dapat menjadikan kontennya inline secara langsung ke dokumen HTML dan menghindari
latensi permintaan jaringan. Misalnya, apabila dokumen HTML terlihat seperti ini:
<html>
<head>
<script type="text/javascript" src="small.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Dan resource
small.js tampak seperti ini:
/* contents of a small JavaScript file */
Anda dapat membuat skrip menjadi inline seperti berikut:
<html>
<head>
<script type="text/javascript">
/* contents of a small JavaScript file */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Membuat konten skrip menjadi inline menghilangkan permintaan eksternal untuk
small.js dan memungkinkan
perenderan pertama kali dilakukan lebih cepat oleh browser. Namun, perlu diperhatikan bahwa membuat konten skrip menjadi inline juga memperbesar
ukuran dokumen HTML dan konten skrip yang sama mungkin perlu dijadikan inline di
beberapa halaman. Sehingga, dianjurkan untuk membuat skrip berukuran kecil menjadi inline agar dapat memberikan performa yang terbaik.
Membuat JavaScript pada Mode Asinkron
Secara default JavaScript memblokir kontruksi DOM sehingga menunda waktu untuk perenderan pertama kali. Untuk
mencegah JavaScript memblokir parser, sebaiknya gunakan atribut
async
HTML pada skrip eksternal. Misalnya:
<script async src="my.js">
Lihat
Pemblokiran Parser vs. JavaScript Asinkron untuk mempelajari lebih lanjut tentang skrip asinkron.
Perlu diperhatikan bahwa skrip asinkron tidak dijamin akan dieksekusi pada perintah tertentu dan tidak boleh menggunakan
document.write. Skrip yang bergantung pada perintah eksekusi atau perlu mengakses/mengubah
DOM atau CSSOM halaman mungkin harus ditulis ulang terkait masalah batasan ini.
Menunda pemuatan JavaScript
Pemuatan dan eksekusi skrip yang tidak diperlukan untuk perenderan halaman awal dapat
ditunda hingga perenderan awal atau bagian penting lain dari halaman telah selesai
dimuat. Tindakan ini dapat membantu mengurangi pengisian konten pada resource dan meningkatkan performa.
FAQ
- Bagaimana jika saya menggunakan library JavaScript seperti jQuery?
- Banyak library JavaScript, seperti JQuery, digunakan untuk meningkatkan halaman guna menambah
interaktivitas, animasi, dan efek tambahan lainnya. Namun, banyak dari perilaku ini
yang dapat ditambahkan dengan aman setelah konten paruh atas dirender.
Cari tahu cara membuat JavaScript asinkron atau menunda pemuatannya.
- Bagaimana jika saya menggunakan framework JavaScript untuk menyusun halaman?
- Apabila konten halaman disusun oleh JavaScript sisi klien,
sebaiknya Anda memeriksa penyebarisan modul JavaScript yang relevan untuk menghindari roundtrip
jaringan tambahan. Demikian pula, meningkatkan perenderan sisi server dapat
meningkatkan kinerja pemuatan halaman pertama secara signifikan: merender template JavaScript pada server untuk memberikan
perenderan pertama kali yang cepat, lalu menggunakan template sisi klien setelah halaman dimuat. Untuk informasi
selengkapnya tentang perenderan sisi server, lihat
http://youtu.be/VKTWdaupft0?t=14m28s.