Lighthouse melaporkan jumlah permintaan jaringan yang dibuat dan jumlah data yang ditransfer saat halaman dimuat:
- Nilai Requests dan Transfer Size untuk baris Total dihitung dengan menambahkan nilai untuk baris Image, Script, Font, Stylesheet, Other, Document, dan Media.
- Kolom Pihak ketiga tidak memperhitungkan nilai baris Total. Tujuannya adalah untuk membuat Anda mengetahui jumlah total permintaan dan jumlah total ukuran transfer yang berasal dari domain pihak ketiga. Permintaan pihak ketiga dapat berupa kombinasi dari jenis resource lainnya.
Cara mengurangi jumlah resource dan ukuran transfer
Efek jumlah resource yang tinggi atau ukuran transfer yang besar pada performa pemuatan bergantung pada jenis resource yang diminta.
CSS dan JavaScript
Permintaan untuk file CSS dan JavaScript memblokir perenderan secara default. Dengan kata lain, browser tidak dapat merender konten ke layar sampai semua permintaan CSS dan JavaScript selesai. Jika salah satu file ini dihosting di server yang lambat, satu server lambat tersebut dapat menunda seluruh proses rendering. Lihat Mengoptimalkan JavaScript, Mengoptimalkan resource pihak ketiga, dan Mengoptimalkan CSS Anda untuk mempelajari cara mengirim kode yang benar-benar Anda butuhkan.
Metrik yang terpengaruh: Semua
Gambar
Permintaan gambar tidak memblokir render seperti CSS dan JavaScript, tetapi masih dapat memengaruhi performa pemuatan secara negatif. Masalah yang umum terjadi adalah ketika pengguna seluler memuat halaman dan melihat bahwa gambar mulai dimuat, tetapi perlu waktu beberapa saat untuk menyelesaikannya. Lihat Mengoptimalkan gambar Anda untuk mempelajari cara memuat gambar lebih cepat.
Metrik yang terpengaruh: First Contentful Paint, First Intentful Paint, Indeks Kecepatan
Font
Pemuatan file font yang tidak efisien dapat menyebabkan teks yang tidak terlihat selama pemuatan halaman. Lihat Mengoptimalkan font Anda untuk mempelajari cara menyetel default ke font yang tersedia di perangkat pengguna, lalu beralih ke font kustom Anda setelah selesai didownload.
Metrik yang terpengaruh: First Contentful Paint
Dokumen
Jika file HTML Anda besar, browser harus menghabiskan lebih banyak waktu untuk mengurai HTML dan membuat hierarki DOM dari HTML yang diurai.
Metrik yang terpengaruh: First Contentful Paint
Media
File GIF animasi seringkali berukuran sangat besar. Lihat Mengganti GIF dengan video untuk mempelajari cara memuat animasi lebih cepat.
Metrik yang terpengaruh: First Contentful Paint
Menggunakan anggaran performa untuk mencegah regresi
Setelah Anda mengoptimalkan kode untuk mengurangi jumlah permintaan dan ukuran transfer, lihat Menetapkan anggaran performa untuk mempelajari cara mencegah regresi.
Referensi
Kode sumber untuk audit Menjaga jumlah permintaan tetap rendah dan ukuran transfer tetap kecil