Trápí váš web pomalé načítání stránek? 8 důvodů, čím to může být

Odpovím hned na začátku: Jasně, že je! V dnešní digitální době, kdy se celá řada činností přesouvá na internet, je velmi důležité, aby jakákoli prezentace na webu fungovala co nejlépe. Jak ukazují průzkumy, pomalé načítání stránek vede k tomu, že velká část návštěvníků z webu frustrovaně odejde a vůbec nevěnuje pozornost obsahu. I sebekrásnější web tak nepovede k vašemu cíli. Ať už chcete přilákat čtenáře nebo prodat nějaké zboží. V tomto článku bych rád shrnul nejzásadnější důvody, které mohou zpomalení způsobovat a jak zrychlit načítání webových stránek.

Jednou z nejčastějších příčin pomalého načítání webových stránek jsou zbytečně veliké obrázky. Pokud máte na svých stránkách řadu obrázků ve vysokém rozlišení (a spousta lidí obrázky při nahrávání neupravuje), načítání se zaručeně zpomalí.

Řešení je přitom poměrně snadné. Stačí u jednotlivých obrázků snížit rozlišení a u komprimovaných obrázků zvolit míru komprese tak, aby nebyla příliš snížena kvalita. Výslednou velikost to může dramaticky snížit. Udělat to můžete celou řadou nástrojů. Ať online jako je např. Photopea nebo lokálně na vašem počítači. Já pro úpravy rastrových obrázků nejčastěji používám GIMP, ale pro rychlé úpravy dobře poslouží i třeba IrfanView. Oba programy jsou zdarma. Rozlišení vám mohou upravovat i redakční systémy, pokud nějaký používáte. Např. mnou používaný WordPress vytváří již při nahrání obrázku jeho menší verze, které následně můžete snadno použít na webových stránkách.

Dobré je také zvolit vhodný formát obrázků. Na internetu můžete narazit nejčastěji na 2 formáty. JPEG používaný pro zobrazení fotografií a PNG, který umožňuje vytvářet obrázky, které mají části průhledné. Já osobně ale používám nejčastěji formát WEBP. Spojuje to nejlepší z obou výše zmíněných a umožňuje vysokou kompresi při zachování dobré kvality.

Další věc, která vám může pomoct zvýšit rychlost načítání webu je tzv. „Lazy-loading„. Díky této technice se obrázky na webové stránce nahrávají až ve chvíli, kdy jsou opravdu potřeba. Návštěvníkovi se tedy nahraje to nejnutnější a nemusí čekat, až se nahrají i části stránky, které stejně nevidí. Ty se nahrají, až při skrolování na další části stránky. Obzvláště pokud máte na stránce hodně obrázků, může Lazy-loading nahrávací čas výrazně zkrátit.

Další možností jsou tzv. responzivní obrázky, které používají jiné rozlišení a velikost obrázků pro různá zařízení s různými velikostmi obrazovky. Tak můžete zajistit, aby byly obrázky optimalizované pro různá zařízení.

Obrázky mohou zpomalit načítání stránek opravdu významně. Je proto jistě s výhodou, pokud jednou za čas prohléhnete svůj web, jestli některý z obrázků není příliš veliký. Pomoci vám v tom mohou i různé nástroje. Např. bezplatný nástroj PageSpeed Insight od Google zobrazí, jestli na stránce nejsou zbytečně velké obrázky, které nahrávání zpomalují.

Pokaždé, když návštěvníci vašeho webu otevřou webovou stránku, jejich prohlížeč odešle sérii tzv. HTTP požadavků, aby získal všechny soubory potřebné pro její zobrazení (HTML, CSS, JavaScript a obrázky). Čím více takových požadavků je potřeba zpracovat, tím déle trvá zobrazení požadované stránky, což uživatel vnímá jako pomalé načítání stránky a může váš web opustit.

Spojením více různých CSS a JavaScritových souborů do jednoho lze počet požadavků snížit a zvýšit tak rychlost načítání webu. Toho lze dosáhnout pomocí různých nástrojů a pluginů pro redakční systémy. Já pro zrychlení webů používám s oblibou LightSpeed a ten umí i toto. Pokud ale požíváte jiný plugin (třeba WP Rocket nebo Autoptimize), spojení souborů do jednoho umí taky.

Počet požadavků sníží i již zmíněná technika Lazy-loading, o které jsem psal v části věnované obrázkům. V tomto případě se odloží nahrávání různých souborů, jako jsou písma či videa a tím se sníží i počet HTTP požadavků, které se musí odbavit před prvním zobrazením stránky.

Kromě minimalizace počtu HTTP požadavků je důležité minimalizovat velikost všech souborů, které musí server vrátit. Obrázky jsem popsal již v minulé kapitole, ale i CSS či JavaScriptové soubory lze zmenšit. Např. pluginy pro zrychlení načítání stránek redakčního systému WordPress umí z těchto souborů vynechat nepotřebné znaky (zbytečné mezery, konce řádků, komentáře apod.). Soubory lze navíc komprimovat. Ať algoritmem Gzip nebo Brotli. I to způsobí rychlejší odbavení HTTP požadavků.

