Proč je rychlost vašeho webu tak důležitá? V záplavě informací dnešní doby se udržení pozornosti návštěvníků stává stále těžší. Rychlost načítání webu je tak jedním z dostupných řešení.
Zároveň je metodou pro zlepšení vašeho SEO. Rychlé načítání stránek je jedním z faktorů, které vyhledávače jako Google používají při hodnocení a řazení stránek ve výsledcích vyhledávání.
Rychlost načítání stránek je tedy jednou z klíčových UX disciplín. Zde je 5 tipů, na co se zaměřit.
1. Obrázky a fonty
Obrázky a fonty mohou výrazně zpomalit načítání vašeho webu. Pro obrázky je doporučeno využít automatickou optimalizaci během deploymentu (nasazování aplikace) s nástroji jako TinyPNG nebo ImageOptim. Nástrojů pro optimalizaci je velké množství, tak jejich výběr a implementaci rozhodně nechte na vašich vývojářích.
Pro kontrolu aktuálního stavu můžete použít PageSpeed Insights či GTMetrix. Pokud chcete být důkladní, můžete se podívat na stránku v nástrojích pro vývojáře v Google Chrome. V záložce „Network“ se vám zobrazí veškeré zdroje, které vaše stránka načítá. Snadno si je seřadíte dle velikosti a ty největší kousky vhodné pro optimalizaci vám vyskočí samy.
Ohledně fontů je ideální využít systémové a úplně se vyhnout jejich načítání z externích zdrojů. Toto rozhodnutí může významně zrychlit načítání stránek, protože se eliminuje potřeba stahování fontů, což může být časově náročné. Pokud bojujete s Core Web Vitals a konkrétně metrikou CLS, mohou být fonty hlavní příčinou problému. Pokud je pro vás využití vlastního/externího fontu důležité, optimalizujte soubor, aby docházelo k načtení jen potřebných řezů a znaků pro jazykové mutace vašeho webu.
Odhad pracnosti: Nízká až střední – automatizace může ušetřit čas, ale vyžaduje počáteční nastavení.
2. CSS a JavaScript
Nadbytečný a neefektivní kód může způsobit, že vaše stránky se načítají pomaleji. Používejte nástroje jako Minify nebo UglifyJS pro zmenšení velikosti vašich CSS a JS souborů. Tím dosáhnete rychlejšího načítání. Rozdělení souborů na komponenty (hlavička, karta produktu, kontaktní formulář, …) a načítání pouze potřebných částí je optimálním řešením. To zajistí velké úspory, jelikož každá stránka si načítá pouze data, se kterými pracuje.
Když budete mít rozděleno, můžete se zamyslet, které komponenty bude s velkou pravděpodobností potřebovat další stránka vašeho webu a načítat soubory předem. Například v e-shopu může stránka výpisu produktů po načtení začít na pozadí načítat soubory nutné pro zobrazení detailu produktu, která se pak dokáže po kliknutí na produkt načíst výrazně rychleji.
Podrobnou analýzu a řešení nechte na vašich vývojářích. PageSpeed Insights v této oblasti často poukazují na fiktivní a neřešitelné problémy kterými byste jen marnili čas. Za zmínku stojí také technologie „Early Hints“, pomocí které může váš server informovat prohlížeč o důležitých souborech předem a urychlit tak celkové načtení.
Odhad pracnosti: Střední – vyžaduje analýzu kódu a případnou restrukturalizaci.
3. Cache (mezipaměť) prohlížeče
Mezipaměť prohlížeče umožňuje uživatelům rychleji načítat stránky při opakovaných návštěvách. Na vaší straně jen nastavíte jaké typy souborů si má držet prohlížeč uživatele v paměti a jak dlouho. Když nahráváte úpravy na web, nesmíte zapomenout, že návštěvníci mohou mít soubory v mezipaměti v jeho starší verzi. To je nutné ošetřit ve vašem deploymentu.
PageSpeed Insights či GTMetrix vám pomohou identifikovat, jak efektivně využíváte cache prohlížeče. Podrobnější analýzu doporučujeme nechat na vašich vývojářích.
Odhad pracnosti: Nízká – většinou jde o jednoduché nastavení na serveru nebo ve webových aplikacích.
4. CDN (Content Delivery Network)
CDN pomáhá zrychlit načítání obsahu tím, že jej distribuuje z různých lokací po celém světě. Návštěvník si tak vaše data stahuje ze serveru, který je nejblíže jeho aktuální poloze. To je zvlášť užitečné pro weby s mezinárodním publikem. Nástroje jako Cloudflare nebo Amazon CloudFront vám zajistí řešení na klíč. Tím, že velkou část vašeho obsahu stahují uživatelé přímo z CDN, šetříte výkon vašeho serveru. Tyto nástroje navíc často obsahují „Web application Firewall“, který řeší zabezpečení vašeho webu proti nejběžnějším útokům.
Odhad pracnosti: Střední – vyžaduje nastavení a možnou integraci s vaší infrastrukturou.
5. Odpověď serveru
Ač uvádíme jako poslední, často je čas odpovědi serveru tím největším faktorem, který zpomaluje načtení stránky. Je to doba od požadavku až po předání stránky vašemu prohlížeči k načtení. U statických webů je minimální. Obecně platí, že čím složitější je aplikace, tím delší je potřebná doba k vygenerování stránky.
Vyplatí se investovat do kvalitního hostingu. Výkonný hardware dokáže velkou část problémů vyřešit bez náročných programových zásahů.
Mějte k dispozici grafy výkonu vašeho serveru a sledujte, jak se pohybuje vytížení při běžném provozu a ve špičce.
Pravidelně byste měli kontrolovat výkon vašich databázových dotazů. Toto je disciplína, kterou již musíte nechat na vašem vývojáři. K dispozici jsou nástroje, které umožní analyzovat aplikace i třetí stranou, jako například Sentry či Blackfire.
Průběžné měření rychlosti odezvy zajistí většina online aplikaci na monitoring dostupnosti. My používáme například uptimerobot.com a pagespeed.cz.
Odhad pracnosti: Střední až vysoká – závisí na složitosti vaší infrastruktury a databáze.
Závěrem
Pamatujte, že tyto kroky nejsou jednorázové úkoly, ale spíše součást neustálého procesu zlepšování a udržování vašeho webu. Pravidelná kontrola a údržba zajišťují, že váš web zůstane rychlý a efektivní. My používáme pro průběžné měření český nástroj pagespeed.cz.
V denním shonu je velmi snadné na tuto kontrolu zapomenout a dlouhé měsíce se webu nevěnovat. Doporučujeme jednou měsíčně či kvartálně kontrolovat, jak na tom váš web je. V Google Search Console se zaměřte se na Core Web Vitals. Dále se podívejte v PageSpeed Insights na report všech vašich důležitých stránek. To můžete i automatizovat na pagespeed.cz, kde si zdarma vložíte všechny vaše weby a jejich klíčové sekce.
Nyní už zbývá jen začít. Ať jsou vaše weby rychlé jako vítr a návštěvníci se na nich netrápí.