„Web je pomalý“ není diagnóza. Může to znamenat, že stránka čtyři vteřiny nic nezobrazí, nebo že se zobrazí rychle a pak ignoruje váš první klepnutí, nebo že text skočí dolů přesně ve chvíli, kdy jste ho chtěli číst. To jsou tři různé problémy se třemi různými opravami.
Google je pojmenoval a stanovil pro ně hranice. Souboru se říká Core Web Vitals. Je to užitečný způsob, jak přestat dohadovat, zda je web pomalý, a začít opravovat tu část, která pomalá je.
Tři čísla
Largest Contentful Paint (LCP) měří načítání: za jak dlouho se na první obrazovce objeví největší prvek, obvykle hlavní obrázek nebo nadpis. Dobrý výsledek je 2,5 sekundy nebo méně.
Interaction to Next Paint (INP) měří odezvu: jak dlouho trvá, než stránka zareaguje na klepnutí nebo kliknutí. Dobrý výsledek je 200 milisekund nebo méně. INP se stal jedním z Core Web Vitals v roce 2024 a nahradil starší First Input Delay, takže rady, které stále mluví o FID, jsou zastaralé.
Cumulative Layout Shift (CLS) měří vizuální stabilitu: jak moc stránka při načítání poskakuje. Dobrý výsledek je 0,1 nebo méně. Je to skóre, ne čas.
Stránka vyhoví, pokud splní všechna tři kritéria u 75. percentilu skutečných návštěv, zvlášť pro telefony a zvlášť pro počítače. Jinými slovy: známku určuje nejpomalejší čtvrtina vašich návštěvníků, ne rychlé připojení ve vaší kanceláři.
Nejdřív měřte, a to skutečné návštěvníky
PageSpeed Insights ukazuje dva druhy dat a lidé je neustále zaměňují. Terénní data ukazují, co zažili skuteční uživatelé Chromu za posledních 28 dní. Objeví se jen tehdy, když má stránka dost návštěvnosti. Laboratorní data jsou jediný simulovaný test na omezeném zařízení. Hodí se k hledání příčin, ale špatně se podle nich hodnotí výsledek.
Přehled Core Web Vitals v Search Console seskupuje stránky podle problému, takže poznáte, jestli máte jednu pomalou šablonu, nebo sto samostatných potíží. Obvykle jde o to první. Web se čtyřmi šablonami stránek má čtyři věci k opravě, ne čtyři sta.
Testujte s profilem telefonu. Většina vašich návštěvníků ho používá a stránka, která je na notebooku v pořádku, může na středně výkonném telefonu s mobilními daty cíl LCP výrazně minout.
Když je LCP špatné
Zjistěte, který prvek je největší. Report z PageSpeed ho pojmenuje. Většinou je to obrázek a opravy jsou nudné a účinné. Servírujte ho v takové velikosti, v jaké se zobrazuje, ne v té, ve které ho vyfotil fotoaparát. Použijte moderní formát, třeba WebP nebo AVIF. Nenačítejte ho líně, protože líné načítání patří k obrázkům pod okrajem obrazovky a zdržuje právě ten jediný obrázek, na který návštěvník čeká. Prohlížeči včas řekněte, že na něm záleží, pomocí preloadu nebo nápovědy k prioritě.
Pokud je největším prvkem text, bývá viníkem písmo. Hostujte písma sami, načítejte jen řezy, které používáte, a zajistěte, aby byl text viditelný, než písmo dorazí.
Pokud nepomůže ani jedno, podívejte se na server. Pomalá první odpověď omezuje všechno, co následuje. Obvyklým lékem je cache, CDN a lehčí šablona stránky.
Když je INP špatné
Pomalá odezva téměř vždy znamená, že prohlížeč v okamžiku klepnutí zrovna vykonává JavaScript. Lékem je méně skriptů, ne rychlejší skripty. Odstraňte widgety, které nikdo nepoužívá, a buďte podezřívaví ke značkám třetích stran: chatovacím bublinám, správcům značek, nástrojům na teplotní mapy, tlačítkům sociálních sítí. Každé z nich vypadá drobně a dohromady mohou stránku ovládnout.
Cokoli ponecháte, mělo by se načítat později, až je stránka použitelná, a dlouhé úlohy je třeba rozdělit, aby prohlížeč mohl mezitím odpovědět na klepnutí. Právě tady se může animovaný design plný skriptů dostat do potíží, proto animace zkoušejte na středně výkonném telefonu, ne na notebooku grafika.
Když je CLS špatné
Posuny rozvržení mají krátký seznam příčin. Obrázky a videa bez atributů šířky a výšky, takže prohlížeč nemůže vyhradit místo. Lišty a vložený obsah, které se objeví po textu a posunou ho dolů, přičemž cookie lišty jsou častým viníkem, pokud se vkládají do toku stránky místo toho, aby ji překrývaly. Písma, která se vymění a změní velikost textu. Reklamy neznámé výšky.
Vyhraďte místo přímo v kódu, vše, co se objevuje pozdě, překrývejte místo vkládání, a skóre obvykle klesne pod 0,1 během jedné verze webu.
Záleží na tom při umístění ve vyhledávání?
Google tyto metriky popisuje jako součást signálů uživatelské přívětivosti stránky a jasně říká, že rychlá stránka s chudým obsahem nepředstihne pomalejší stránku, která na otázku odpovídá lépe. Nečekejte tedy, že dokonalé skóre vytáhne průměrnou stránku nahoru.
Lepší argument je obchodní. Lidé opouštějí stránky, které působí pomalu, a cena se projeví v poptávkách a prodejích dřív, než se objeví v jakémkoli přehledu pozic. Opravte nejdřív nejhorší šablonu, po 28 dnech terénních dat změřte znovu a pak přejděte k další.