Pomalý web: kde se ztrácí čas a jak to opravit

Web otevřený v kanceláři na rychlém připojení bývá svižný. Zákazník ho ale často otevírá v telefonu na mobilních datech, cestou v tramvaji, a tam se projeví každý nezmenšený obrázek a každý skript navíc. Rychlost je potřeba měřit tak, jak web vidí on.

Jak rychlost měří Google

Google sleduje tři metriky, kterým říká Core Web Vitals. LCP měří, za jak dlouho se zobrazí největší prvek stránky, obvykle hlavní fotka nebo nadpis, a dobrá hodnota je do 2,5 sekundy. INP měří, jak rychle stránka zareaguje na klepnutí; měla by se vejít do 200 milisekund. CLS vyjadřuje, jak moc obsah při načítání poskakuje, a cílem je méně než 0,1.

Hodnoty pro svůj web zjistíte v nástroji PageSpeed Insights. Horní část ukazuje data od skutečných návštěvníků z Chromu, pokud jich web má dost, spodní část je jednorázový test v simulovaném telefonu. Když se obě části liší, věřte spíš datům od návštěvníků.

Obrázky

Fotka z telefonu má klidně několik megabajtů a přes 4000 pixelů na šířku. Na mobilu se přitom zobrazí zhruba ve 400 pixelech a zbytek se stahuje zbytečně. Obrázky zmenšete na velikost, v jaké se opravdu zobrazují, a převeďte je do formátu WebP nebo AVIF. Na WordPressu to zvládne plugin, u jiných systémů to často umí šablona nebo hosting.

Obrázkům také nastavte šířku a výšku. Prohlížeč pak ví, kolik místa jim nechat, a text pod nimi neposkočí, když se obrázek dotáhne, což se projeví na CLS.

Skripty třetích stran

Chatovací okno, měřicí kódy, remarketing, mapa, video z YouTube, widget s recenzemi: každá z těchto věcí přidá desítky až stovky kilobajtů JavaScriptu a další požadavky na cizí servery. Projděte, co na webu běží, a vyhoďte, co nikdo nepoužívá. Měřicí kód z kampaně, která skončila před dvěma lety, patří k častým nálezům.

Skripty, které zůstanou, načítejte s atributem defer, případně až po první interakci návštěvníka. Vložené video z YouTube jde nahradit náhledovým obrázkem a přehrávač načíst až po kliknutí.

Písma a pluginy

Každý řez písma je samostatný soubor. Tři rodiny písem po čtyřech řezech znamenají dvanáct souborů, než se text zobrazí ve správné podobě, a většina webů přitom vystačí s jednou rodinou ve dvou nebo třech řezech. Nastavte font-display: swap, aby se text ukázal hned v záložním písmu a nečekal na stažení.

Na WordPressu zkontrolujte pluginy. Aktivní plugin často přidává vlastní styly a skripty na všechny stránky, i tam, kde se nepoužívá; typickým příkladem je kontaktní formulář, který se načítá i ve článcích na blogu.

Server a hosting

Když PageSpeed hlásí dlouhou odezvu serveru (Time to First Byte nad 0,8 sekundy), obrázky za to nemohou. Pomůže cache celých stránek, novější verze PHP nebo lepší hosting, a nejlevnější sdílené hostingy bývají první podezřelý.

Kde začít

Zadejte do PageSpeed Insights úvodní stránku a nejnavštěvovanější stránku služby a podívejte se do části Diagnostika. Doporučení jsou seřazená podle toho, kolik času ušetří. Začněte shora a po každé změně test zopakujte, ať víte, co pomohlo a co ne.