Bagian Peluang pada laporan Lighthouse Anda mencantumkan semua URL yang memblokir penggambaran pertama halaman Anda. Tujuannya adalah untuk mengurangi dampak URL pemblokir rendering ini dengan menyisipkan resource penting, menunda resource non-penting, dan menghapus apa pun yang tidak digunakan.
URL mana yang ditandai sebagai resource yang memblokir rendering?
Lighthouse menandai dua jenis URL yang memblokir render: skrip dan stylesheet.
Tag <script> yang:
- Ada dalam
<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
mediayang secara khusus cocok dengan perangkat pengguna.media="all"dianggap memblokir render.
Cara mengidentifikasi resource penting
Langkah pertama untuk mengurangi dampak resource pemblokir render adalah mengidentifikasi mana yang penting dan mana yang tidak. Gunakan tab Cakupan di Chrome DevTools untuk mengidentifikasi CSS dan JS yang tidak penting. Saat Anda memuat atau menjalankan halaman, tab memberi tahu Anda berapa banyak kode yang digunakan, dibandingkan berapa banyak kode yang dimuat:
Anda dapat mengurangi ukuran halaman dengan hanya mengirimkan kode dan gaya yang Anda perlukan. Klik URL untuk memeriksa {i>file<i} itu di panel {i>Source<i}. Gaya dalam file CSS dan kode dalam file JavaScript ditandai dengan dua warna:
- Hijau (penting): Gaya yang diperlukan untuk gambar pertama; kode yang penting untuk fungsi inti halaman.
- Merah (tidak penting): Gaya yang diterapkan ke konten yang tidak langsung terlihat; kode yang tidak digunakan dalam fungsi inti halaman.
Cara menghilangkan skrip pemblokiran render
Setelah mengidentifikasi kode penting,
pindahkan kode tersebut dari URL pemblokir render ke tag script inline di halaman HTML Anda.
Saat halaman dimuat, halaman akan memiliki fungsi yang diperlukan untuk menangani fungsi inti halaman.
Jika ada kode di URL pemblokir rendering 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 rendering
Serupa dengan menyisipkan kode dalam tag <script>,
gaya penting inline diperlukan untuk gambar pertama
di dalam blok <style> di head halaman HTML.
Kemudian, muat gaya lainnya secara asinkron menggunakan link preload
(lihat Menunda CSS yang tidak digunakan).
Pertimbangkan untuk mengotomatiskan proses ekstraksi dan penyisipan CSS "Paruh Atas" menggunakan Alat penting.
Pendekatan lain untuk menghilangkan gaya pemblokiran render adalah memisahkan gaya tersebut menjadi beberapa file, yang diatur berdasarkan kueri media. Kemudian, tambahkan atribut media ke setiap link stylesheet. Saat memuat halaman, browser hanya memblokir gambar pertama untuk mengambil stylesheet yang cocok dengan perangkat pengguna (lihat CSS Pemblokir Render).
Terakhir, Anda sebaiknya meminifikasi CSS untuk menghapus spasi kosong atau karakter tambahan (lihat Meminifikasi CSS). Hal ini memastikan bahwa Anda mengirim paket sekecil mungkin kepada 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, dan gunakan atribut tunda untuk CSS atau JavaScript yang tidak penting.
Joomla
Ada sejumlah plugin Joomla yang dapat membantu Anda menyejajarkan aset penting atau menunda resource yang tidak penting.
WordPress
Terdapat sejumlah plugin WordPress yang dapat membantu Anda menyejajarkan aset penting atau menunda resource yang kurang penting.