INP: kako popraviti odziv sajta na klikove i dodire

Kliknete na dugme „Dodaj u korpu“, a ništa se ne dešava. Kliknete ponovo, pa se proizvod doda dva puta. Otvorite mobilni meni, a on se pojavi tek posle pola sekunde. Ovakav osećaj „zakucanog“ sajta meri jedna od tri Core Web Vitals metrike: INP. U ovom tekstu objašnjavamo INP i kako popraviti odziv sajta: šta tačno meri, gde se vide podaci, šta su najčešći uzroci sporih interakcija i koje izmene u praksi daju rezultat.

Šta je INP

INP (Interaction to Next Paint) meri koliko vremena prođe od interakcije korisnika, odnosno klika, dodira ili pritiska tastera, do trenutka kada browser na ekranu prikaže sledeću promenu. Od marta 2024. INP je zamenio raniju metriku FID kao zvaničan deo Core Web Vitals. Razlika je bitna: FID je merio samo kašnjenje prve interakcije, a INP posmatra sve interakcije tokom posete i prijavljuje jednu od najsporijih.

Ocena se računa za 75. percentil poseta, odvojeno za mobilne i desktop uređaje. Drugim rečima, da bi stranica bila „dobra“, bar tri četvrtine poseta mora imati INP do 200 ms. Šira slika o sve tri metrike je u tekstu Core Web Vitals objašnjeno jednostavno.

Tri dela jedne interakcije

1. Kašnjenje unosa: vreme dok browser ne počne da obrađuje klik, jer je glavna nit zauzeta nečim drugim.
2. Vreme obrade: koliko traje JavaScript koji reaguje na klik.
3. Kašnjenje prikaza: vreme potrebno da browser preračuna raspored i iscrta promenu.

Kada znate koji deo je dug, znate i gde tražiti problem.

Gde videti INP vašeg sajta

INP je terenska metrika: meri se na stvarnim posetama, jer zavisi od toga šta i kada korisnici kliknu. Zato ga ne možete potpuno izmeriti jednim testom.

• PageSpeed Insights u gornjem delu prikazuje podatke iz Chrome izveštaja o korisničkom iskustvu (CrUX), ako sajt ima dovoljno poseta. Kako se čita taj izveštaj objasnili smo u tekstu o PageSpeed Insights rezultatima.
• Search Console, izveštaj Core Web Vitals, grupiše stranice sa sličnim problemima.
• Biblioteka web-vitals omogućava da INP merite na sopstvenim posetama i šaljete u analitiku, uključujući i element na koji je kliknuto.
• Chrome DevTools, panel Performance, prikazuje INP za interakcije koje sami izvedete i pokazuje šta je glavna nit radila u tom trenutku.

Lighthouse ne meri INP, jer ne klikće po stranici. Najbliži pokazatelj u laboratorijskom testu je Total Blocking Time (TBT): visok TBT obično znači i rizik od lošeg INP-a.

Najčešći uzroci sporog odziva

Browser ima jednu glavnu nit na kojoj izvršava JavaScript, računa raspored i crta stranicu. Dok traje jedan zadatak, sve ostalo čeka. Zadatak duži od 50 ms smatra se dugim zadatkom. Tipični krivci:

• Skripte trećih strana: chat widgeti, pikseli za oglase, alati za snimanje sesija, više analitičkih alata istovremeno.
• Teški page builderi i slajderi koji pri učitavanju i na svaki klik izvršavaju mnogo koda.
• Veliki DOM: hiljade elemenata, na primer mega meni sa svim kategorijama ili kategorija sa stotinama proizvoda bez paginacije.
• Rukovaoci događajima koji rade previše: filter u web shopu koji na svaki klik ponovo iscrtava celu listu ili pretraga koja reaguje na svaki pritisnut taster bez odlaganja.
• Naizmenično čitanje i menjanje rasporeda u petlji, što primorava browser da više puta preračunava izgled stranice.

Kako popraviti INP

Smanjite i odložite JavaScript

Prvi korak je inventar: koje skripte se učitavaju i da li su sve potrebne. Uklonite dodatke i alate koje niko ne koristi, a ostale učitavajte sa atributom defer ili tek kada su potrebni. Chat widget, na primer, može da se učita tek kada korisnik klikne na ikonicu. Ako skripte dodajete preko Google Tag Manager-a, proverite okidače, jer je lako da se isti piksel pokrene više puta; osnove su u tekstu o Google Tag Manager-u.

Razbijte duge zadatke

Ako posle klika mora da se uradi mnogo posla, prvo prikažite vizuelnu potvrdu, a ostatak prepustite browseru da obavi kasnije. Između delova posla vratite kontrolu glavnoj niti:

function ustupiNit() {
  if (globalThis.scheduler && scheduler.yield) {
    return scheduler.yield();
  }
  return new Promise(resolve => setTimeout(resolve, 0));
}

dugme.addEventListener('click', async () => {
  dugme.classList.add('ucitava');   // odmah prikaži reakciju
  await ustupiNit();                 // pusti browser da iscrta
  azurirajKorpu();                   // teži deo posla
  await ustupiNit();
  posaljiAnalitiku();                // ono što korisnik ne vidi ide poslednje
});

Funkcija scheduler.yield() još nije podržana u svim browserima, zato primer ima rezervu sa setTimeout.

Olakšajte prikaz

• Smanjite broj elemenata na stranici i dubinu ugnežđavanja.
• Za duge sekcije ispod prvog ekrana razmotrite CSS svojstvo content-visibility: auto.
• Kod pretrage i filtera koristite odlaganje (debounce), da se rezultat računa kada korisnik zastane, a ne na svaki taster.
• Animacije radite preko transform i opacity, a ne promenom širine, visine ili pozicije.

Specifično za WordPress

Na WordPress sajtovima najveću razliku obično prave manje dodataka, lakša tema i ograničavanje skripti samo na stranice gde su potrebne, na primer da se skripta kontakt forme ne učitava na svakoj stranici. Kod keširanja i optimizacije pazite na opcije koje odlažu sav JavaScript do prve interakcije: mogu da poprave laboratorijski rezultat, a da prvi klik učine sporijim. Više saveta je u vodiču za ubrzanje WordPress sajta.

Zaključak

INP meri ono što korisnik oseća prstom: da li sajt reaguje kada ga dodirne. Loš INP gotovo uvek znači previše JavaScript-a na glavnoj niti, najčešće iz dodataka i skripti trećih strana. Rešenje nije jedan trik, već čišćenje skripti, razbijanje dugih zadataka i trenutna vizuelna reakcija na svaki klik. Bolji odziv neće sam po sebi doneti visoke pozicije, ali čini sajt prijatnijim za korišćenje i smanjuje odustajanja. Ako PageSpeed Insights ili Search Console prijavljuju loš INP na vašem sajtu, pošaljite nam upit i analiziraćemo šta usporava interakcije.