Menghapus JavaScript yang Memblokir Perenderan

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.
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.