The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Situs Tidak Menggunakan Sumber Daya Yang Menunda Gambar Pertama

Mengapa audit itu penting

Pemuatan laman yang cepat mengakibatkan interaksi pengguna yang lebih tinggi, lebih banyak laman yang ditayangkan, dan peningkatan konversi.

Anda bisa memperbaiki kecepatan pemuatan laman dengan menyelaraskan tautan dan skrip yang diperlukan untuk gambar pertama, serta menangguhkan yang tidak diperlukan.

Cara untuk lulus audit

Di laporan Anda, Lighthouse mencantumkan semua tautan atau skrip yang memblokir rendering yang terdeteksi. Yang menjadi sasaran adalah mengurangi jumlahnya.

Sebagaimana disebutkan dalam Cara implementasi audit, Lighthouse menandai tiga tipe tautan yang memblokir rendering: impor skrip, stylesheet, dan HTML. Cara Anda mengoptimalkan bergantung pada tipe sumber daya yang sedang Anda gunakan.

  • Untuk skrip penting, sebaiknya selaraskan di HTML Anda. Untuk skrip yang tidak begitu penting, sebaiknya tandai dengan atribut async atau defer. Lihat Menambahkan Interaktivitas dengan JavaScript untuk mengetahui selengkapnya.
  • Untuk stylesheet, sebaiknya pecah gaya Anda menjadi beberapa macam file, yang disusun menurut kueri media, kemudian tambahkan atribut untuk media ke setiap tautan stylesheet. Saat memuat laman, browser hanya memblokir gambar pertama untuk mengambil stylesheet yang cocok dengan perangkat pengguna. Lihat CSS Pemblokiran Rendering untuk mengetahui selengkapnya.
  • Untuk impor HTML yang tidak begitu penting, tandai dengan atribut async. Sebagai aturan umum, async harus digunakan bersama impor HTML sebanyak mungkin.

Cara implementasi audit

Bagian ini menjelaskan cara implementasi audit, agar Anda bisa memahami cara menghitung skor audit.

Lighthouse mengidentifikasi tiga tipe sumber daya pemblokiran.

Tag <script> yang:

  • Ada dalam <head> dokumen.
  • Tidak memiliki atribut defer.
  • Tidak memiliki atribut async.

Tag <link rel="stylesheet"> yang:

  • Tidak memiliki atribut disabled. Bila atribut ini ada, browser tidak akan mengunduh stylesheet.
  • Tidak memiliki atribut media yang cocok dengan perangkat pengguna.

Tag <link rel="import"> yang:

  • Tidak memiliki atribut async.