INP je nová metrika Google, kterou zavedl v březnu 2024. Souvisí s měřením rychlosti webové stránky, protože z pomalého webu každý hned odejde, když se mu mnohdy ani nenačte.
Co je INP
Interaction to Next Paint měří dobu, kterou trvá, než webová stránka reaguje na uživatelskou interakci, například kliknutí, a vykreslí další vizuální změnu, která je výsledkem této interakce.
INP je jednou z metrik, které pomáhají vývojářům a správcům webových stránek lépe pochopit a zlepšit reálný zážitek uživatelů, což je klíčové pro udržení návštěvnosti a spokojenosti uživatelů. Dobrá hodnota INP naznačuje, že stránka reaguje rychle a efektivně na uživatelské akce.
Původní metrika se jmenovala First Input Delay, FID. Našel jsem jeden můj screenshot ze srpna 2021, právě tohoto webu.
Jak Interaction to Next Paint zlepšit
Na webu Čisté PC jsem se doposud moc rychlosti načítání nevěnoval, stále vás sem chodí více z počítače a tam je ta hodnota v pořádku. Toto je dokonce ještě před nasazením cache pluginu, pc verze a celkem rychlá šablona to zvládají dobře.
Když se ale podívám na dobu, jak dlouho trvá načítání z mobilu, tam už to je horší. Všechny hodnoty jsou ale celkem v pořádku, jen to INP je třeba zlepšit.
Pamatujte na to, že ne všechny hodnoty se vám změní hned, protože se „průměruje“ posledních 28 dní jak je vidět na obrázku výše.
Doporučuji zkontrolovat i další hodnoty u vyhodnocení metrik.
- First Contentful Paint 3,2 s
- Total Blocking Time 1670 ms
- Speed Index 3,7 s
- Largest Contentful Paint 5 s
- Cumulative Layout Shift 0.078
Když sjedete ještě níže na stránce s vyhodnocením, pak zde je Diagnostika s informacemi, co je ok a co je třeba zlepšit. Ty nejdůležitější jsou nahoře s červeným trojůhelníkem.
- Eliminujte zdroje, které blokují vykreslení – Lze uspořit 2100 ms.
- Minimalizujte práci v hlavním podprocesu
- Prvek Largest Contentful Paint
- Zkraťte dobu provádění JavaScriptu
- Snižte vliv kódu třetích stran
- Používejte správnou velikost obrázků
- Zobrazujte obrázky ve formátech nové generace
- Odstraňte nepoužívané styly CSS
- Minifikujte kód CSS
- Odstraňte nepoužívaný JavaScript
- Nepoužívejte příliš velký model DOM
Každý jednotlivý řádek si rozklikněte, uvidíte, co problém způsobuje a jak jej vyřešit.
Nasadil jsem tedy cachovací plugin WP Rocket a po pár týdnech už se ty hodnoty začínají zlepšovat.
Co jsem vysledoval jako největší problémy, které zpomalují načítání a pak to má za následek vysoká čísla interakce k dalšímu vykreslení.
JavaScript
To je často kód, ať už Google Analytics nebo Adsense. Pokud to lze v pluginu nastavit, vyberte si tam, ať se načítá až na konci stránky.
Mnoho reklam na webu je velký špatný. Mám jeden projekt, kde nejsou žádné reklamy, nemá extra rychlé hodnoty načítání a když jej projekdu testem rychlosti, vše má zelené. Prostě ty stránky mají uživatelé rádi a tím pádem Google taky.
Lazyload – líné načítání obrázků.
To by mělo být ve WordPress už od verze 5 standardně zapnuto, každopádně doporučuji zkontrolovat, když to zapnete v pluginu zda máte hodnoty lepší. Funguje to tak, že se vám obrázek ukáže až ve chvíli, kdy na něj najedete v prohlížeči nebo na mobilu, takže se všechny po otevření stránky nenačítají najednou.
Zmenšení CSS kódu
To lze také zapnout a taky vám to zrychlí o kousek to, jak se stránky rychle budou nahrávat.
Zobrazování obrázku ve formátech nové generace
Sice JPG je stále dost používané, ale dnes už můžete mít obrázek s příponou WebP, kvalita zůstane stejná, ale velikost může být až poloviční. Doporučuji plugin Imagify.
Vyzkoušejte i jiné „měřiče“ rychlosti načítání stránek
Zkuste také další weby, ať máte porovnání. Pěkný report budete mít i z českého webu Pagespeed.cz. Zde stačí zadat jednu, případně 2-3 www adresy, které chcete změřit.
Po rychlém otestování uvidíte hodnoty, tady to vypadá už celkem dobře, zlepšení při porovnání před měsícem je znatelné, ale jak se říká, vždy to může být lepší, takže je důležité neusnout na vavřínech.
Buďte první kdo přidá komentář