Bagaimana Gambar Memengaruhi Core Web Vitals - dan Cara Memperbaikinya
Gambar adalah penyebab sebagian besar kegagalan LCP (Largest Contentful Paint). Jika Core Web Vitals Anda merah, kemungkinan besar gambarlah penyebabnya. Begini cara memperbaikinya.
Coba sekarang - gratis, tanpa daftar.
Kompres Gambar secara Pintar →Gambar dan LCP (Largest Contentful Paint)
LCP mengukur kapan elemen terbesar yang terlihat selesai dimuat. Di sebagian besar halaman, elemen itu adalah gambar. Google ingin LCP di bawah 2,5 detik.
Cara memperbaiki LCP:
- Gunakan WebP/AVIF: File 25-50% lebih kecil = unduhan lebih cepat. Konversi sekarang.
- Ubah ukuran gambar: Sajikan ukuran yang pas untuk kontainernya. Ubah ukuran di sini.
- Preload gambar hero:
<link rel="preload" as="image" href="hero.webp"> - Gunakan CDN: Sajikan gambar dari server edge yang dekat dengan pengguna.
- Atur fetchpriority:
<img fetchpriority="high">untuk gambar di atas lipatan layar.
Gambar dan CLS (Cumulative Layout Shift)
CLS mengukur pergeseran tata letak yang tidak terduga. Gambar tanpa dimensi membuat halaman melompat saat gambar dimuat.
Cara memperbaiki CLS:
- Selalu atur width dan height:
<img width="800" height="600"> - Gunakan CSS aspect-ratio:
aspect-ratio: 16/9;sebagai alternatif modern - Hindari lazy loading di atas lipatan: Jangan tambahkan
loading="lazy"pada gambar hero Anda
Daftar Perbaikan Cepat
- Kompres secara pintar semua gambar (kualitas optimal otomatis)
- Ubah ukuran ke dimensi tampil sebenarnya
- Tambahkan atribut width/height ke semua tag
<img> - Preload gambar LCP Anda
- Lazy load semua yang ada di bawah lipatan layar
- Uji ulang di PageSpeed Insights
FAQ
Berapa skor LCP yang baik?
Di bawah 2,5 detik berarti "Baik" (hijau). 2,5-4 detik berarti "Perlu Perbaikan" (kuning). Di atas 4 detik berarti "Buruk" (merah). Optimasi gambar saja sering bisa membawa Anda dari merah ke hijau.
Haruskah saya memakai lazy load untuk semua gambar?
Tidak! Jangan lazy load gambar di atas lipatan layar (terutama gambar hero/LCP). Lazy load hanya gambar yang awalnya berada di luar layar. Lazy loading berlebihan justru merugikan LCP.
Siap? 100% gratis, berjalan di browser Anda.
Kompres Gambar secara Pintar →