Slike so običajno najtežji bajti na strani, zato je njihova optimizacija največja zmaga za LCP. Trije vzvodi: sodobni formati, odzivno dimenzioniranje in prioriteta nalaganja.
AVIF in WebP se pri isti kakovosti stisneta precej manjše kot JPEG/PNG (AVIF je pogosto 50 % manjši od JPEG). Postrezi ju z zasilno možnostjo (fallback), da stari brskalniki še vedno delujejo:
Ne pošiljaj 2000-pikselske slike na 400-pikselski telefon. srcset brskalniku omogoča, da izbere pravo velikost za napravo:
<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 brskalniku pove, kako široko se slika izriše, da lahko izbere najmanjši zadosten vir.
fetchpriority="high", loading="eager" in razmisli o preload.loading="lazy", da se ne pridobi, dokler ni potrebna.Vedno ohrani width/height, da preprečiš CLS.
Počasen LCP je najpogosteje le predimenzionirana hero slika. Poznavanje formatov (AVIF/WebP), srcset za pravo ločljivost in pravilne prioritete — poleg tega, da ne lazy-loadaš LCP slike — je praktičen nabor orodij, ki ga spraševalci pričakujejo, in je običajno posamična sprememba z največjim učinkom na resnični strani.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj