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í.
![Cache (mezipaměť) prohlížeče Cache (mezipaměť) prohlížeče](https://www.vyzkumak.cz/blog/wp-content/uploads/2023/12/jak_zrychlit_webx2.png)
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.
![Obrázky a fonty Obrázky a fonty](https://www.vyzkumak.cz/blog/wp-content/uploads/2023/12/obrazky_a_fontyx2.png)
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.
![CSS a JavaScript CSS a JavaScript](https://www.vyzkumak.cz/blog/wp-content/uploads/2023/12/css_a_javascriptx2.png)
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.
![3. Cache (mezipaměť) prohlížeče](https://www.vyzkumak.cz/blog/wp-content/uploads/2024/01/cache_prohlizecex2-1024x485.png)
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.
![CDN (Content Delivery Network) Cache (mezipaměť) prohlížeče](https://www.vyzkumak.cz/blog/wp-content/uploads/2023/12/cdnx2.png)
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.
![Odpověď serveru Odpověď serveru](https://www.vyzkumak.cz/blog/wp-content/uploads/2023/12/odpoved_serverux2.png)
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í.