Menghilangkan resource yang memblokir rendering

Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua URL yang memblokir gambar pertama pada halaman Anda. Tujuannya adalah untuk mengurangi dampak URL yang memblokir rendering ini dengan menyisipkan resource penting, menunda resource yang tidak penting, dan menghapus apa pun yang tidak digunakan.

Screenshot audit Lighthouse Menghilangkan resource yang memblokir rendering

URL mana yang ditandai sebagai resource yang memblokir rendering?

Lighthouse menandai dua jenis URL yang memblokir perenderan: skrip dan stylesheet.

Tag <script> yang:

  • Berada di <head> dokumen.
  • Tidak memiliki atribut defer.
  • Tidak memiliki atribut async.

Tag <link rel="stylesheet"> yang:

  • Tidak memiliki atribut disabled. Jika atribut ini ada, browser tidak akan mendownload stylesheet.
  • Tidak memiliki atribut media yang secara khusus cocok dengan perangkat pengguna. media="all" dianggap memblokir render.

Cara mengidentifikasi sumber daya penting

Langkah pertama untuk mengurangi dampak resource yang memblokir render adalah mengidentifikasi apa yang penting dan tidak penting. Gunakan tab Cakupan di Chrome DevTools untuk mengidentifikasi CSS dan JS yang tidak penting. Saat Anda memuat atau menjalankan halaman, tab tersebut menunjukkan jumlah kode yang digunakan, dibandingkan dengan jumlah kode yang dimuat:

Chrome DevTools: Tab cakupan
Chrome DevTools: Tab cakupan.

Anda dapat mengurangi ukuran halaman dengan hanya mengirimkan kode dan gaya yang Anda butuhkan. Klik URL untuk memeriksa file tersebut di panel Sources. Gaya pada file CSS dan kode di file JavaScript ditandai dengan dua warna:

  • Hijau (penting): Gaya yang diperlukan untuk lukisan pertama; kode yang sangat penting untuk fungsi inti halaman.
  • Merah (tidak penting): Gaya yang berlaku untuk konten tidak langsung terlihat; kode tidak digunakan dalam fungsi inti halaman.

Cara menghilangkan skrip yang memblokir perenderan

Setelah Anda mengidentifikasi kode penting, pindahkan kode tersebut dari URL yang memblokir perenderan ke tag script inline di halaman HTML Anda. Saat dimuat, halaman akan memiliki hal yang diperlukan untuk menangani fungsi inti halaman.

Jika ada kode di URL yang memblokir perenderan yang tidak penting, Anda dapat menyimpannya di URL, lalu menandai URL dengan atribut async atau defer (lihat juga Menambahkan Interaktivitas dengan JavaScript).

Kode yang tidak digunakan sama sekali harus dihapus (lihat Menghapus kode yang tidak digunakan).

Cara menghilangkan stylesheet yang memblokir perenderan

Serupa dengan menyisipkan kode dalam tag <script>, gaya penting inline yang diperlukan untuk gambar pertama dalam blok <style> pada head halaman HTML. Kemudian, muat gaya lainnya secara asinkron menggunakan link preload (lihat Menunda CSS yang tidak digunakan).

Pertimbangkan untuk mengotomatiskan proses pengekstrakan dan penyisipan CSS "Paro Atas" menggunakan Alat penting.

Pendekatan lain untuk menghilangkan gaya yang memblokir render adalah dengan membagi gaya tersebut menjadi beberapa file berbeda, yang diatur berdasarkan kueri media. Kemudian, tambahkan atribut media ke setiap link stylesheet. Saat memuat halaman, browser hanya memblokir paint pertama untuk mengambil stylesheet yang cocok dengan perangkat pengguna (lihat CSS Pemblokiran Render).

Terakhir, Anda dapat meminifikasi CSS untuk menghapus spasi kosong atau karakter tambahan (lihat Meminimalkan CSS). Hal ini memastikan bahwa Anda mengirimkan paket yang sekecil mungkin ke pengguna.

Panduan khusus stack

AMP

Gunakan alat seperti AMP Optimizer untuk merender tata letak AMP sisi server.

Drupal

Sebaiknya gunakan modul untuk menyejajarkan CSS dan JavaScript penting, atau memuat aset secara asinkron melalui JavaScript, seperti modul Agregasi CSS/JS Lanjutan.

Joomla

Ada sejumlah plugin Joomla yang dapat membantu Anda menyejajarkan aset penting atau menunda resource yang tidak penting.

WordPress

Ada sejumlah plugin WordPress yang dapat membantu Anda menyejajarkan aset penting atau menunda resource yang tidak penting.

Referensi