Proč se web načítá pomalu: pět příčin, které vídám nejčastěji

Když se web načítá pomalu, skoro vždycky za to může jedna z pěti věcí: pomalý server, těžké obrázky, skripty, které drží vykreslení, nafouklý kód stránky nebo cizí služby, které si na stránku někdo časem přidal. Zbytek jsou výjimky.

Rozdíl mezi nimi není akademický. Každá z těch pěti příčin se pozná jinak, opravuje jinak, stojí jinak a hlavně: čtyři z nich zvládne člověk, který se o web stará, a jednu ne. Když nevíte která je která, platíte za opravu, která nic nezmění, protože se opravovalo jinde, než se čas ztrácel.

Nejdřív se tedy podívejme, kudy stránka vlastně cestuje.

Tohle je nejzákeřnější příčina, protože je nejdřív v řadě. Dokud server neodpoví, prohlížeč nemá co kreslit. Můžete mít obrázky vzorně zmenšené a kód bez jediného přebytečného řádku, a stránka bude stejně stát, protože se čeká na server.

Jak to poznáte: změří se to jako odezva serveru, tedy čas od požadavku po první data. Rychlý web je pod půl vteřiny. Nad osm desetin vteřiny už je to znát, nad dvě a půl vteřiny je to problém, kvůli kterému část lidí odejde dřív, než něco uvidí.

Čím to bývá

• Přeplněný sdílený hosting. Na jednom stroji běží stovky webů a váš čeká ve frontě. Poznáte to podle toho, že odezva kolísá: ráno půl vteřiny, v podvečer tři.
• Vypnutá mezipaměť stránek. Bez ní systém při každé návštěvě znovu sestavuje tutéž stránku z databáze. Ve WordPressu to řeší plugin na mezipaměť, na e-shopu bývá zapnutí v nastavení.
• Pluginy, které se nepoužívají. Každý se načte při každém požadavku, i ten, co jste jednou vyzkoušeli a zapomněli na něj.
• Vypnutá komprese přenosu. Zabalení dat zmenší přenášený kód zhruba na čtvrtinu. Bývá to jedno zaškrtnutí v administraci hostingu nebo pár řádků v souboru .htaccess a nestojí to nic navíc.

Zapnout mezipaměť a kompresi je nejlevnější zrychlení, jaké existuje. U webů, které mám na starosti, tahle dvojice udělá víc než všechny ostatní úpravy dohromady, protože se dotýká úplně každé stránky webu.

Fotka z telefonu má dnes běžně tři až pět megabajtů. Když ji někdo nahraje do galerie tak, jak vypadla z aparátu, prohlížeč ji celou stáhne a teprve pak zmenší na výřez široký pár set bodů. Návštěvník na mobilních datech přitom stáhl celé to megabajtové originální torzo.

U webu plného fotek jsou obrázky skoro vždycky největší část toho, co se přenáší. Zároveň je to část, se kterou se dá nejrychleji pohnout, protože se tu nesahá do kódu, ale do knihovny médií.

Tři věci, které s obrázky dělat

• Úsporný formát. Tentýž obrázek ve formátu WebP váží zhruba o třetinu méně než v JPEG a na pohled je stejný. Ve WordPressu převod zařídí plugin a přepne i staré obrázky.
• Odložené načítání. Obrázky pod prvním viditelným kusem stránky se nemusí stahovat hned. Značka loading="lazy" říká prohlížeči, ať je stáhne, až se k nim někdo doroluje. Většina redakčních systémů to dnes umí sama.
• Uvedené rozměry. Když má obrázek v kódu napsanou šířku a výšku, prohlížeč mu nechá místo předem. Bez toho stránka při načítání poskakuje: člověk míří na tlačítko, obsah se posune a klikne vedle.

To poskakování je zvlášť ošklivá vada, protože se netýká jen rychlosti. Google ho měří samostatně a hodnotí jako známku špatné kvality. Víc o tom píšu v článku o třech metrikách, kterými Google měří pohodlí návštěvníka.

V hlavičce stránky bývají odkazy na skripty. Prohlížeč je bere vážně: než je stáhne a projde, nevykreslí ani řádek textu. Návštěvník do té doby kouká na prázdnou obrazovku, ačkoliv text stránky už dávno má stažený a mohl by ho ukázat.

