Cara memperbaiki pengiriman gambar di PageSpeed Insights

1. 01Buka halaman terkait di PageSpeed Insights atau Lighthouse. Pilih laporan seluler atau desktop, buka bagian perbaikan pengiriman gambar, lalu catat URL gambar yang ditandai dan perubahan yang disarankan.
2. 02Temukan gambar pada halaman. Di alat pengembang, bandingkan gambar unduhan dengan dimensi tampilannya sambil memperhitungkan kerapatan layar. Periksa sumber yang dipilih, bukan hanya asli di pustaka media.
3. 03Jika gambar yang dikirim memiliki terlalu banyak piksel, perbaiki ukuran responsif atau pengaturan tema dahulu. Jika dimensinya tepat, bandingkan kompresi atau format alternatif yang didukung.
4. 04Siapkan salinan dengan dimensi yang diperlukan dalam editor gambar. Gunakan kompresor gambar Bitinz untuk berkas yang sesuai; periksa teks, tepi, transparansi, dan gradasi sebelum mengganti.
5. 05Terbitkan pengganti atau perubahan templat. Pastikan halaman meminta gambar baru, bukan versi lama dari cache, lalu ulangi laporan dengan pengaturan perangkat yang sama.

Chrome memperkirakan penghematan dari ukuran unduhan dan rasio byte terhadap piksel yang efisien untuk formatnya. Gambar dengan perkiraan penghematan di bawah 4 KiB tidak ditandai. Ini ambang laporan, bukan saran ukuran maksimum.

Lighthouse 13 mengganti audit gambar lama dengan insight ini; Lighthouse 12 sudah menjadikan insight tampilan laporan bawaan. Peringatan format, dimensi berlebih, dan animasi berat mungkin memerlukan solusi berbeda. Untuk alur penerbitan lengkap, ikuti cara mengompres gambar untuk situs.

• WordPress: periksa ukuran yang dipilih di blok atau tema dan markup srcset serta sizes yang sebenarnya. WordPress menghasilkan kandidat responsif, tetapi templat khusus atau deskripsi tata letak yang salah masih bisa menyajikan ukuran tidak sesuai. Mengganti asli saja bisa membuat salinan lama tetap dipakai.
• Shopify: gambar toko sudah dioptimalkan melalui CDN Shopify, termasuk pemilihan format. Shopify menyatakan kompresi manual sebelum unggah tidak diperlukan. Jika ada peringatan, periksa lebar yang diminta tema dan markup responsif alih-alih berulang kali menurunkan kualitas sumber. Pengembang tema bisa memeriksa image_url dan image_tag.
• Next.js: gunakan pengaturan responsif komponen Image dan isi sizes sesuai tata letak sebenarnya, terutama dengan fill. Tanpa nilai sesuai, gambar sempit bisa dianggap selebar area pandang dan kandidat lebih besar diunduh. Mengubah kualitas saja tidak memperbaiki ketidakcocokan ini.

Simpan asli yang dapat diedit. Untuk gambar yang disajikan secara mandiri, bandingkan ukuran nyata dan tampilannya; perbandingan JPG, PNG, dan WebP membantu memilih. Bitinz tidak mengubah dimensi gambar. Konversi WebP bisa memperbesar berkas, jadi simpan versi yang sesuai dengan halaman.

Untuk penerbitan rutin, API pengembang dapat memproses berkas yang sesuai dengan akun dan kuota bulanan. API tidak memperbaiki markup tema atau tata letak responsif. Periksa halaman lagi setelah otomatisasi terhubung.

• URL yang ditandai cocok dengan gambar dan versi yang diubah.
• Peramban memilih sumber yang sesuai pada berbagai ukuran layar.
• Kompresi mempertahankan detail penting, transparansi, dan gradasi lembut.
• Gambar utama yang terlihat tidak tertunda karena pengaturan pemuatan tertunda yang tidak tepat.
• Laporan baru memakai pengaturan perangkat yang sama; tampilan dan pemuatan halaman juga diperiksa.