Menține INP sub 200 ms prin task-uri scurte pe main thread

INP (Interaction to Next Paint) măsoară timpul dintre momentul în care utilizatorul interacționează cu pagina (click, tastare) și momentul în care browserul redesenează următorul cadru. Spre deosebire de vechiul FID, INP ia în calcul toate interacțiunile din sesiune, oferind o imagine mult mai realistă a experienței. Dacă ignori această practică, site-ul tău va părea „înghețat” sau lent, ceea ce duce direct la creșterea ratei de abandon și la scăderi semnificative în clasarea SEO, deoarece Google prioritizează experiența utilizatorului.

Cum o aplici

1. Identifică blocajele: Folosește instrumentele de dezvoltare pentru a găsi task-uri lungi pe firul principal (main thread).
2. Sparge task-urile mari: Împarte operațiile costisitoare în bucăți mai mici, permițând browserului să răspundă la input-uri între ele.
3. Deferă execuția: Mută codul care nu este critic pentru randarea inițială în afara firului principal sau execută-l când sistemul este liber.
4. Optimizează evenimentele: Evită listener-ele excesive pe evenimente precum scroll sau resize; folosește requestAnimationFrame sau debounce/throttle.

Exemplu

Iată diferența dintre o abordare care blochează thread-ul și una optimizată pentru interactivitate rapidă.

Varianta greșită (blochează UI-ul):

// Operație costisitoare executată sincron, blocând răspunsul la click
function procesareDateMare() {
  const date = new Array(1000000).fill('date');
  // ... procesare complexă ...
}

button.addEventListener('click', () => {
  procesareDateMare(); // Utilizatorul simte lag aici
});

Varianta corectă (folosește Web Workers sau defer):

// Opțiunea A: Web Worker pentru sarcini grele
const worker = new Worker('worker.js');
button.addEventListener('click', () => {
  worker.postMessage(data); // Răspuns instantaneu, procesare în fundal
});

// Opțiunea B: Yielding folosind setTimeout sau requestIdleCallback
button.addEventListener('click', () => {
  setTimeout(() => procesareDateMare(), 0); // Permite browserului să redeseneze înainte
});

Cum verifici

Verifică metrica INP direct în Chrome DevTools (tab-ul Performance sau Lighthouse). Caută task-uri colorate în roșu sau portocaliu pe timeline-ul main thread-ului. De asemenea, poți folosi Web Vitals Chrome Extension pentru a vedea valorile în timp real în producție. Un INP bun este sub 200ms, iar cel necesar este sub 500ms. Monitorizează și raportul de experiență web din Google Search Console.

Greșeli frecvente

• Executarea logicii complexe în handler-ele de evenimente: Orice calcul intens făcut direct la click va întârzia răspunsul vizual.
• Ignorarea re-rander-urilor React/Vue: Componentele care se redau des fără a fi necesar pot consuma ciclu CPU inutil, crescând INP.
• Abuzul de setTimeout: Deferarea excesivă poate face ca aplicația să pară nesincronizată; folosește aceste tehnici doar când este strict necesar pentru responsivitate.