Blog

INP: nový ukazatel rychlosti a odezvy webových stránek

Rychlost webových stránek není jen otázkou toho, jak dlouho čekáme na jejich první načtení. Stejně důležité je, jak rychle web reaguje ve chvíli, kdy s ním uživatel začne pracovat.

Klikne na tlačítko, otevře menu, vybere položku formuláře nebo provede jinou akci. Pokud stránka několik okamžiků nereaguje, uživatel získává pocit, že je pomalá nebo dokonce nefunkční.

Právě tuto oblast nyní Google sleduje pomocí metriky Interaction to Next Paint, zkráceně INP.

Od března 2024 se INP stává součástí trojice hlavních ukazatelů Core Web Vitals a nahrazuje dosavadní metriku FID.

Co je Interaction to Next Paint?

INP měří odezvu webové stránky na interakce uživatele.

Zjednodušeně řečeno sleduje dobu mezi akcí uživatele a okamžikem, kdy prohlížeč zobrazí odpovídající vizuální změnu.

Může jít například o:

  • kliknutí na tlačítko,
  • otevření navigačního menu,
  • výběr možnosti,
  • rozbalení části stránky,
  • použití ovládacího prvku,
  • práci s formulářem.

Pokud uživatel například klikne na tlačítko pro otevření menu a menu se objeví prakticky okamžitě, web působí svižně.

Pokud se ale po kliknutí dlouhou dobu nic neděje, uživatel může začít pochybovat, zda jeho akce vůbec proběhla.

Proč už nestačil FID?

Předchozí metrika First Input Delay (FID) sledovala pouze první interakci uživatele se stránkou.

To bylo užitečné, ale neposkytovalo úplný obrázek o tom, jak stránka reaguje během celé návštěvy.

Web mohl první kliknutí zpracovat rychle, ale při pozdější práci mohl začít reagovat pomalu.

INP se proto dívá na interakce v průběhu návštěvy stránky mnohem komplexněji.

Cílem je lépe zachytit skutečný pocit uživatele z rychlosti a plynulosti webu.

Jaké hodnoty INP jsou dobré?

Google rozděluje výsledky do tří základních skupin.

Za dobrou odezvu je považována hodnota do 200 milisekund.

Hodnoty mezi 200 a 500 milisekundami znamenají, že by bylo vhodné rychlost odezvy zlepšit.

Pokud je INP vyšší než 500 milisekund, jedná se už o špatný výsledek.

Půl sekundy přitom nemusí na první pohled působit jako dlouhá doba. Při běžném ovládání aplikace nebo webové stránky je ale takové zpoždění velmi dobře znatelné.

Co může pomalou odezvu způsobovat?

Častou příčinou bývá příliš mnoho práce, kterou musí prohlížeč vykonat pomocí JavaScriptu.

Pokud je hlavní proces prohlížeče zaměstnaný dlouhou úlohou, nemůže současně okamžitě reagovat na kliknutí uživatele.

Problémy mohou způsobovat například:

  • složité JavaScriptové skripty,
  • velké množství pluginů,
  • náročné animace,
  • zbytečně komplikované obslužné funkce,
  • externí marketingové a analytické skripty,
  • špatně optimalizované komponenty stránky.

Někdy přitom nemusí být příčinou jedna velká chyba. Výsledný problém může vzniknout kombinací mnoha menších skriptů a funkcí.

WordPress a INP

U webů postavených na WordPressu může být optimalizace odezvy obzvláště zajímavá.

Samotný WordPress nemusí být problémem. Velký vliv ale může mít použitá šablona a především množství pluginů.

Některé pluginy přidávají vlastní JavaScript na každou stránku, přestože je jejich funkce potřeba pouze na jednom konkrétním místě.

Postupně tak může vzniknout web, který načítá a zpracovává velké množství kódu, aniž by byl všechen skutečně potřebný.

Proto je dobré u každého pluginu přemýšlet nejen nad tím, jakou funkci přidává, ale také nad tím, jaký má vliv na výkon webu.

Jak zjistit hodnotu INP?

Jedním z nejjednodušších způsobů je použití nástroje PageSpeed Insights.

Ten dokáže zobrazit nejen laboratorní výsledky testu, ale u dostatečně navštěvovaných webů také údaje získané od skutečných uživatelů prohlížeče Chrome.

Právě data z reálného provozu jsou u INP velmi důležitá.

Web se totiž může při krátkém automatickém testu chovat dobře, ale skuteční návštěvníci mohou během delší práce narazit na pomalou interakci, kterou test vůbec nezachytí.

Jak INP zlepšit?

Neexistuje jeden univerzální postup, který by fungoval na každém webu.

Dobré je začít identifikací interakce, která způsobuje největší zpoždění.

Následně lze řešit například:

  • rozdělení dlouhých JavaScriptových úloh,
  • odstranění nepotřebných skriptů,
  • omezení náročných funkcí,
  • zjednodušení obsluhy událostí,
  • optimalizaci vykreslování stránky,
  • omezení množství kódu třetích stran.

Důležité je také neposuzovat výkon webu pouze podle toho, jak rychle se načte úvodní obrazovka.

Uživatel s webem následně pracuje a právě rychlost těchto interakcí je pro dobrý uživatelský dojem zásadní.

Rychlý web musí také rychle reagovat

Core Web Vitals se postupně snaží stále lépe popsat skutečný uživatelský zážitek.

INP je v tomto směru logickým krokem.

Nestačí totiž, aby stránka rychle zobrazila obsah. Musí také rychle reagovat ve chvíli, kdy ji návštěvník začne používat.

Od března 2024 proto při optimalizaci výkonu webových stránek stojí za to sledovat vedle rychlosti načítání také jejich skutečnou interaktivitu.