Menghapus JavaScript yang Memblokir Perenderan

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa HTML Anda merujuk ke pemblokiran file JavaScript eksternal di bagian paruh atas halaman.

Ringkasan

Sebelum browser dapat merender suatu halaman, browser harus membuat pohon DOM dengan menguraikan markup HTML. Selama proses ini, setiap kali parser menemukan skrip, parser harus menghentikan dan mengeksekusinya sebelum melanjutkan mem-parsing HTML. Dalam kasus skrip eksternal, parser juga dipaksa menunggu sumber daya diunduh, yang dapat menimbulkan satu atau lebih menunda waktu hingga pertama kali halaman dirender. 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 terlihat 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 akan menghilangkan permintaan eksternal untuk small.js dan memungkinkan browser untuk memberikan waktu render pertama yang lebih cepat. 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. Kepada mencegah JavaScript memblokir parser, kami sarankan menggunakan async HTML pada skrip eksternal. Contoh: 
<script async src="my.js">
Lihat Pemblokiran Parser vs. JavaScript Asinkron untuk mempelajari skrip asinkron lebih lanjut. Perhatikan bahwa skrip asinkron tidak dijamin akan dieksekusi dalam urutan tertentu dan tidak boleh digunakan 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 kualitas halaman guna menambahkan 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?
Jika konten halaman disusun oleh JavaScript sisi klien, Anda harus menyelidiki penyederhanaan modul JavaScript yang relevan untuk menghindari perjalanan bolak-balik jaringan. 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 selengkapnya informasi tentang rendering sisi server, lihat http://youtu.be/VKTWdaupft0?t=14m28s.

Masukan

Apakah halaman ini membantu?