Hapus JavaScript yang Memblokir Perenderan

Aturan ini berlaku saat PageSpeed Insights mendeteksi bahwa HTML Anda merujuk kepada file JavaScript eksternal yang memblokir di bagian paro atas laman.

Ikhtisar

Sebelum browser dapat merender laman ke pengguna, browser harus menguraikan laman itu. Jika browser menemukan skrip eksternal yang memblokir selama penguraian, browser harus menghentikan dan mengunduh JavaScript tersebut. Setiap kali hal itu dilakukan, perjalanan jaringan bertambah, sehingga menunda waktu perenderan pertama laman.

Saran

JavaScript yang diperlukan untuk merender bagian paro atas sebaiknya disebariskan, dan JavaScript yang diperlukan untuk menambahkan fungsi tambahan ke laman tersebut ditunda sampai konten paro atas selesai ditampilkan. Harap diingat bahwa agar hal ini dapat meningkatkan waktu pemuatan, Anda juga harus Mengoptimalkan Pengiriman CSS.

JavaScript Kecil Sebaris

Apabila skrip eksternal berukuran kecil, Anda dapat langsung menyertakannya ke dalam dokumen HTML. Menyebariskan file kecil dengan cara ini memungkinkan browser melanjutkan proses perenderan laman. 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 sumber daya small.js tampak seperti ini:

  /* contents of a small JavaScript file */

Anda dapat menyebariskan skrip seperti berikut:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Tindakan ini menghilangkan permintaan eksternal untuk small.js dengan menempatkannya sebaris di dalam dokumen HTML.

Tunda pemuatan JavaScript

Untuk mencegah JavaScript memblokir pemuatan laman, sebaiknya Anda menggunakan atribut asinkron HTML saat memuat JavaScript. Misalnya:

<script async src="my.js">

Menggunakan pemuatan asinkron akan tidak aman apabila sumber daya JavaScript menggunakan document.write. Sebaiknya skrip yang menggunakan document.write ditulis ulang untuk menggunakan teknik yang berbeda.

Selain itu, saat memuat JavaScript secara asinkron, apabila laman Anda memuat skrip yang tergantung satu sama lain, perhatian harus diberikan untuk memastikan bahwa aplikasi Anda memuat skrip dengan urutan ketergantungan yang benar.

FAQ

Bagaimana jika saya menggunakan perpustakaan JavaScript seperti jQuery?
Banyak perpustakaan JavaScript, seperti JQuery, digunakan untuk meningkatkan laman guna menambah interaktivitas, animasi, dan efek lainnya. Namun, banyak dari perilaku ini yang dapat ditambahkan dengan aman setelah konten paro laman dirender. Periksa pemindahan eksekusi dan pemuatan JavaScript tersebut setelah laman dimuat.
Bagaimana jika saya menggunakan kerangka kerja JavaScript untuk menyusun laman?
Apabila konten laman disusun oleh JavaScript sisi klien, sebaiknya Anda memeriksa penyebarisan modul JavaScript yang relevan untuk menghindari perjalanan jaringan tambahan. Demikian pula, meningkatkan perenderan sisi server dapat meningkatkan kinerja pemuatan laman pertama secara signifikan: merender template JS pada server, menyebariskan hasil ke dalam HTML, kemudian menggunakan template sisi klien setelah aplikasi dimuat. Untuk informasi selengkapnya tentang perenderan sisi server, lihat http://youtu.be/VKTWdaupft0?t=14m28s.