Core Web Vitals: cum obții scor 90+ la Lighthouse

Cei trei indicatori Core Web Vitals măsoară cât de repede apare conținutul (LCP), cât de stabil e layout-ul (CLS) și cât de repede răspunde pagina la interacțiune (INP). Iată cum urci fiecare.

LCP — Largest Contentful Paint

• Servește imaginile în format modern (WebP/AVIF) și la dimensiunea afișată, nu mai mari.
• Pune fetchpriority="high" pe imaginea principală și loading="lazy" pe restul.
• Preconnect la domeniile de fonturi; folosește font-display: swap.
• Randează HTML pe server. Un ecran gol până se încarcă JavaScript-ul distruge LCP.

CLS — Cumulative Layout Shift

• Rezervă spațiu pentru imagini cu atribute width și height (sau aspect-ratio).
• Nu insera bannere sau reclame care împing conținutul după ce pagina s-a încărcat — rezervă slotul dinainte.
• Încarcă fonturile în așa fel încât să nu producă un salt mare la schimbarea din fallback.

INP — Interaction to Next Paint

• Mai puțin JavaScript. Fiecare KB de JS se parsează și se execută.
• Împarte task-urile lungi; evită handlerele grele pe scroll sau input.
• Amână scripturile neesențiale (analytics, widget-uri) până după interacțiune.

Măsoară pe date reale

Lighthouse e un test de laborator. Uită-te și la datele din teren (CrUX, Search Console) — ele contează pentru ranking.