Jiří Macháček
Pocit frustrace, když se požadovaná stránka načítá déle, než by měla, určitě všichni znáte. Mnozí stránku už nikdy nenavštíví, a ti, kteří přetrpí dlouhý loading time, už na ni vstupují s negativním prvním dojmem a pokud ihned nenajdou to, co hledají, stránku opustí. Je tedy jasné, že rychlost webu je potřeba řešit. Lze ale dobré rychlosti docílit i bez profesionálních znalostí kódování a programování?
Proč je vůbec důležité se zabývat rychlostí?
Pokud čtete tento článek, nejspíš už tušíte, že rychlost je důležitý faktor v online světě. Jako lidé žijící v 21. století jsme na rychlosti závislí a nebaví nás čekat na informace. S každou sekundou čekání navíc se bounce rate (míra okamžitého opuštění) rapidně zvyšuje. U negativního dopadu na návštěvnost to ale nekončí.
Rychlost webu ovlivňuje i to, jestli uživatel vůbec dostane možnost se na stránku prokliknout z vyhledávání. Rychlost webu je totiž jedním ze SEO ovlivňujících faktorů. Ve zkratce, čím rychlejší web bude, tím pravděpodobněji obsadíte horní příčky výsledků vyhledávání (to samozřejmě neznamená, že to je jediné kritérium, ale je důležité). Zároveň má rychlost webu vliv i na cenu za proklik v reklamě na platformě Google.
Zjistěte příčinu
Pokud máte pomalý web, je důležité zjistit, proč je pomalý. Na to slouží mnoho webových nástrojů, nejznámějším je PageSpeed Insights od Google, který vám poskytne základní analýzu toho, co by se na stránce dalo zlepšit. Dobré je mít v pořádku metriky core web vitals. Pokud vás web vitals více zajímají, přečtěte si článek od vzhurudolu.cz, kteří téma podrobně popisují.
Nicméně neberte PageSpeed jako jedinou platnou normu. Samotné weby Googlu často nejsou podle této stránky plně optimalizované a místy najdete v analýze penalizaci za věci, které ovlivnit ani nemůžete, případně by vyřešení této penalizace znamenalo pro vaši stránku bolení na jiném místě. Proto doporučuji k PageSpeed přidat ještě jiné měření rychlosti webu, např. GTMetrix.
Pojďme se zaměřit na konkrétní tipy, jak rychlost vylepšit.
Primárně budu mluvit k uživatelům WordPressu, jelikož ti mají tuto práci díky všemožným pluginům nejjednodušší. Nicméně lze tyto tipy vztáhnout na jakýkoliv web.
Zaměřte se na obrázky a jiné mediální soubory
Často se stává, že se na web dostanou špatně optimalizované obrázky. Proto by měla proběhnout před umístěním na web nějaká komprese. Kompresi můžeme rozdělit na ztrátovou a bezztrátovou. Obrázky si s sebou často nesou přebytečná, zakódovaná data, která ovšem na jejich zobrazení nemají vliv. Na jejich odstranění existuje řada nástrojů, pro OSX mohu například doporučit jednoduchý program ImageOptim. Pokud web běží na WordPressu, lze použít pro kompresi některý z dostupných pluginů (např. WP Smush.it).
Ztrátová komprese na druhou stranu přímo ovlivňuje kvalitu obrázku. Ale ani ze ztrátové komprese nemusíte mít strach. Pokud se udělá dobře, může snížit datovou velikost obrázku o desítky procent a pouhým okem nemusí být znát.
Dále se můžete zaměřit přímo na rozměr obrázku. Pokud máte obrázek s rozměry 500×500px a jeho velikost upravujete pouze v CSS tak, aby byl o třetinu menší, zbytečně si přiděláváte problémy. Obrázek bude mít větší datovou velikost, než kdyby byl ve správném rozměru.
Kromě obrázků si dejte pozor na další mediální soubory, např. externí videa z YouTube. Pokud to není pro web klíčové, nikdy nenačítejte videa přímo bez interakce uživatele, ale použijte tzv. fasádu, tedy stažení videa, případně externích scriptů pro jeho spuštění, až po uživatelově interakci. Obvykle je touto interakcí kliknutí na video, ale může to být například i scroll, při kterém je video na stránce viditelné.
Lazy load je král
Obrázky, videa nebo jakýkoliv externí obsah můžete optimalizovat pomocí lazy loadu. Lazy loading je doslova pomalé načítání obsahu až ve chvíli, kdy ho uživatel vidí/potřebuje. Pokud máte dlouhou landing page, nemá smysl, aby si uživatel stahoval všechny obrázky najednou. Je totiž více než pravděpodobné, že si celou stránku neproscrolluje. A pokud ano, můžete mu servírovat obsah postupně. Optimalizujete tak nejen rychlost, ale i využití dat. Pro WordPress opět existuje řada pluginů, které vám s pomalým načítáním pomohou.
Minifikace HTML, CSS a Javascriptu
Zní to možná strašidelně, ale minifikace je jednoduchý proces, který určitě zvládnete. Na internetu existuje celá řada nástrojů, která vám po zadání kódu doslova jen vyplivne jeho minifikovanou verzi. Pokud běžíte na WordPressu, není nic jednoduššího, než si stáhnout nějaký dostupný plugin, který udělá tuto práci za vás, jako například Autoptimize.
Na pluginy ale pozor
Všeho moc škodí a pokud máte WordPress zamořený pluginy na kdejakou nesmyslnou funkci, možná se zamyslete nad tím, jestli některé z nich nelze řešit i jiným způsobem. Rozmyslete si, jestli všechny tyto funkce na webu opravdu potřebujete. Pluginy WordPress zpomalují.
Každý plugin je jiný a má jiný vliv na rychlost. Proto je potřeba se podívat do již zmíněného PageSpeed Insights (nebo jiného nástroje na analýzu rychlosti) a zjistit, jestli za pomalým webem nestojí náhodou jeden z nich. Mějte na paměti, že čistá instalace WordPressu sama o sobě pomalá není, tudíž za pomalými weby na tomto redakčním systému stojíme my, vývojáři.
Začněte měřit s mírou
Každý web je jiný, má různé potřeby a plní různé funkce. Neexistuje tedy ultimální pravidlo, kterého se držet, nebo plugin, který rychlost vyřeší za vás. Základem je vždy správná analýza. Pokud máte citelně pomalý web, prožeňte ho libovolným nástrojem pro analýzu rychlosti a definujte konkrétní problémy, které je potřeba vyřešit.
Pamatujte vždy na to, že cílem není dosažení 100 bodů v PageSpeed Insights, ale poskytnutí kvalitního uživatelského zážitku návštěvníkům webové stránky. Pokud se rozhodnete optimalizovat na vlastní pěst, konzultujte provedené změny vždy s designérem/webmasterem/programátorem.