Pokud se vaše stránky uloží do vyrovnávací paměti prohlížeče návštěvníka, nemusí se celé stahovat znovu, pokud váš web navštěvuje opakovaně. Vše potřebné má již na svém počítači stažené, což ušetří spoustu času, který by jinak prohlížeč strávil stahováním potřebných souborů. A nadměrné stahování souborů způsobuje pomalé načítání stránek.

Pokud chcete povolit ukládání do vyrovnávací paměti prohlížeče, je potřeba nastavit vše potřebné na straně serveru, resp. vašeho redakčního systému (např. v mém oblíbeném pluginu LiteSpeed). Ten pak sdělí prohlížeči návštěvníka, jestli si může soubory uložit a na jak dlouho. Po tuto dobu bude rychlost načítání stránek mnohem vyšší.

Odměnou za správně nastavenou vyrovnávací paměť nebude jen mnohem vyšší rychlost načítání stránek, což výrazně zvýší pozitivní dojem z vašeho webu, ale zároveň to odlehčí vašemu serveru, který nebude muset zpracovávat tolik požadavků. Spoustu dat si návštěvníci nebudou muset stahovat a použijí soubory, které již mají stažené z dřívějška.

Důležitá je i optimální doba platnosti vyrovnávací paměti. Pokud se stánky nemění, lze dát platnost velmi dlouhou (i třeba 1 rok). Stránka bude pořád stejná, takže není třeba její verzi ve vyrovnávací paměti aktualizovat. Pokud se ale často mění, je lepší čas zkrátit, aby se co nejdříve zobrazovala stránka aktuální a ne její starší verze. I když i web může např. verzováním CSS souborů přinutit prohlížeč, aby stáhl nový soubor.

Pokud byste měli někdy problém, že se vám zobrazuje neaktuální verze stránky, je dobré přinutit prohlížeč, aby webovou stránku stáhl celou znovu. To se dá udělat dvěma způsoby. Buď smažete vyrovnávací paměť (Ctrl + Shift + Delete) nebo nahrajete stránku bez použití vyrovnávací paměti (Shift + F5 nebo Ctrl + Shift + r).

Pomalé načítání stránek může způsobit i zbytečně komplikovaný kód či špatně optimalizované pluginy a šablony. A to jak díky větší velikosti souborů, které je nutné stáhnout, tak díky špatně provedené optimalizaci, která odčerpává zdroje a zpomaluje zpracování a zobrazení stránek.

Abyste se těmto problémům vyhli, je dobré se občas vrátit i ke starším stránkám. Sám občas zpětně zjistím, že je některá stránka zbytečně komplikovaná a šla by zjednodušit. Neudělá to většinou nějaký závratný rozdíl, ale každá milisekunda se počítá ;-).

Při použití redakčního systému je velmi důležité vybírat takovou šablonu a pluginy, které nejsou systémově zbytečně náročné a jsou dobře optimalizované. Některé jsou vyloženě známé tím, že způsobují pomalé načítání stránek, které se musí řešit dalšími optimalizacemi. Já proto používám nejčastěji šablonu Astra a pluginy, které mám ověřené, že dobře a rychle fungují. Jen tak je možné zachovat dostatečnou rychlost vašeho webu.

Jednou za čas je také dobré provést kontrolu, jestli jsou stále všechny pluginy potřebné. Web se může měnit a ne všechny funkce jsou stále potřeba. Odinstalování nepotřebných pluginů může snížit nároky webu na technické prostředky i počet HTTP požadavků a celý web tak může zrychlit.

Řada webů používá pro své fungování databázové řešení. Špatně optimalizovaná databáze pak způsobí pomalé načítání stránek, až se může web stát zcela nepoužitelným. Pokud váš web běží na nějakém redakčním systému, věřte, že se bez databáze neobejdete. Občasná kontrola a vyčištění databáze je určitě na místě, jinak může dojít k závažným problémům až zablokování celého webu. Databázi je možné optimalizovat ručně. Redakční systémy ale běžně obsahují pluginy, které to zvládnou za vás.

Webové stránky je možné také ukládat do vyrovnávací paměti (cache) přímo na serveru. Stránka se tak mnohem rychleji předloží prohlížeči návštěvníka, který ji nemá uloženou ve své lokální cache. Celé to funguje tak, že pokud se prohlížeč zeptá serveru na často navštěvovanou stránku a ta je uložená ve vyrovnávací paměti, server ji rovnou bez dalších dotazů pošle zpátky, což ušetří velkou část času potřebného pro vybavení celé řady dotazů nutných bez vyrovnávací paměti.

Vyrovnávacích pamětí na serveru je více typů. Page cache ukládá celé stránky. Object cache ukládá výsledky komplexních dotazů nebo výpočetních úloh pro pozdější opakované použití. Opcode cache umožňuje uložení zkompilovaných PHP skriptů, což zrychluje jejich opakované vykonávání.

