Co se vlastně měří
Google sleduje tři věci a u každé má hranici pro hodnocení dobré. Měří se na sedmdesátém pátém percentilu skutečných návštěv, což v praxi znamená: tři ze čtyř lidí to musí zažít aspoň takhle.
| Metrika | Co měří | Dobré |
|---|---|---|
| LCP | Za jak dlouho se vykreslí největší prvek stránky. Obvykle hlavní obrázek nebo nadpis. | do 2,5 s |
| INP | Jak dlouho stránka odpovídá na kliknutí a ťuknutí. | do 200 ms |
| CLS | Jak moc obsah poskakuje během načítání. | do 0,1 |
Z těch tří je nejdůležitější LCP, protože odpovídá tomu, co člověk zažívá: čekání na okamžik, kdy stránka vypadá jako stránka. CLS je ten pocit, když ťuknete na odkaz a pod prstem se mezitím něco přesune.
Co o penězích říkají čísla — a co neříkají
Větu „každá sekunda stojí X procent konverzí“ najdete v každém druhém článku a skoro nikdy u ní není zdroj. Jedna pořádná studie existuje: Deloitte Digital ji dělal pro Google na datech mobilních webů v retailu, cestování a luxusním zboží, napříč Evropou a USA.
Co naměřili po zrychlení o 0,1 sekundy: konverze v retailu o 8,4 % výš, průměrná hodnota objednávky o 9,2 % výš, konverze v cestování o 10,1 % výš.
Jedna věc, kterou Google nedělá
Google za pomalý web netrestá. Neexistuje penalizace za rychlost. Rychlost je jeden z mnoha signálů a u dotazu, kde máte jasně nejlepší obsah, vás pomalejší načtení o první místo nepřipraví.
Proč na tom trvám: protože slib „zrychlíme vám web a vyskočíte v Googlu“ je neověřitelný a většinou se nesplní. Rychlost se vyplatí z jiného důvodu — rozhoduje o tom, kolik lidí z těch, co už přišli, zůstane. To je měřitelné hned a nezávisí to na algoritmu.
Kde se rychlost ztrácí
V pořadí, v jakém to na reálných webech vidím:
- Obrázky
Skoro vždycky první místo. Fotka z telefonu má čtyři megabajty a na stránce se kreslí do šířky 600 px. Řešení je nudné: zmenšit na velikost, ve které se opravdu zobrazuje, uložit ve formátu WebP a dát obrázku rozměry, aby pod ním obsah neposkakoval.
- Písma
Tři rodiny po čtyřech řezech jsou dvanáct souborů, které musí dorazit, než se objeví text. Dvě rodiny stačí a mají se stahovat z vlastního serveru, ne z cizího.
- JavaScript, který nic nedělá
Knihovna přidaná kvůli jednomu efektu. Carousel, který se použil jednou. Tohle je ta část, kterou nejde vidět a o které se nejhůř rozhoduje, protože na stránce vypadá všechno v pořádku.
- Kód třetích stran
Chat, mapa, tlačítka sociálních sítí, správce značek, lišta se souhlasem. Každý z nich tahá vlastní soubory z cizích serverů a vy nemáte vliv na to, jak rychlé jsou. Tohle bývá nejpřekvapivější položka celého měření.
Příklad z tohohle webu
Abych nemluvil obecně. Hlavní obrázek článku jsem měl zabalený do komponenty, která ho při scrollování rozsvěcí. Vypadalo to dobře a bylo to hloupé: obrázek se do stránky zapisuje skrytý, takže musel počkat, než se spustí JavaScript, než se vůbec začal stahovat.
| Varianta | Naměřeno |
|---|---|
| Uvnitř komponenty s animací | |
| Hranice „dobré“ podle Googlu | |
| Bez ní |
Rozdíl je sedmatřicetinásobek a nešlo o velikost souboru. Šlo o to, že obrázek čekal na kód. Tohle nenajde oko a nenajde to ani pohled do zdroje — najde to jedině měření.
Co jsem kvůli rychlosti neudělal
Rychlost se nedělá optimalizací na konci. Dělá se tím, co se na stránku nedostane.
- Žádná animační knihovna. Zvažoval jsem jednu běžnou a stála by 55 kB po kompresi na každé stránce. Všechno, co na tomhle webu uvidíte — prolínání, posuny, rozbalování — je čisté CSS. Jediná výjimka je plynulé sledování kurzoru, a to je pár řádků.
- Žádné externí písmo z cizího serveru. Obě rodiny se stahují z vlastní domény.
- Celý vzhled webu váží 15 kB po kompresi. To je jeden styl pro 59 stránek.
Nejrychlejší kód je ten, který jsem nenapsal. Pokaždé, když si chci přidat knihovnu kvůli jednomu efektu, zkusím to nejdřív v CSS — a většinou zjistím, že to jde a že by ta knihovna byla jen pohodlí pro mě, placené návštěvníkem.
Marian Bendák
Co si změřit sami
- Otevřete PageSpeed Insights a zadejte adresu. Dívejte se na záložku pro mobil.
- Nahoře jsou data od skutečných návštěvníků, dole test z laboratoře. Ta horní část je ta, která platí — pokud se zobrazí, což u malých webů bývá problém, protože na ni není dost návštěv.
- Z celé zprávy sledujte LCP na mobilu. Honit se za stovkou v celkovém skóre je ztráta peněz.
- Pak zkuste web na svém telefonu s vypnutou Wi-Fi. To je test, který nelže.
Když vám vyjde LCP nad čtyři sekundy, začněte u obrázků — v devíti z deseti případů je to ono. Víc kontrol, které zvládnete sami, mám v dvacetiminutovém auditu webu.
Co s tím dál
Rychlost je jedna ze tří věcí, které u webu rozhodují o tom, co se stane s návštěvou — zbylé dvě jsou chování na telefonu a srozumitelnost. Jak se tohle promítá do ceny, rozebírám zvlášť.
Jestli chcete vědět, na čem je váš web, projdeme ho spolu na konzultaci zdarma. Hotové projekty jsou v portfoliu.