Cara membaiki amaran penghantaran imej dalam PageSpeed Insights

1. 01Buka halaman terjejas dalam PageSpeed Insights atau Lighthouse. Pilih laporan mudah alih atau desktop yang ingin diperbaiki, kemudian buka amaran penghantaran imej dan catat URL imej serta perubahan yang disarankan.
2. 02Cari imej itu pada halaman. Dalam alat pembangun pelayar, bandingkan imej muat turun dengan dimensi paparannya sambil mengambil kira ketumpatan skrin. Semak sumber yang dipilih, bukan hanya asal dalam pustaka media.
3. 03Jika imej yang dihantar mempunyai terlalu banyak piksel, betulkan saiz responsif atau tetapan tema dahulu. Jika dimensinya sesuai, bandingkan pemampatan atau format alternatif yang disokong.
4. 04Sediakan salinan berdimensi diperlukan dalam penyunting imej. Gunakan pemampat imej Bitinz untuk fail sesuai, dan periksa teks, tepi, ketelusan serta kecerunan sebelum menggantikan apa-apa.
5. 05Terbitkan penggantian atau perubahan templat. Pastikan halaman meminta imej baharu, bukan versi lama dalam cache, kemudian ulang laporan dengan tetapan peranti yang sama.

Chrome menganggarkan penjimatan daripada saiz muat turun dan nisbah bait kepada piksel yang cekap bagi format itu. Imej dengan anggaran penjimatan kurang daripada 4 KiB tidak ditandai. Ini ambang pelaporan, bukan saiz maksimum imej yang disarankan.

Lighthouse 13 menggantikan audit imej lama dengan cerapan ini; Lighthouse 12 sudah menjadikan cerapan paparan laporan lalai. Amaran format, dimensi berlebihan dan animasi berat mungkin memerlukan penyelesaian berbeza. Untuk aliran penerbitan lebih luas, ikuti cara memampatkan imej untuk laman web.

• WordPress: semak saiz imej yang dipilih dalam blok atau tema serta penanda srcset dan sizes sebenar. WordPress menjana calon imej responsif, tetapi templat tersuai atau penerangan susun atur yang salah masih boleh menghantar saiz tidak sesuai. Membetulkan fail asal sahaja mungkin membiarkan salinan terjana lama terus digunakan.
• Shopify: imej kedai sudah dioptimumkan melalui CDN Shopify, termasuk pemilihan format. Shopify menyatakan pemampatan manual sebelum muat naik tidak diperlukan. Untuk amaran, periksa lebar imej yang diminta tema dan penanda responsif, bukan merosakkan sumber berulang kali. Pembangun tema boleh menyemak image_url dan image_tag.
• Next.js: gunakan tetapan responsif komponen Image dan berikan sizes nilai yang sepadan dengan susun atur sebenar, terutama bersama fill. Tanpa nilai sesuai, imej sempit boleh dianggap selebar ruang pandang lalu calon lebih besar dimuat turun. Menukar kualiti sahaja tidak membetulkan ketidakpadanan susun atur itu.

Simpan asal yang boleh disunting. Untuk imej yang dihantar sendiri, bandingkan saiz dan rupa sebenar fail yang disediakan; perbandingan JPG, PNG dan WebP membantu pilihan anda. Bitinz tidak mengubah dimensi imej. Penukaran WebP boleh membesarkan fail, jadi simpan versi yang benar-benar sesuai untuk halaman.

Untuk aliran penerbitan berulang, API pembangun boleh memproses fail sesuai dengan akaun dan kuota bulanan. Ia tidak membaiki penanda tema atau susun atur responsif. Semak halaman yang dihantar sekali lagi selepas automasi disambungkan.

• URL yang ditandai sepadan dengan imej dan versi yang diubah.
• Pelayar memilih sumber sesuai merentas saiz skrin.
• Pemampatan mengekalkan butiran penting, ketelusan dan kecerunan lembut.
• Imej utama yang kelihatan tidak dilewatkan oleh tetapan pemuatan malas yang tidak sesuai.
• Laporan baharu menggunakan tetapan peranti yang sama; rupa serta pemuatan halaman sebenar turut diperiksa.