Performanță web
Cum optimizezi o imagine hero LCP fără să arate mai rău
Imaginea LCP este adesea învinovățită pentru orice hero lent, dar dimensiunea fișierului este doar o parte. Browserul trebuie să primească documentul, să descopere resursa corectă, să-i dea prioritate, să o descarce, decodeze și afișeze într-un layout stabil.
Descompune LCP în traseul de livrare
Măsoară timpul până la primul byte, întârzierea pornirii resursei, durata descărcării și întârzierea randării. Astfel afli dacă remedierea aparține serverului, descoperirii HTML, priorității, imaginii, CSS-ului sau firului principal.
1. Identifică elementul LCP real și întârzierea
Pornește de la atribuirea datelor reale când există, apoi reproduce pagina într-un trace de laborator. Confirmă ce element devine LCP la viewportul relevant; mobilul și desktopul pot selecta imagini diferite sau chiar text. Analizează cascada de cereri și momentul descoperirii.
- Măsoară mai multe rulări comparabile și notează cache-ul, dispozitivul, rețeaua, consimțământul și viewportul.
- Separă întârzierea serverului, descoperirii, descărcării și randării înainte să alegi soluția.
- Verifică varianta responsive aleasă efectiv de browser, nu presupune că se descarcă URL-ul din src.
2. Fă resursa ușor de descoperit și importantă
Pune imaginea în HTML-ul inițial cu src sau srcset normal. Nu aplica lazy loading unei imagini LCP vizibile. Folosește fetchpriority=high doar pentru candidata probabilă și preload când resursa ar rămâne ascunsă în CSS, JavaScript sau randare client întârziată.
- Evită data-src și markup-ul hero inserat de script care împiedică preload scannerul să găsească imaginea.
- Nu preîncărca toate variantele responsive sau toate imaginile hero; cererile urgente concurează între ele și cu CSS-ul.
- Pentru preload responsive, aliniază imagesrcset, imagesizes, tipul și comportamentul cross-origin cu elementul final.
3. Livrează pixelii și byte-urile potrivite
Folosește srcset și sizes pentru ca ecranele mici să nu descarce dimensiuni desktop. Alege AVIF sau WebP când se potrivesc vizual și tehnic, dar compară rezultatul real. Setează width și height intrinseci pentru a păstra layoutul stabil în timpul încărcării.
- Decupează pentru raportul componentei în loc să trimiți o sursă mare din care CSS-ul ascunde majoritatea.
- Reglează compresia prin inspecție vizuală pe ecrane uzuale cu densitate mare, nu doar după un număr arbitrar.
- Păstrează variantele fingerprinted în cache pe termen lung și schimbă amprenta când conținutul se modifică.
4. Elimină munca ce întârzie afișarea
O imagine descărcată poate aștepta după CSS, fonturi, animații, overlay-uri sau sarcini JavaScript lungi. Ține stilurile critice mici, nu ascunde elementul final până la hidratare și verifică dacă personalizarea ori consimțământul nu îl înlocuiește după încărcare.
- Inspectează intervalul dintre finalul descărcării imaginii și momentul LCP pentru întârziere evitabilă.
- Preferă un hero stabil randat pe server în locul unui carusel care schimbă candidata în timpul pornirii.
- Retestează calitatea vizuală, CLS, accesibilitatea, conversia și LCP real după lansare.
Listă pentru optimizarea imaginii LCP
- 01 Identifică elementele LCP reale pe mobil și desktop și cele patru componente de timp.
- 02 Pune imaginea probabilă în HTML-ul inițial și elimină lazy loading de pe ea.
- 03 Folosește fetchpriority sau preload selectiv doar când trace-ul arată întârziere de descoperire ori prioritate.
- 04 Livrează dimensiuni responsive, codare potrivită, mărime intrinsecă și raport stabil.
- 05 Reduce întârzierile de server, CSS, font, hidratare și fir principal care amână afișarea.
- 06 Compară rulări multiple, un dispozitiv fizic și apoi date reale, păstrând calitatea vizuală și conversia.
Optimizează traseul critic, nu doar fișierul
Schimbarea bună ajută browserul să descopere devreme imaginea corectă, să-i acorde prioritate proporțională, să transfere doar pixelii necesari și să o afișeze fără muncă inutilă. Folosește trace-ul și dovedește rezultatul dincolo de o rulare Lighthouse.
Surse principale
Continuă cu un ghid conex
Aceste verificări se influențează reciproc. Continuă cu următorul ghid pentru a valida semnalele din jur, nu doar o etichetă sau un scor.