Core Web Vitals: ce sunt și cum le optimizezi

Core Web Vitals sunt trei metrici introduse de Google pentru a cuantifica experiența reală a utilizatorilor pe un site web. Lansate oficial în 2020 și devenite factor de ranking în mai 2021, aceste metrici au schimbat fundamental modul în care proprietarii de site-uri abordează performanța tehnică. Nu mai este suficient să ai un scor bun în teste simulate, contează experiența reală a utilizatorilor din browserele lor.

Google colectează date reale de la utilizatorii Chrome prin Chrome User Experience Report (CrUX) și le agregează în rapoarte disponibile în Search Console și PageSpeed Insights. Paginile cu performanță slabă sunt penalizate în rezultatele de căutare, în timp ce paginile cu experiență excelentă beneficiază de un avantaj de ranking față de competitori cu conținut similar.

Core Web Vitals: ce sunt și cum le optimizezi

Cele trei metrici Core Web Vitals măsoară aspecte diferite ale experienței utilizatorului: viteza de încărcare vizuală, responsivitatea la interacțiuni și stabilitatea vizuală a paginii. Fiecare metric are praguri clare definite de Google: verde (bun), portocaliu (necesită îmbunătățiri) și roșu (slab).

LCP – Largest Contentful Paint: viteza de încărcare vizuală

LCP măsoară cât timp trece de la momentul inițierii navigării până când cel mai mare element de conținut vizibil în viewport se încarcă complet. Elementul LCP poate fi o imagine, un video, un bloc de text mare sau un element de fundal CSS.

Pragurile Google pentru LCP: sub 2,5 secunde este considerat bun (verde), între 2,5 și 4 secunde necesită îmbunătățiri (portocaliu), iar peste 4 secunde este slab (roșu). Scopul pentru orice site serios este un LCP sub 2,5 secunde pe mobil pentru cel puțin 75% din vizite.

Cauzele frecvente ale LCP slab

Cea mai frecventă cauză a unui LCP slab este imaginea hero neoptimizată. O fotografie de 2-3 MB uploadată fără compresie, fără conversie în WebP și fără preload va domina LCP-ul. Alte cauze: hosting lent cu TTFB (Time to First Byte) ridicat, JavaScript care blochează randarea paginii, fonturi externe care întârzie afișarea textului și lipsa unui CDN pentru resurse statice.

Cum optimizezi LCP

Primul pas este identificarea elementului LCP al paginii. Deschide Chrome DevTools, mergi la tabul Performance, înregistrează o încărcare a paginii și caută secțiunea LCP în timeline. Sau folosește PageSpeed Insights care identifică automat elementul LCP.

Dacă elementul LCP este o imagine, convertește-o în WebP, comprim-o agresiv (calitate 75-85), adaugă atributul fetchpriority=”high” pentru a spune browser-ului că această imagine este prioritară și implementează preload în header cu link rel=”preload”. Nu aplica lazy loading pe imaginea LCP.

Dacă TTFB-ul serverului depășește 600ms, optimizează hosting-ul sau adaugă caching la nivel de server. Un TTFB bun este sub 200ms. Plugin-uri de caching precum LiteSpeed Cache, WP Rocket sau W3 Total Cache pot reduce dramatic TTFB pentru site-urile WordPress.

Pentru fonturi externe (Google Fonts), folosește font-display: swap în CSS pentru a afișa textul imediat cu un font de sistem, înlocuindu-l cu fontul personalizat când se încarcă. Sau găzduiește fonturile local pe server pentru a elimina dependența de DNS extern.

INP – Interaction to Next Paint: responsivitatea la interacțiuni

INP a înlocuit FID (First Input Delay) în martie 2024. INP măsoară latența completă a interacțiunilor utilizatorului cu pagina, inclusiv tastare, click-uri și apăsări de taste. Spre deosebire de FID care măsura doar prima interacțiune, INP ia în calcul toate interacțiunile din sesiune și raportează cel mai slab percentil.

Pragurile Google pentru INP: sub 200 ms este bun, între 200 ms și 500 ms necesită îmbunătățiri, iar peste 500 ms este slab. INP slab înseamnă că pagina „se simte” înghețată sau lentă când utilizatorul încearcă să interacționeze cu ea.

Cauzele unui INP slab

INP slab este cauzat de obicei de JavaScript care rulează pe main thread-ul browser-ului, blocând procesarea interacțiunilor utilizatorului. Script-uri grele de analytics, chatbot-uri, widget-uri de third-party sau cod JavaScript prost optimizat sunt principalii vinovați.

Cum optimizezi INP

Identifică scripturile JavaScript care consumă cel mai mult timp de execuție pe main thread. În Chrome DevTools, tabul Performance, caută Long Tasks (sarcini care durează peste 50ms). Auditează și elimină script-urile third-party nenecesare, deoarece acestea sunt adesea cauza principală.

Folosește técnica de code splitting pentru a împărți JavaScript-ul în bucăți mici care se încarcă la cerere, nu toate odată. React, Vue și alte framework-uri moderne suportă lazy loading de componente. Mută calculele grele în Web Workers pentru a le executa în afara main thread-ului.

CLS – Cumulative Layout Shift: stabilitatea vizuală

CLS măsoară cât de mult se deplasează elementele paginii în timp ce aceasta se încarcă, din perspectiva utilizatorului. Un scor CLS ridicat înseamnă că elemente vizibile se mișcă neașteptat, cauzând click-uri greșite și o experiență frustrantă.

Pragurile Google pentru CLS: sub 0,1 este bun, între 0,1 și 0,25 necesită îmbunătățiri, iar peste 0,25 este slab. CLS se măsoară în unități abstracte care reprezintă fracțiunea din viewport deplasată înmulțită cu distanța de deplasare.

Cauzele frecvente ale CLS ridicat

Imaginile fără dimensiuni definite (width și height) provoacă CLS deoarece browser-ul nu știe câtă spațiu să aloce înaintea încărcării lor. Reclamele care se încarcă asincron și împing conținut existent mai jos sunt o altă cauză majoră. Fonturile web care provoacă FOUT (Flash of Unstyled Text) cu metrici diferite față de fontul de sistem pot deplasa textul la încărcare. Conținut injectat dinamic deasupra celui existent provoacă deplasări severe.

Cum optimizezi CLS

Adaugă întotdeauna atributele width și height la toate elementele img și video. Browser-ul modern calculează automat raportul de aspect și rezervă spațiu corespunzător. Acest lucru singur rezolvă marea majoritate a problemelor CLS legate de imagini.

Pentru reclame, rezervă spațiu cu dimensiuni fixe înainte de încărcarea lor. Nu insera conținut deasupra celui existent dacă nu este o reacție la acțiunea utilizatorului. Folosește font-display: optional pentru fonturi web dacă FOUT cauzează CLS semnificativ.

Instrumente pentru măsurarea Core Web Vitals

Google Search Console oferă raportul Core Web Vitals cu date reale agregate pe toate paginile site-ului, clasificate pe mobil și desktop. Acesta este cel mai important raport pentru înțelegerea stării generale.

PageSpeed Insights combină date reale (CrUX) cu date simulate (Lighthouse). Datele reale sunt cele care contează pentru ranking, dar datele simulate sunt mai utile pentru debugging.

Chrome DevTools cu tabul Performance oferă analiza detaliată necesară pentru a identifica cauza exactă a problemelor. WebPageTest.org permite testarea din locații multiple și oferă filmstrip vizual al încărcării.

Prioritizarea optimizărilor

Nu toate paginile site-ului au același impact SEO. Prioritizează optimizarea Core Web Vitals pentru paginile cu cel mai mare trafic organic și pentru paginile de destinație principale. Un test rapid în PageSpeed Insights pe primele 10 pagini cel mai accesate îți va arăta rapid unde este cel mai mare potențial de îmbunătățire.

Core Web Vitals sunt un factor de ranking, dar nu singurul și nu cel mai important. Un site cu conținut excelent și Core Web Vitals mediocre va performa mai bine decât un site cu conținut slab dar Core Web Vitals perfecte. Tratează optimizarea acestora ca pe o fundație tehnicăcare amplifică beneficiile unui conținut bun, nu ca pe un substitut al acestuia.