Depanează INP cu Long Animation Frames API (LoAF)

Practica de a depana INP (Interaction to Next Paint) folosind API-ul Long Animation Frames (LoAF) se concentrează pe identificarea cadrelor de animație lungi care blochează firul principal al browserului. Spre deosebire de alte metrici Core Web Vitals, LoAF oferă detalii granulare despre durata exactă a fiecărui cadru, permițându-ți să vezi nu doar că o interacțiune a fost lentă, ci și de ce. Ignorarea acestei practici poate duce la o experiență utilizator „lipicioasă” și neresponsivă, chiar dacă timpii de încărcare inițială sunt buni, deoarece utilizatorul simte întârzieri la click sau tastare.

Cum o aplici

1. Implementează monitorizarea: Adaugă un PerformanceObserver care ascultă tipul 'long-animation-frame'. Acesta va trimite rapoarte oricând un cadru depășește pragul de 50ms.
2. Capturează datele: În callback-ul observatorului, extrage informațiile despre durata cadrului, timestamp-ul și, crucial, lista de funcții executate în acel cadru.
3. Analizează stiva de apeluri: Folosește datele colectate pentru a identifica funcțiile JavaScript care consumă cel mai mult timp. Concentrează-te pe cele care rulează în timpul evenimentelor de interacțiune (click, input).
4. Optimizează codul: Refactorizează funcțiile lente. Împarte sarcini grele în bucăți mai mici folosind requestIdleCallback, setTimeout sau Web Workers pentru a elibera firul principal.

Exemplu

Iată cum poți configura observatorul pentru a captura cadrele lungi:

// Varianta corectă: Observare LoAF
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // entry.duration este durata totală a cadrului în ms
    // entry.renderStart și entry.processInputStart oferă detalii fine
    console.log('Cadru lung detectat:', entry.duration, 'ms');
    console.log('Funcții executate:', entry.scripts); 
  }
});

observer.observe({ type: 'long-animation-frame', buffered: true });

Evită să te bazezi doar pe performance.now() manual în evenimente, deoarece nu îți oferă contextul complet al ciclului de randare al browserului.

Cum verifici

• Chrome DevTools: Mergi la tab-ul Performance, înregistrează o sesiune în timp ce interacționezi cu pagina și caută markerii roșii etichetați „Long Animation Frame”.
• Lighthouse: Rulează o auditare; deși Lighthouse nu afișează direct LoAF, rezultatele INP slabe indică necesitatea acestei investigații.
• Console Browser: Verifică dacă rapoartele generate de PerformanceObserver apar în consola de dezvoltare în timp ce testezi interactivitatea.

Greșeli frecvente

1. Ignorarea impactului UX: Crezi că un INP sub 200ms este întotdeauna acceptabil, dar un singur cadru foarte lung poate crea senzația de „înghețare” a interfeței, chiar dacă media este bună.
2. Optimizarea prematură: Încerci să optimizezi toate funcțiile fără a te baza pe datele reale din LoAF, pierzând timp pe cod care nu este colateralul problemelor de performanță.
3. Confuzia cu FPS: Nu confunda cadrele lungi cu rata generală de cadre pe secundă (FPS). Un site poate avea un FPS decent, dar să aibă cadere bruscă a performanței la interacțiuni specifice, lucru pe care LoAF îl evidențiază distinct.