Jak zrychlit načítání webových stránek: 7 příčin pomalého webu

Zrychlit načítání webových stránek jde ve většině případů za jedno odpoledne, protože pomalý firemní web má skoro vždycky jednu ze sedmi příčin a slabý hosting mezi nimi skoro nikdy není. Stránka si sama řekne o práci, kterou dělat nemusela: stáhne dvacet skriptů, počká na fonty, pustí analytiku dřív než obsah a nechá prohlížeč přepočítat rozvržení, protože obrázek nemá rozměry. Čtyři z těch sedmi příčin se dají spravit hned. Tři znamenají přestavbu.

Pomalé načítání webových stránek: jak poznáš, že máš problém?

Otevři si web na mobilních datech, bez wi-fi v kanceláři. Když od klepnutí na odkaz do chvíle, kdy si můžeš přečíst první větu, uplynou víc než dvě sekundy, máš problém. A ten problém tě stojí peníze dřív, než ho někdo popíše slovem konverze: člověk, který čeká, se prostě vrátí do vyhledávání.

Přesná čísla dá naše kontrola webu zdarma: zadáš adresu a za pár vteřin vidíš rychlost, SEO i technické chyby jedné stránky, bez registrace. Nedívej se na jednu celkovou známku. Dívej se na Largest Contentful Paint (kdy se objeví hlavní obsah) a Cumulative Layout Shift (jak moc stránka po načtení poskakuje).

1. Pluginy, které nikdo neodinstaloval

Nejčastější příčina u WordPressu. Web má aktivních třicet pluginů, používá se osm. Zbytek se načítá při každém zobrazení, protože plugin neví, jestli ho na téhle stránce bude potřeba, tak si své CSS a JS připraví pro jistotu.

Spravitelné za odpoledne. Projít seznam, vypnout, změřit, opakovat. Pozor: vypnutí je jen první krok před odinstalací a některé pluginy nechávají v šabloně kód i po smazání.

2. Šablona koupená na marketplace

Univerzální šablona umí být vším pro každého: portfoliem, e-shopem, blogem i konferenčním webem. Ty používáš jednu z těch podob, ale stahuješ všechny, včetně slideru, který nemáš, a ikon, které nepoužíváš.

Nespravitelné. Můžeš uříznout kus, ale páteř zůstává. Tohle je bod, kde se přestavba zaplatí.

3. Obrázky v původní velikosti

Fotka z foťáku má 4 000 px na šířku a 6 MB. V rozvržení se zobrazí na 800 px. Prohlížeč přesto stáhne celých 6 MB a zmenší si je sám. Na mobilních datech to je několik sekund jen za jeden obrázek.

Spravitelné. Zmenšit, převést do WebP nebo AVIF, doplnit width a height do kódu. Ty rozměry jsou důležitější, než vypadají: bez nich prohlížeč neví, kolik místa si má nechat, a stránka po doskočení obrázku poskočí. To je přesně ten Cumulative Layout Shift.

6 MB fotka na místě pro 800 px se stáhne prohlížečem celá, což na mobilu stojí několik sekund.

4. Fonty, na které se čeká

Web si stáhne čtyři řezy písma z cizí domény a do té doby buď nezobrazí text vůbec, nebo ho zobrazí systémovým písmem a pak přeblikne.

Spravitelné. Nasadit fonty z vlastní domény, omezit počet řezů na ty, které se opravdu používají, a přidat font-display: swap. Dva řezy unesou celý firemní web.

5. Analytika a marketingové skripty nahoře

Google Tag Manager, pixel, chat, cookie lišta, heatmapa. Každý z nich je požadavek na cizí server, a když jsou v hlavičce, stránka čeká na ně a obsah zatím nikdo nevidí.

Spravitelné. Přesunout dolů, načítat asynchronně, chat pouštět až po interakci. A hlavně se u každého skriptu zeptat, kdy naposledy někdo otevřel data, která sbírá.

6. Všechno se počítá až v prohlížeči

Moderní weby často pošlou prázdnou stránku a JavaScript, který obsah teprve poskládá. U aplikace to dává smysl. U firemní prezentace, jejíž obsah se mění jednou za měsíc, to znamená, že každý návštěvník platí výpočtem za flexibilitu, kterou nikdy nevyužije.

Nespravitelné bez změny přístupu. Tady vede cesta ke statickému webu: stránky se vygenerují při sestavení, prohlížeč dostane hotové HTML a JavaScript se používá jen tam, kde je opravdu potřeba.

7. Databáze u každého zobrazení

Klasický redakční systém při každém načtení sestaví stránku znovu: dotazy do databáze, šablony, pluginy. Cache to schová, dokud něco nezměníš. Po každé úpravě se první návštěvník zase načeká.

Nespravitelné bez přestavby, ale s dobrou cache to jde odsunout.

Rychlost načítání webových stránek: o kolik pomůže přestavba?

Fabrika Sumy, textilka založená v roce 1987, měla načtení 4,2 sekundy. Po přestavbě na statický web 0,8 sekundy. Za tím stojí body 2, 6 a 7 z tohoto seznamu najednou, protože ty tři spolu souvisejí. Jeden trik by to neudělal.

Ze 4,2 na 0,8 sekundy kleslo načtení Fabriky po přestavbě šablony, vykreslování a databáze najednou.

Každý web, který stavíme, odchází s výkonem Lighthouse 95+. Když ho nemá, dotáhneme ho zdarma. Je to podmínka zakázky, žádný bonus.

Jak zrychlit web tenhle týden?

1. Změř to na mobilních datech a zapiš si číslo. Bez čísla před tím nepoznáš, jestli to pomohlo. Nejrychlejší cesta je kontrola webu zdarma, výsledek máš hned na stránce.
2. Projdi pluginy a skripty. Vyhoď, co nikdo nepoužívá.
3. Zmenši pět největších obrázků a doplň jim rozměry.
4. Změř znovu.

Když se po těchhle čtyřech krocích nic nezmění, jsi u bodů 6 a 7. To už je rozhovor o tom, jak je web postavený, optimalizace tam nepomůže.

Časté otázky k rychlosti webu

Jak zrychlit načítání webových stránek bez přestavby?

Vypnout nepoužívané pluginy a skripty, zmenšit obrázky a doplnit jim rozměry, nasadit fonty z vlastní domény a analytiku načítat až po obsahu. To jsou body 1, 3, 4 a 5 a zvládne je kterýkoli vývojář za odpoledne.

Co je pomalé načítání webových stránek v číslech?

Hlavní obsah (Largest Contentful Paint) nad 2,5 sekundy na mobilu je podle Googlu pomalý web. Naše weby odcházejí pod sekundu. Změř si to na mobilních datech nebo v naší kontrole webu.

Pomůže rychlejší hosting?

Málokdy. Hosting rozhoduje o odezvě serveru, což jsou desítky milisekund. Sekundy navíc vznikají v prohlížeči: skripty, fonty, obrázky, přepočty rozvržení. Dražší hosting je nezmění.

Má rychlost načítání vliv na pozice ve vyhledávání?

Ano, ale menší, než se říká. Větší vliv má na to, co lidé udělají, když stránka dorazí: kdo čeká tři sekundy, odejde dřív, než se pozice ve vyhledávání vůbec projeví.