A jak cache na vaše stránky implementovat? Přímo v kódu je možné v hlavičce stránek použít různé příkazy. Pro redakční systémy pak existuje celá řada pluginů, které vám v tom mohou pomoci. Vzhledem k tomu, že já preferuji moderní webové servery Litespeed, využívám nejčastěji řešení vyrovnávací paměti které poskytuje stejnojmenný plugin.

Zásadní dopad na rychlost načítání stránek má i vhodně zvolený webhosting. Jak jeho poskytovatel, typ i parametry. Pokud budete mít např. web s vysokou návštěvností na sdíleném hostingu s nedostatečnými parametry nebo špatně zvolevým typem serveru, nemůžete čekat nějakou zázračnou rychlost načítání webu.

Poskytovatel webhostingu by vám měl umožnit si zkontrolovat, jak využíváte prostředky, které máte k dispozici. Pokud často dosahujete jejich maxima, určitě je nutné uvažovat o vyšším plánu nebo typu (např. dedikovaném serveru), který to zvládne mnohem snáz.

Důležitá je i pověst poskytovatele, historie jeho výpadků, nastavení celé řady parametrů včetně typu serveru, který požívá atd. Podrobnější informace naleznete v mém dřívějším příspěvku věnovaném webhostingu.

CDN (Content Delivery Network) je síť serverů umístěných v různých koutech světa, které obsahují ve své vyrovnávací paměti kopii vašeho webu. Ve chvíli, kdy někdo požádá o zobrazení stránky z vašeho webu, nemusí se nahrávat vše z místa, kde je web uložený (klidně na druhé straně planety), ale použije se kopie, která je nejblíže. To výrazně zkrátí čas komunikace mezi prohlížečem klienta a serverem.

Z výše uvedeného je jasné, že CDN pocítí nejvíce klienti, kteří přistupují k vašemu webu z velké dálky. CDN všas může být výhodá i pro ostatní návštěvníky. CDN pomáhá rozložit zátěž na více serverů, které tak nejsou u často navštěvovaných webů tolik zatížené a i připojení nedalekého prohlížeče se může zrychlit. V případě výpadku webhostingu jsou navíc vaše stránky stále dostupné z CDN serverů a klienti tak výpadek vůbec nezaznamenají. To je také velká výhoda.

CDN servery navíc nabízí ochranu před hackerskými útoky typu DDoS (Distributed Denial-of-Service). Díky rozložení na více serverů se zátěž rozloží. Dopad útoku není tak významný a web může zůstat dostupný pro vaše návštěvníky. Určitě tedy doporučuji, pokud je to možné, CDN nasadit. Já s oblibou používám řešení quic.cloud. Pokud musíte nebo chcete použít něco jiného, řešení je celá řada. Oblíbený je např. i Cloudflare.

Optimalizace provedené u nových verzí technologií, které používáte, se často týkají i rychlosti. Např. novější verze PHP mohou být lépe odladěné a rychlejší. Stejně tak nasazení HTTP/2 nebo dokonce HTTP/3 povede k multiplexaci požadavků a následnému zrychlení načítání stránek. Dalším důležitým aspektem, proč technologie aktualizovat, je pochopitelně zabezpečení. To je ale nad rámec tohoto článku.

Na druhou stranu je vždy dobré se podívat, co vše se změnilo, popř. jestli nejsou s novou verzí nějaké problémy, na které si uživatelé ztěžují. Ne vždy se zadaří a některé novinky mohou vést i ke zpomalení. Je pak na zvážení, zda zvýšení zabezpečení stojí za snížení rychlosti či je to pouze chyba, která se s další verzí vyřeší a tato verze se prostě přeskočí.

Na internetu se vyskytuje celá řada nástrojů, které vám umožní si ověřit, jak rychlé vaše stránky jsou a co je zpomaluje. Mezi nejrozšířenější patří bezplatný nástroj PageSpeed Insight. Možné je ale použít další. Třeba GTmetrix nebo WebPageTest. Výhodou těchto nástrojů je, že vám řeknou nejen to, jak rychlý váš web je, ale hlavně kde jsou slabá místa a na co je zapotřebí se zaměřit a co zlepšit.

O tom, co znamenají jednotlivé výsledky v hodnocení pomocí PageSpeed Insight, plánuji samostatný článek.

Výše uvedený seznam věcí které mohou způsobit pomalé načítání stránek není určitě úplný. Je to ale seznam věcí, které běžně řeším a jejichž odstranění může velmi rychle pomoci. Rychlost webu je totiž důležitým aspektem, který pomáhá vytvářet dobrý dojem u vašich návštěvníků. Pokud budou vaše stránky pomalé, návštěvníci z nich budou odcházet, vyhledávače to zaznamenají, zhorší vaše ohodnocení a váš web se začne ve výsledcích vyhledávání propadat na horší příčky. To velmi rychle pocítíte na poklesu návštěvnosti. Rychlý web je proto velmi důležitý.