Jak to poznáte: počítá se, kolik skriptů v hlavičce nemá značku defer nebo async. Pět a víc je vážná brzda. Jeden nebo dva jsou drobnost, ale i tak se to vyplatí spravit, protože oprava je jeden řádek.

Co s tím: skriptu se doplní značka defer. Ta prohlížeči říká: stáhni si mě, ale nečekej se zbytkem stránky. Ve WordPressu to zvládnou optimalizační pluginy jedním zaškrtnutím, jinde je to úprava v šabloně na pět minut. Druhá věc jsou soubory se styly: když jich je v hlavičce sedm a víc, stojí za to je spojit do jednoho.

Samotný kód stránky, tedy to, co server pošle před obrázky a skripty, má u rozumně udělaného webu do sto padesáti kilobajtů. Vídám stránky, které mají čtyři sta i víc.

Skoro vždycky je za tím stavebnice stránek. Ty pracují tak, že jednu sekci obalí do pěti vnořených prvků a ke každému připíšou vlastní styl přímo do kódu. Výsledek vypadá v editoru pěkně a v kódu je z toho nafouklá hromada, kterou musí prohlížeč celou stáhnout a projít, než začne kreslit.

Co s tím: tohle je jediná z pěti příčin, kterou si majitel webu neopraví sám. Pomáhá vypnout části stavebnice, které se na webu nepoužívají, a přesunout vložené styly do samostatného souboru, který si prohlížeč uloží do mezipaměti a podruhé už nestahuje. Je to práce pro toho, kdo web dělal. Za odhad, kolik to zabere, se platit nemá.

Tahle příčina se od ostatních liší tím, že nevznikne najednou. Naroste. Web se spustí rychlý, pak se přidá lišta se souhlasy, měření návštěvnosti, chatovací okno, mapa, widget s recenzemi, písmo z cizího serveru a měřicí kód z reklamy. Každý z nich sám o sobě nic není. Dohromady jich je deset a stránka se vleče.

Cizí služba je horší než vlastní kód ze dvou důvodů. Za prvé se stahuje z cizího serveru, takže musí prohlížeč navázat další spojení a čekat na někoho, koho neovlivníte. Za druhé si takové skripty často stahují další skripty, takže se řetěz čekání natáhne, aniž by to bylo z kódu vidět.

Co s tím: udělejte si soupis. Projděte, co všechno na stránce běží, a u každé položky si odpovězte, kdy naposledy něco přinesla. Chat, do kterého za rok nikdo nenapsal, je čistá ztráta. Mapa na kontaktní stránce dává smysl, mapa v patičce na všech stránkách webu ne.

Skoro vždycky se najde víc než jedna příčina. Pořadí, ve kterém je řešit, není podle velikosti nálezu, ale podle poměru práce a užitku:

1. Komprese a mezipaměť. Půl hodiny práce, dotkne se každé stránky webu.
2. Obrázky. Plugin to udělá za vás, včetně starých obrázků nahraných před lety.
3. Skripty v hlavičce. Jeden řádek nebo jedno zaškrtnutí.
4. Cizí služby. Vyhazování nic nestojí, jen se o tom musíte rozhodnout.
5. Kód stránky. Nejdražší a nejpomalejší. Až nakonec, a jen když první čtyři nestačily.

A pomůže to v Googlu?

Pomůže, ale ne tak, jak se to obvykle podává. Rychlost je jeden ze signálů, které Google bere v úvahu, a mezi dvěma stejně dobrými stránkami rozhodne ve prospěch té rychlejší. Není to ale páka, kterou by se nezajímavá stránka vytáhla z třetí strany na první. Pokud vás v Googlu nikdo nenajde, rychlost skoro jistě není hlavní důvod a stojí za to nejdřív zjistit, co je. Na to je analýza webu.

Kde rychlost rozhoduje doopravdy, je to, co se stane po kliknutí. Člověk, který na vaši stránku dorazil, čeká, a když se nic neděje, vrátí se zpátky do výsledků. Kolik lidí tím přijdete, se dá zhruba odhadnout, píšu o tom v článku rychlost webu a odcházející zákazníci.