Slike su obično najteži bajtovi na stranici, pa je njihova optimizacija najveći LCP potez. Tri poluge: moderni formati, responzivno dimenzioniranje i prioritet učitavanja.
AVIF i WebP komprimiraju daleko manje od JPEG/PNG pri istoj kvaliteti (AVIF je često 50% manji od JPEG-a). Poslužite ih s fallbackom kako bi stari preglednici i dalje radili:
Nemojte slati sliku od 2000px na telefon od 400px. srcset omogućuje pregledniku da odabere pravu veličinu za uređaj:
<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 govori pregledniku koliko se slika široko renderira kako bi mogao odabrati najmanji dovoljan izvor.
fetchpriority="high", loading="eager" i razmislite o preload.loading="lazy" da se ne dohvaća dok ne zatreba.Uvijek zadržite width/height da spriječite CLS.
Spor LCP najčešće je samo prevelika hero slika. Poznavanje formata (AVIF/WebP), srcset za pravu rezoluciju i ispravan prioritet — plus ne lazy-loading LCP slike — praktičan je alat koji ispitivači očekuju i obično je pojedinačna promjena s najvećim učinkom na stvarnom siteu.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj