Despre cele trei Core Web Vitals: LCP, FID & CLS

Core Web Vitals sunt trei indicatori de performanță introduși de Google pentru a măsura experiența utilizatorilor pe site-uri. Ei includ: Largest Contentful Paint (LCP), First Input Delay (FID) și Cumulative Layout Shift (CLS). Acești indicatori reflectă viteza de încărcare, receptivitatea și stabilitatea vizuală a paginii. Optimizarea lor aduce atât beneficii pentru utilizatori, cât și un potențial avantaj SEO.

Actualizarea Google Page Experience alimentată de Web Vitals

Google a introdus experiența paginii ca factor de clasare, iar în centrul acestei actualizări se află Core Web Vitals. În general, metricile de viteză sunt greu de înțeles și pot varia la fiecare test. Dintre toate, Google a ales trei indicatori principali pe care îi va monitoriza constant: LCP, FID și CLS.

Cei trei piloni ai experienței paginii

• Performanța la încărcare (cât de repede apare conținutul pe ecran?)
• Receptivitatea (cât de repede reacționează pagina la interacțiuni?)
• Stabilitatea vizuală (se mișcă elementele pe ecran în timpul încărcării?)

Cei trei Core Web Vitals

• LCP (Largest Contentful Paint): timpul necesar pentru ca cel mai mare element vizibil de pe pagină să se încarce.
• FID (First Input Delay): timpul necesar pentru ca pagina să răspundă la prima interacțiune a utilizatorului.
• CLS (Cumulative Layout Shift): măsoară cât de mult „sar” elementele pe ecran în timpul încărcării.

Ce sunt Indicatorii Web Vitals Core?

Indicatorii Web Vitals Core nu funcționează singuri, deoarece există și alte valori importante. Unele provin din teste de laborator controlate, iar altele se bazează pe date reale de utilizare („field data”). După ani de cercetare, Google a definit setul Core Web Vitals, un grup de metrici esențiale pentru experiența utilizatorilor. Acestea combină valori deja cunoscute cu unele noi, însă trei dintre ele sunt considerate cele mai importante. Google recomandă proprietarilor de site-uri să le urmărească și să le optimizeze în mod constant.

1. LCP: Largest Contentful Paint (Cel mai mare element vizibil)

LCP măsoară momentul în care cel mai mare element de conținut devine vizibil pe ecran. Nu este timpul total de încărcare a paginii, ci timpul până când utilizatorul vede partea cea mai relevantă.

De exemplu, dacă aveți o pagină simplă cu text și o imagine mare, acea imagine va fi considerată LCP. Încărcarea rapidă a ei creează impresia că site-ul este mai rapid. În multe cazuri, optimizarea imaginii face o diferență semnificativă.

În trecut, metrici precum First Meaningful Content (FMC) încercau să măsoare „prima bucată relevantă de conținut”, dar de multe ori identificau greșit elementul important. LCP este mai simplu și mai clar: timpul necesar pentru ca cel mai mare element vizibil (imagine, video, bloc de text) să apară pe ecran.

👉 Recomandarea Google:

• un LCP sub 2,5 secunde = bun
• între 2,5 și 4 secunde = necesită îmbunătățiri
• peste 4 secunde = slab

Factorii care influențează LCP:

• răspuns lent al serverului → optimizați serverul, folosiți CDN, caching;
• CSS și JavaScript care blochează randarea → minimizați fișierele, încărcați asincron codul non-critic;
• resurse mari/lente → optimizați imaginile, comprimați fișierele text, preîncărcați resursele importante;
• randare pe partea client → reduceți JS-ul critic sau folosiți randare/pre-randare pe server.

Iată o imagine de la Google care explică cum funcționează:

Această imagine de la Google vă oferă o idee bună despre cum se măsoară LCP-ul.
În stânga, vedeți mai întâi logo-ul și linia „Povești vizuale”. În al doilea ecran, titlul mare apare ca un candidat pentru LCP. În ultimul ecran, însă, vedeți că o imagine mare depășește antetul ca LCP. Dacă aveți un singur conținut mare, acesta ar putea fi LCP-ul tot timpul.

Dacă vă uitați la procesul de încărcare a imaginii, puteți vedea cu ușurință de ce aceasta este o metrică atât de utilă. Puteți identifica cu ușurință ce este LCP-ul și puteți optimiza încărcarea acelui element.

Google oferă mai multe instrumente care vă ajută să găsiți toate aceste elemente. PageSpeed ​​Insights, de exemplu, oferă o multitudine de date despre Web Vitals, plus o mulțime de sfaturi pentru a vă îmbunătăți pagina. Dacă rulăm amoos.ro pe PageSpeed ​​Insights, obținem mai multe scoruri și sfaturi sub acel scor. În cazul nostru, LCP-ul era o imagine mare. În captura de ecran de mai jos, puteți vedea că PageSpeed ​​Insights a identificat corect acel element. Acum știți ce trebuie să îmbunătățiți!

Potrivit Google, LCP este afectat de o serie de factori:

• Timp de răspuns lent al serverului: optimizați serverul, utilizați o rețea CDN, memorați în cache resursele etc.
• JavaScript și CSS care blochează randarea: deci minimalizați CSS-ul, amânați CSS-ul non-critic și introduceți CSS-ul critic în linie.
• Resurse care se încarcă lent: deci optimizați imaginile, preîncărcați resursele, comprimați fișierele text etc.
• Probleme legate de randarea pe partea de client: deci minimalizați JavaScript-ul critic, utilizați randarea și pre-randarea pe partea de server.

Google are mai multă documentație despre contextul LCP și despre cum să îl optimizați.

📊 Instrumente precum PageSpeed Insights arată exact care element este considerat LCP și oferă soluții concrete de optimizare.

2. FID: First Input Delay (Prima întârziere la interacțiune)

FID măsoară cât timp îi ia browserului să răspundă la prima acțiune a utilizatorului – de exemplu, când cineva apasă un buton sau un link.

Dacă pagina pare încărcată, dar nu reacționează imediat la interacțiuni, utilizatorul se frustrează. Această întârziere apare adesea pentru că browserul rulează alte procese în fundal, mai ales pe site-uri complexe cu mult JavaScript.

👉 Un FID mic oferă senzația de responsivitate și fluiditate. Optimizarea se face prin:

• reducerea codului JavaScript;
• folosirea unor tehnici de încărcare asincronă;
• împărțirea sarcinilor mari în bucăți mai mici, astfel încât browserul să răspundă rapid la acțiunile utilizatorului.

Întârzierile apar atunci când browserul încă efectuează alte activități în fundal. Așadar, a încărcat pagina și totul arată perfect. Dar când apeși pe butonul respectiv, nu se întâmplă nimic! Aceasta este o experiență neplăcută și duce la frustrare. Chiar dacă există o mică întârziere, site-ul tău ar putea părea lent și nu răspunde.

Un browser trebuie să depună mult efort și uneori trebuie să parcheze anumite solicitări, doar pentru a reveni ulterior la ele. Nu poate face totul deodată. Pe măsură ce construim site-uri din ce în ce mai complexe – adesea bazate pe JavaScript – cerem mult de la browsere. Pentru a accelera procesul dintre afișarea conținutului pe ecran și transformarea acestuia în interactiv, trebuie să ne concentrăm pe FID (Fid-ul).

FID-ul măsoară toate interacțiunile care au loc în timpul încărcării paginii. Acestea sunt acțiuni de introducere a datelor, cum ar fi atingeri, clicuri și apăsări de taste, dar nu și interacțiuni precum zoom-ul și derularea. Noile valori de măsurare Google necesită un FID mai mic de 100 ms pentru a părea receptiv. Orice valoare între 100 ms și 300 ms necesită îmbunătățiri, iar orice valoare peste această valoare poate fi considerată ca având performanțe slabe.

Ce trebuie să știți

Unul dintre lucrurile pe care trebuie să le rețineți este că nu puteți măsura FID-ul dacă nu există nicio interacțiune cu utilizatorul. Aceasta înseamnă că Google nu poate pur și simplu prezice FID-ul pe baza datelor pe care le are de la laborator – au nevoie de date de la utilizatori reali sau așa-numitele date de teren. Aceasta înseamnă, de asemenea, că aceste date sunt mai puțin controlabile decât datele de laborator, deoarece colectează date de la utilizatori de pe tot felul de dispozitive și de la cine le utilizează în moduri și medii diferite. Acesta este unul dintre motivele pentru care uneori vedeți modificări ale datelor.

Dacă doriți să vă îmbunătățiți scorurile, veți constata adesea că JavaScript este vinovatul notelor proaste. JavaScript ne ajută să construim interacțiuni minunate, dar poate duce și la site-uri web lente cu cod complex. Adesea, browserul nu poate răspunde la input în timp ce execută JavaScript. Dacă vă îmbunătățiți codul JavaScript și gestionarea acestuia, lucrați automat la îmbunătățirea scorurilor de experiență pe pagină.

Aceasta este însă partea cea mai dificilă. Majoritatea site-urilor pot câștiga mult prin reducerea timpului necesar pentru executarea JavaScript-ului, prin împărțirea sarcinilor complexe sau prin eliminarea JavaScript-ului neutilizat.

De exemplu, amoos.ro are un scor destul de bun, dar nu este perfect. Există încă procese care ne împiedică să obținem scoruri perfecte. Unele dintre acestea sunt complicate de remediat sau avem nevoie de acest cod pentru ca site-ul nostru să funcționeze corect. Ar trebui să vă uitați la scorurile dvs. și să stabiliți ce puteți face. Încercați să găsiți îmbunătățirile care sunt mai ușor de făcut sau care duc la cele mai mari creșteri de performanță.

Citiți documentația Google despre FID și cum să optimizați FID.

3. CLS: Cumulative Layout Shift (Schimbarea cumulativă a layout-ului)

CLS măsoară stabilitatea vizuală a paginii în timpul încărcării. Mai simplu spus: cât de mult „sar” sau se mișcă elementele de pe ecran pe măsură ce pagina se încarcă.

Probabil ați pățit să vreți să dați click pe un buton, dar chiar atunci se schimbă poziția lui pentru că se mai încarcă o imagine sau un banner. În loc să apăsați butonul corect, ajungeți să apăsați altceva. Aceasta este o experiență frustrantă pentru utilizatori.

CLS atribuie un scor acestor mișcări:

• sub 0,1 = bun;
• între 0,1 și 0,25 = necesită îmbunătățiri;
• peste 0,25 = slab.

👉 Factorii care cauzează un CLS mare:

• imagini, reclame sau iframe-uri fără dimensiuni definite → rezolvați prin setarea dimensiunilor fixe;
• fonturi personalizate care se încarcă greu și schimbă aspectul textului → folosiți font-display: swap;
• elemente dinamice (bannere, notificări) care se inserează brusc în pagină → rezervați spațiu pentru ele dinainte.

Luați, de exemplu, CNN.com. Site-urile de știri sunt de obicei foarte complexe și se încarcă lent, iar CNN nu face excepție. Obține un scor foarte slab la un test PageSpeed ​​Insights. Dacă vă uitați la probleme și la sfaturile corespunzătoare mai jos pe pagină, veți observa că am găsit nu mai puțin de cinci elemente în mișcare în momentul scrierii. La încărcarea acestei pagini, multe elemente sar în jur și durează ceva timp până se stabilizează și devine utilă. Și pentru că utilizatorii nu sunt întotdeauna atât de răbdători, încearcă să dea clic pe un buton când acesta apare pe ecran – doar pentru a-l rata deoarece apare o reclamă mare în acel loc.

Ce trebuie să știți

Schimbarea cumulativă a aspectului compară cadrele pentru a determina mișcarea elementelor. Ia toate punctele în care se produc schimbări de aspect și calculează severitatea acelor mișcări. Google consideră că orice valoare sub 0,1 este bună, în timp ce orice valoare între 0,1 și 0,25 necesită îmbunătățiri. Poți considera orice valoare peste 0,25 ca fiind slabă.

Desigur, scorul ia în considerare doar modificările neașteptate. Dacă un utilizator dă clic pe butonul de meniu și apare un meniu pliabil, aceasta nu contează ca o modificare a aspectului. Dar dacă acel buton solicită o schimbare majoră de design, ar trebui să te asiguri că ai clarificat acest lucru pentru utilizator

Am menționat deja că reclamele sunt unul dintre principalii vinovați pentru acest lucru. Acestea sunt adesea în JavaScript și nu sunt bine optimizate, plus că sunt difuzate de pe un server extern. La fiecare pas se adaugă lentoare și trebuie să muncești din greu pentru ca reclamele tale să apară în locul potrivit în orice moment. Dar există un alt element responsabil pentru modificările mari de aspect: imaginile.

Dezvoltatorii nu specifică întotdeauna lățimea și înălțimea unei imagini în cod și lasă browserului sarcina de a-și da seama cum ar trebui să apară imaginea pe ecran. Pe o pagină cu câteva imagini și text, textul va apărea mai întâi pe ecran, urmat de imagini. Dacă dezvoltatorul nu a rezervat spațiu pentru aceste imagini, partea superioară a paginii de încărcare va fi umplută cu text, determinându-i să înceapă să citească. Imaginile, însă, se încarcă mai târziu și apar în locul în care a fost textul inițial. Acest lucru împinge textul în jos, stârnind agitația utilizatorului. Așadar, specificați întotdeauna lățimea și înălțimea imaginilor CSS pentru a rezerva un loc pentru încărcarea imaginilor.

Google are o mulțime de documentație de bază despre CLS, plus despre cum să optimizați pentru CLS. De asemenea, Google solicită feedback despre cum să îmbunătățească scorul CLS.

📊 Google recomandă ca paginile să rămână cât mai stabile vizual pentru ca utilizatorii să aibă o experiență fluidă și previzibilă.

✅ Rezumat Core Web Vitals

• LCP (Largest Contentful Paint): viteza cu care se afișează cel mai mare element vizibil.
• FID (First Input Delay): timpul până când utilizatorul primește răspuns la prima interacțiune.
• CLS (Cumulative Layout Shift): stabilitatea vizuală a paginii în timpul încărcării.

Tool-uri utile pentru a măsura aceste valori

• PageSpeed Insights: oferă date reale și de laborator, plus recomandări.
• Lighthouse: instrument pentru monitorizarea performanței și SEO.
• Raportul Core Web Vitals din Search Console: oferă informații direct de la utilizatori reali.
• Chrome DevTools: include rapoarte și suprapuneri pentru Web Vitals.

Începând cu iunie 2021, experiența paginii a devenit factor de clasare în Google. Core Web Vitals — LCP, FID și CLS — măsoară performanța, receptivitatea și stabilitatea vizuală a site-ului. Optimizarea acestor metrici va îmbunătăți atât satisfacția vizitatorilor, cât și poziționarea site-ului în căutări.

Articol inspirat de pe yoast.com si scris de Edwin Tonnen