Gambar biasanya adalah byte terberat di sebuah halaman, jadi mengoptimalkannya adalah kemenangan LCP terbesar. Tiga tuas: format modern, penyesuaian ukuran responsif, dan prioritas loading.
AVIF dan WebP mengompres jauh lebih kecil daripada JPEG/PNG pada kualitas yang sama (AVIF sering 50% lebih kecil dari JPEG). Sajikan dengan fallback agar browser lama tetap bekerja:
Jangan kirim gambar 2000px ke ponsel 400px. srcset memungkinkan browser memilih ukuran yang tepat untuk perangkat:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes memberi tahu browser seberapa lebar gambar dirender sehingga ia bisa memilih sumber terkecil yang mencukupi.
fetchpriority="high", loading="eager", dan pertimbangkan sebuah preload.loading="lazy" agar tidak di-fetch hingga dibutuhkan.Selalu pertahankan width/height untuk mencegah CLS.
LCP yang lambat paling sering hanya sebuah gambar hero yang kebesaran. Mengetahui format (AVIF/WebP), srcset untuk resolusi yang tepat, dan prioritas yang benar — ditambah tidak melakukan lazy-load gambar LCP — adalah perangkat praktis yang diharapkan pewawancara, dan biasanya itu adalah satu perubahan paling berdampak di sebuah situs nyata.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi