Optimizarea Largest Contentful Paint (LCP): adu LCP sub 2,5 secunde. Un ghid despre optimizarea imaginilor și despre TTFB.

Pe această pagină
Rezumat
Largest Contentful Paint (LCP) măsoară cât durează până când cel mai mare element de conținut de pe pagina ta devine vizibil, cu o țintă Google de sub 2,5 secunde.
Vrei să afli mai mult? Întreabă
LCP este un indicator critic al experienței utilizatorului și un factor de clasare Google. Când un utilizator deschide pagina ta, nu îl interesează timpul total de încărcare. Îl interesează momentul în care poate vedea conținutul principal și poate începe să citească sau să interacționeze. LCP măsoară exact acest moment: când devine vizibil cel mai mare element de conținut. Dacă LCP este bun, pagina ta pare rapidă. Dacă nu, pagina pare lentă, chiar dacă ceilalți indicatori sunt în regulă.
Optimizarea LCP cere o abordare pe trei direcții: îmbunătățirea timpului de răspuns al serverului (TTFB), eliminarea resurselor care blochează afișarea și optimizarea imaginilor. Fiecare abordare tratează alte blocaje ale LCP. Combinația aduce îmbunătățiri spectaculoase.
Largest Contentful Paint (LCP) este timpul de afișare al celui mai mare element de conținut vizibil de pe pagina ta. Poate fi o imagine mare, un video, un titlu sau un bloc de text. LCP măsoară din momentul în care utilizatorul deschide pagina până când acel element devine vizibil. Documentația Google despre LCP oferă informații tehnice detaliate și strategii de optimizare.
LCP nu este un indicator de tip admis sau respins. Este un scor continuu. Google a stabilit că un LCP sub 2,5 secunde este „bun”, un LCP între 2,5 și 4 secunde necesită îmbunătățiri, iar un LCP peste 4 secunde este slab. Utilizatorii percep paginile cu LCP sub 2 secunde ca fiind foarte rapide. Paginile cu LCP de 3-4 secunde par vizibil mai lente. Paginile cu LCP peste 5 secunde sunt adesea abandonate.
LCP se modifică pe parcursul încărcării paginii, pe măsură ce apar elemente de conținut mai mari. Dacă o imagine mare se încarcă la al treilea secund, LCP sare de la 1 secundă la 3 secunde. Asta este important: nu poți optimiza doar timpul primei afișări. Trebuie să te asiguri că toate elementele mari de conținut se încarcă rapid.
Time to First Byte (TTFB) este timpul de la începutul navigării până când serverul returnează primul octet al documentului HTML. TTFB stabilește pragul minim pentru LCP. Dacă TTFB este de 2 secunde, LCP nu poate fi mai bun de 2 secunde, pentru că browserul nu a primit încă nici HTML-ul. Reducerea TTFB este o condiție prealabilă pentru reducerea LCP.
Un TTFB bun este sub 600 de milisecunde. Un TTFB între 600 și 1800 ms necesită îmbunătățiri. Un TTFB peste 1800 ms este slab. Dacă TTFB-ul tău este lent, concentrează-te întâi pe optimizarea serverului. Nicio optimizare de frontend nu poate compensa un server lent.
Cauzele obișnuite ale unui TTFB lent: cod backend ineficient, interogări ale bazei de date sau supraîncărcarea serverului. Găzduirea slabă provoacă și ea un TTFB ridicat. Găzduirea partajată este adesea extrem de lentă. Treci la un VPS sau la o găzduire în cloud pentru performanțe mai bune. Folosește un CDN ca să reduci TTFB, livrând conținutul de pe servere apropiate de utilizatorii tăi.
PageSpeed Insights îți arată TTFB în secțiunea „Timpul de răspuns al serverului”. Dacă TTFB este un blocaj, va fi evidențiat ca prioritate.
LCP depinde de cel mai mare element de conținut de pe pagina ta. Pe un articol de blog, cel mai mare element poate fi o imagine mare de început. Pe o pagină de produs, poate fi fotografia produsului. Pe un site de știri, poate fi titlul unui articol. Identificarea elementului LCP este primul pas către optimizarea lui.
Folosește Chrome DevTools ca să identifici elementul LCP. Deschide DevTools, mergi la fila Performance, pornește înregistrarea și reîncarcă pagina. În înregistrarea de performanță, caută marcajul „Largest Contentful Paint”. Plasează cursorul peste el ca să vezi ce element a declanșat LCP. Odată ce știi elementul, optimizează-l.
Elementul LCP este adesea o imagine. Imaginile sunt mari și se încarcă după ce HTML-ul este analizat. Optimizarea încărcării imaginilor are cel mai mare impact asupra LCP pentru majoritatea site-urilor. Imaginile de sub linia vizibilă pot fi încărcate amânat, ceea ce accelerează LCP pentru conținutul de deasupra liniei vizibile.
Preîncărcarea îi spune browserului să înceapă descărcarea unei resurse devreme, înainte ca aceasta să fie necesară pentru afișare. Preîncarcă imaginea LCP sau alte resurse critice folosind etichetele `` din head-ul HTML. Aceasta îi spune browserului „începe imediat descărcarea acestei resurse”.
Exemplu: `` îi spune browserului să înceapă imediat descărcarea imaginii principale, fără să aștepte analizarea CSS-ului. Asta poate reduce LCP cu 100-500 ms, în funcție de dimensiunea resursei.
Fii atent la preîncărcare. Preîncărcarea prea multor resurse irosește lățimea de bandă. Preîncarcă doar cele mai critice resurse (imaginea principală, fonturile critice, CSS-ul esențial). Ghidul Google de optimizare a Core Web Vitals explică cele mai bune practici de preîncărcare.
Dacă elementul tău LCP este o imagine, optimizează dimensiunea fișierului și strategia de încărcare. Trei tactici:
Comprimă imaginea. Folosește instrumente precum TinyPNG, ImageOptim sau Squoosh ca să comprimi fără pierdere de calitate. Compresia JPEG poate reduce dimensiunea fișierului de 10-40 de ori. Fiecare 100 KB de imagine adaugă 100-200 ms la LCP pe rețelele 4G. Compresia are un randament foarte bun.
Folosește formate moderne. WebP este cu 25-35% mai mic decât JPEG. AVIF este și mai mic. Folosește elementul HTML `
Specifică dimensiunile imaginii. Includerea atributelor de lățime și înălțime previne deplasările de layout și permite browserului să rezerve spațiul înainte ca imaginea să se încarce. Asta nu îmbunătățește direct LCP, dar îmbunătățește Cumulative Layout Shift (CLS), un alt indicator Core Web Vitals.
CSS-ul care blochează afișarea împiedică browserul să afișeze pagina până când CSS-ul este descărcat și analizat. Fișierele CSS mari întârzie afișarea. Redu CSS-ul care blochează afișarea incluzând CSS-ul critic direct în pagină și amânând restul.
CSS-ul critic este CSS-ul necesar pentru conținutul de deasupra liniei vizibile. Include acest CSS în `
Surse
Nu. LCP măsoară momentul în care conținutul principal devine vizibil. Timpul de încărcare măsoară momentul în care se termină descărcarea tuturor resurselor. O pagină poate avea un LCP bun, dar o încărcare totală lentă. LCP contează mai mult decât timpul total de încărcare.
Trei cauze principale: TTFB lent, CSS și JavaScript care blochează afișarea și imagini neoptimizate. Remediază TTFB îmbunătățind performanța serverului sau folosind un CDN. Amână JavaScript-ul care nu este critic și comprimă imaginile.
Imaginile sunt adesea cel mai mare element de conținut și definesc LCP. Reducerea dimensiunii fișierelor de imagine are cel mai mare impact. Încărcarea amânată a imaginilor de sub linia vizibilă îmbunătățește LCP-ul inițial.
AU ÎNCERCAT SORANK ÎNAINTEA TA
