Urmărește FCP și TBT ca metrici de diagnostic

Această practică înseamnă să folosești First Contentful Paint (FCP) și Total Blocking Time (TBT) ca termometre ale experienței utilizatorului, nu doar ca numere abstracte. FCP măsoară cât durează până când utilizatorul vede primul conținut vizual, iar TBT cuantifică timpul în care browserul este ocupat executând scripturi grele, blocând răspunsurile la interacțiuni. Ignorarea lor duce la site-uri care par lente și neresponsive, crescând rata de abandon și scăzând conversiile, deoarece utilizatorii modern așteaptă o reacție instantanee.

Cum o aplici

1. Optimizează încărcarea resurselor critice: Asigură-te că CSS-ul și fonturile necesare pentru prima vizualizare sunt prioritizate corect, folosind preload sau preconnect.
2. Minimizează JavaScript-ul blocant: Evită executarea scripturilor grele în thread-ul principal înainte ca pagina să fie interactivă. Împarte codul mare în bucăți mai mici sau amână execuția acestora.
3. Deferă non-criticele: Folosește atribute precum defer sau async pentru scripturi care nu sunt esențiale pentru randarea inițială.
4. Monitorizează continuu: Integrează aceste metrici în pipeline-ul tău CI/CD pentru a detecta regresii de performanță devreme.

Exemplu

Varianta greșită încarcă un script mare care blochează parsarea HTML-ului:

<!-- Greșit: Scriptul blochează randarea -->
<script src="analytics.js"></script>
<h1>Bine ai venit!</h1>

Varianta corectă amână execuția sau folosește defer, permițând browserului să finalizeze DOM-ul înainte de a rula scriptul:

<!-- Corect: Scriptul se descarcă paralel și rulează după parsarea HTML -->
<script defer src="analytics.js"></script>
<h1>Bine ai venit!</h1>

Sau, pentru interactivitate complexă, poți folosi requestIdleCallback pentru sarcini non-critice:

// Corect: Sarcina rulează când browserul este liber
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    loadHeavyLibrary();
  });
} else {
  setTimeout(loadHeavyLibrary, 1);
}

Cum verifici

Utilizează Lighthouse în Chrome DevTools pentru o auditare completă sau PageSpeed Insights pentru date agregate. Pentru monitorizare în producție, integrează Web Vitals library în aplicația ta și trimite datele către un dashboard (ex: Google Analytics). Verifică direct în tab-ul "Performance" al DevTools, analizând flame chart-ul pentru a identifica blocările lungi pe thread-ul principal.

Greșeli frecvente

• Optimizarea doar pentru LCP: Te poți concentra excesiv pe prima imagine mare, ignorând faptul că utilizatorul nu poate interacționa cu butoanele din cauza unui TBT ridicat.
• Ignorarea impactului librăriilor terțe: Scripturi de la parteneri (ads, chat widgets) pot bloca thread-ul principal dacă nu sunt izolate corect (ex: prin iframes sandboxed).
• Confundarea vitezei de rețea cu performanța: Un FCP bun pe Wi-Fi rapid poate fi dezastros pe 4G slab; testează întotdeauna pe conexiuni simulate mai lente (ex: Fast 3G).