Performanță web
Core Web Vitals, lab vs field, cauzele frecvente și reparațiile lor.
Actualizat
Ce înseamnă performanță web
Performanța = cât de repede vede userul conținutul, cât de repede reacționează pagina la acțiunile lui și cât de stabil stă layout-ul. Contează direct: fiecare secundă în plus la încărcare pierde useri și scade poziția în Google.
Nu se optimizează „după senzație”. Se măsoară, se găsește cauza, apoi se repară — în ordinea asta.
Ce măsori: Core Web Vitals
| Metrică | Întrebarea | Bun | Slab |
|---|---|---|---|
| LCP — Largest Contentful Paint | cât durează până apare elementul principal (imaginea hero, titlul)? | ≤ 2.5 s | > 4 s |
| INP — Interaction to Next Paint | cât de repede reacționează pagina la click / tastă? | ≤ 200 ms | > 500 ms |
| CLS — Cumulative Layout Shift | cât „sare” conținutul în timp ce se încarcă? | ≤ 0.1 | > 0.25 |
Între ele e zona „needs improvement”. Explicația pașilor de randare e în Cum desenează browserul.
Unde măsori
| Tip | Unelte | Ce arată |
|---|---|---|
| lab (simulat) | Lighthouse, DevTools → Performance | rezultate reproductibile, pe mașina ta — bune pentru debugging |
| field (useri reali) | Vercel Speed Insights, CrUX, PageSpeed Insights | ce simt utilizatorii reali, pe telefoanele lor — asta contează |
Cauze frecvente și reparații
LCP mare
| Cauză | Reparație |
|---|---|
| imagine hero mare, încărcată târziu | next/image cu priority (sau fetchpriority="high"), format AVIF/WebP, mărime corectă |
| server lent | cache ('use cache', CDN), pagină statică / PPR |
| fonturi care blochează textul | next/font (self-hosted, font-display: swap) |
| JS mult înainte de conținut | Server Components, conținutul randat pe server |
INP mare
| Cauză | Reparație |
|---|---|
| JS greu care blochează thread-ul la click | împarte munca, mută calculul pe server sau într-un Web Worker |
| re-randări mari în React | vezi Performanță în React, useTransition |
| bundle uriaș | code splitting, next/dynamic, mai puține librării |
CLS mare
| Cauză | Reparație |
|---|---|
| imagini fără dimensiuni | width + height (sau aspect-ratio) — browserul rezervă locul |
| fonturi care schimbă mărimea textului | next/font (ajustează automat fallback-ul) |
| bannere / reclame inserate deasupra conținutului | spațiu rezervat dinainte |
| skeleton de altă mărime decât conținutul | skeleton cu aceleași dimensiuni |
Regulile cu cel mai mare impact
- Trimite mai puțin JavaScript — Server Components implicit,
'use client'cât mai jos. - Imagini: dimensiuni, format modern,
lazysub fold,prioritypentru cea principală. - Cache tot ce se poate: CDN,
'use cache', assets cu hash. - Măsoară pe telefon, nu pe laptopul tău de dezvoltator.
Pe scurt
- LCP (încărcare), INP (reacție), CLS (stabilitate) — cu praguri clare.
- Lab pentru debugging, field pentru realitate.
- Mai puțin JS, imagini corecte, cache, dimensiuni rezervate.