Návštěvník otevře stránku v mobilu, uvidí prázdnou obrazovku a po několika sekundách klepne na tlačítko Zpět. Možná se web nakonec načetl, jenže jeho trpělivost skončila dřív. Stejnou situaci zažívají lidé každý den, často při pomalejším připojení, v přeplněné dopravě nebo na telefonu, který už má nejlepší roky za sebou.
Rychlost webu proto není jen technická disciplína pro vývojáře. Promítá se do toho, kolik lidí stránku skutečně použije, kolik jich dokončí objednávku a jestli se na ni vrátí. Pomalý web může působit nedůvěryhodně, i když má profesionální design a kvalitní nabídku. Je to podobné jako vstoupit do krásného obchodu, kde se ale prodavač každou chvíli zastaví a hledá, co jste si objednali.
Co web nejčastěji zpomaluje
První problém bývá zbytečně velký obsah. Fotografie pořízená moderním telefonem může mít několik megabajtů, přestože na stránce zabere jen malý prostor. Před nahráním ji proto zmenšete na rozumné rozměry a uložte v moderním formátu, například WebP nebo AVIF, pokud ho váš systém správně podporuje. Obrázky pod viditelnou částí stránky nemusí prohlížeč načítat hned; mohou přijít na řadu až ve chvíli, kdy k nim návštěvník doroluje.
Podobně se chovají videa, animace a galerie. Automaticky spuštěné video v horní části stránky dokáže zpomalit načtení i spotřebovat data, aniž by návštěvník získal něco podstatného. Pokud video skutečně potřebujete, zvažte náhledový obrázek a spuštění až po klepnutí.
Velkou zátěž představují také skripty třetích stran. Nástroje pro měření návštěvnosti, reklamní systémy, chatovací okna, mapy nebo sledování chování uživatelů mohou být užitečné, ale každý další skript něco stojí. Nejen v kilobajtech, ale i v čase procesoru. Stránka se může vizuálně zobrazit, přesto na ni nejde okamžitě klepnout, protože telefon stále zpracovává skripty na pozadí.
Pomáhá odstranit vše, co web nepotřebuje, načítat skripty až ve chvíli, kdy jsou skutečně nutné, a sloučit nebo zmenšit soubory CSS a JavaScriptu. U rozšířených redakčních systémů se vyplatí projít instalované doplňky. Některé přidávají kód na každou stránku, přestože ho používáte jen na jediné podstránce.
Rychlost ovlivňuje i server. Levný nebo špatně nastavený hosting může dlouho reagovat na první požadavek, zvlášť když web obsluhuje databázové dotazy nebo velké množství návštěvníků. Pomoci může kvalitnější hosting, cachování, komprese přenášených dat a obsahová síť, která doručuje soubory z míst blíže návštěvníkovi. U menšího webu není třeba začínat složitou infrastrukturou. Často stačí dobře nastavená cache a pravidelně aktualizovaný systém.
Důležitá je také konstrukce samotné stránky. Návštěvník by měl co nejdříve vidět hlavní obsah, zatímco méně podstatné prvky mohou přijít později. Kritické styly lze načíst přednostně, zbytečné fonty omezit a počet různých řezů písma držet při zemi. Každé písmo navíc může znamenat další požadavek a někdy také nepříjemné přeskočení textu během načítání.
Jak rychlost měřit a co znamenají výsledky
Nestačí web otevřít na vlastním počítači a prohlásit ho za rychlý. Výkonný notebook na rychlé domácí síti ukáže úplně jiný obraz než běžný telefon s horším připojením. Testujte proto mobilní i stolní zobrazení a sledujte nejen celkové skóre, ale hlavně konkrétní problémy.
Core Web Vitals se soustředí na tři zkušenosti. LCP měří, za jak dlouho se zobrazí hlavní obsah stránky; dobrým výsledkem je nejvýše 2,5 sekundy. INP sleduje, jak rychle stránka reaguje na interakci, přičemž cílová hodnota je do 200 milisekund. CLS zachycuje nečekané posuny rozvržení a měl by zůstat nejvýše na hodnotě 0,1. Když se tlačítko během načítání posune pod prst, nejde o drobnou kosmetickou chybu. Návštěvník může kliknout na něco jiného, než zamýšlel.
Tyto metriky se hodnotí na 75. percentilu, odděleně pro mobilní a stolní zařízení. Výsledek tedy nepopisuje nejrychlejší návštěvy, ale zkušenost, pod kterou se vejde většina uživatelů. Právě proto má smysl sledovat reálná data, ne jen ideální test z kanceláře.
Nástroj PageSpeed Insights kombinuje laboratorní měření Lighthouse s reálnými údaji z Chrome UX Reportu za posledních 28 dní. Laboratorní test pomůže odhalit konkrétní technickou chybu při předem nastavených podmínkách, zatímco data skutečných návštěvníků ukážou, jak web funguje v běžném provozu. Oba pohledy se doplňují. Laboratorní výsledek může být výborný, ale reální uživatelé přesto zažívat dlouhé načítání na slabších zařízeních.
Rychlost je hodnoticím faktorem mobilního vyhledávání Google od července 2018. Dopad se týká především stránek s nejpomalejší uživatelskou zkušeností, ne každého webu, který nemá laboratorní skóre sto bodů. Google používá Core Web Vitals v rankingových systémech, dobré skóre samo o sobě ale vysokou pozici nezaručuje. O pořadí rozhoduje také relevance obsahu, jeho kvalita, autorita webu a shoda s tím, co člověk hledá.
Optimalizaci proto nezačínejte honbou za jediným číslem. Najděte stránku, která přivádí nejvíce návštěvníků, změřte její skutečné slabiny a opravujte je podle dopadu. Někdy stačí zmenšit jeden obrázek v horní části stránky, jindy je potřeba zasáhnout do JavaScriptu nebo změnit způsob práce se serverovou cache. Každá ušetřená sekunda má největší cenu tam, kde návštěvník čeká na první smysluplný obsah a rozhoduje se, zda zůstane.
