Imaginile sunt de obicei cei mai grei octeți de pe o pagină, așa că optimizarea lor este cel mai mare câștig de LCP. Trei pârghii: formate moderne, dimensionare responsivă și prioritate de încărcare.
AVIF și WebP comprimă mult mai mic decât JPEG/PNG la aceeași calitate (AVIF adesea cu 50% mai mic decât JPEG). Servește-le cu un fallback ca browserele vechi să funcționeze în continuare:
Nu trimite o imagine de 2000px către un telefon de 400px. srcset permite browserului să aleagă dimensiunea potrivită pentru dispozitiv:
<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 îi spune browserului cât de lat este randată imaginea, ca să poată alege cea mai mică sursă suficientă.
fetchpriority="high", loading="eager" și ia în calcul un preload.loading="lazy" ca să nu fie adusă până când e nevoie.Păstrează întotdeauna width/height pentru a preveni CLS.
Un LCP lent este cel mai adesea doar o imagine hero supradimensionată. Cunoașterea formatelor (AVIF/WebP), a lui srcset pentru rezoluția potrivită și a priorității corecte — plus a nu face lazy-load la imaginea LCP — este trusa practică pe care o așteaptă intervievatorii și este de obicei singura schimbare cu impactul cel mai mare pe un site real.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează