Jak zrychlit web - průvodce nástrojem PageSpeed

Rychlost webu není jen otázkou uživatelského komfortu - je to přímý faktor pro hodnocení v Googlu. Od roku 2021 jsou metriky rychlosti webu od Googlu součástí hodnoticího algoritmu a Google PageSpeed Insights je nástroj, který ukazuje, jak si váš web vede. V tomto průvodci projdeme konkrétní kroky ke zlepšení vašeho skóre.

Pochopení metrik PageSpeed

Google PageSpeed Insights měří šest klíčových metrik, které dohromady tvoří celkové skóre. Largest Contentful Paint (LCP) měří, jak rychle se načte největší viditelný prvek na stránce - ideálně do 2,5 sekundy. Interaction to Next Paint (INP) měří, jak rychle stránka reaguje na interakce uživatele - ideálně do 200 milisekund.

Cumulative Layout Shift (CLS) měří vizuální stabilitu stránky - tedy jak moc se prvky během načítání posouvají. Ideální hodnota je pod 0,1. First Contentful Paint (FCP) měří, kdy se na obrazovce objeví první obsah. Time to First Byte (TTFB) měří, jak rychle server odpoví na požadavek. Total Blocking Time (TBT) měří, jak dlouho je blokováno hlavní vlákno.

Optimalizace obrázků - největší dopad

Obrázky jsou nejčastější příčinou pomalého webu. Neoptimalizovaná fotka o velikosti 5 MB může načítání stránky zpomalit o několik sekund. Co s tím dělat?

Za prvé, používejte moderní formáty obrázků. Formát WebP nabízí o 25-35 % menší velikost než JPEG při stejné kvalitě. AVIF jde ještě dál s o 50 % menší velikostí, nemá ale plnou podporu ve všech prohlížečích. Pro WordPress automaticky převedou obrázky do WebP pluginy ShortPixel nebo Imagify.

Rozměry obrázku musí odpovídat velikosti zobrazení. Pokud se obrázek zobrazuje ve velikosti 800×600 pixelů, nemá smysl načítat originál o rozměrech 4000×3000. Pro responzivní obrázky, které se přizpůsobí velikosti obrazovky, použijte atribut srcset.

Klíčová je komprese - pro většinu webových obrázků je naprosto dostačující kvalita 80-85 %. Rozdíl mezi kvalitou 85 % a 100 % je pouhým okem nepostřehnutelný, ale rozdíl ve velikosti souboru může být obrovský.

Lazy Loading - načítejte jen to, co je vidět

Lazy loading odkládá načítání obrázků a dalších zdrojů, dokud k nim uživatel nedoscrolluje. To dramaticky snižuje čas prvotního načtení stránky, protože prohlížeč nemusí stahovat všechny obrázky najednou.

V moderním HTML je lazy loading triviálně jednoduchý - stačí k tagům img přidat atribut loading="lazy". CMS platforma WordPress přidává lazy loading ke všem obrázkům automaticky od verze 5.5. Jen pozor, abyste lazy loading neaplikovali na obrázky v části stránky „nad ohybem" (hero obrázky, logo), protože to může negativně ovlivnit metriku LCP.

U iframů (YouTube videa, Mapy Google) je lazy loading obzvlášť důležitý, protože tyto zdroje mohou být extrémně velké. Místo přímého vložení zvažte zobrazení náhledového obrázku s tlačítkem přehrání, který iframe načte až po kliknutí.

Cache - nenačítejte totéž dvakrát

Cache prohlížeče umožňuje ukládat statické zdroje (obrázky, CSS, JavaScript) přímo v prohlížeči návštěvníka. Když uživatel váš web navštíví znovu, tyto zdroje se načtou z jeho počítače místo ze serveru - okamžitě.

Na BeoHosting s pokročilým serverem LiteSpeed je cache mimořádně efektivní. LiteSpeed Cache pro WordPress automaticky vytváří statické HTML verze vašich stránek, takže odpadá potřeba zpracování PHP a dotazů do databáze při každém požadavku.

Pro různé typy souborů nastavte hlavičky Cache-Control. Pro obrázky, CSS a JS soubory nastavte dlouhou dobu platnosti cache (např. 1 rok). Pro HTML stránky použijte kratší dobu nebo revalidaci, aby se změny obsahu projevily rychle.

Minifikace CSS a JavaScriptu

Minifikace odstraňuje z CSS a JavaScript souborů zbytečné mezery, komentáře a formátování, čímž zmenšuje jejich velikost. U běžného webu může minifikace zmenšit velikost CSS o 10-30 % a JavaScriptu o 20-40 %.

Pro WordPress má plugin LiteSpeed Cache vestavěnou minifikaci a slučování CSS/JS souborů. Vynikající alternativou je Autoptimize. U slučování JavaScript souborů buďte opatrní, protože může způsobit konflikty mezi pluginy - po zapnutí vše důkladně otestujte.

Technika Critical CSS extrahuje CSS potřebné k vykreslení obsahu „nad ohybem" a vkládá ho přímo do HTML, zatímco zbytek CSS se načte asynchronně. To dramaticky zlepšuje metriky FCP a LCP.

Serverové optimalizace

Volba poskytovatele hostingu a konfigurace serveru má na rychlost webu obrovský vliv. BeoHosting používá server LiteSpeed Enterprise, NVMe SSD disky a CloudLinux pro optimální výkon. Podívejte se na naše hostingové programy.

Komprese GZIP nebo Brotli zmenšuje velikost přenášených dat o 60-80 %. Na BeoHosting je komprese Brotli automaticky zapnutá pro všechny weby. Protokoly HTTP/2 a HTTP/3 umožňují paralelní načítání více zdrojů přes jediné spojení, což výrazně zrychluje načítání stránek s mnoha obrázky, styly a skripty.

PHP OPcache ukládá zkompilovaný PHP kód do paměti, takže odpadá potřeba opětovného parsování a kompilace při každém požadavku. Na BeoHosting je OPcache automaticky zapnutý a optimálně nastavený.

Optimalizace fontů

Webové fonty mohou načítání stránky výrazně zpomalit. Google Fonts, jakkoli jsou populární, vyžadují další DNS dotazy a stahování z externího serveru. Zvažte self-hosting fontů - stáhněte si soubory fontů a servírujte je z vlastního serveru.

V CSS použijte font-display: swap, aby byl text okamžitě viditelný v systémovém fontu, dokud se webový font nenačte. Omezte počet variant fontu - místo načítání 6 různých řezů použijte 2-3, které skutečně potřebujete. Klíčové fonty si přednačtěte pomocí link rel="preload" pro rychlejší načítání.

Optimalizace databáze

U WordPress webů se databáze může stát úzkým hrdlem výkonu, pokud se pravidelně neudržuje. Mažte revize příspěvků starší 30 dnů, spamové komentáře, přechodná data (transients) a nepoužívaná metadata. Plugin WP-Optimize dokáže databázi udržovat automaticky.

Pro ukládání výsledků častých databázových dotazů použijte objektovou cache (Redis nebo Memcached). Na BeoHosting je Redis dostupný v programech Business a Premium a dokáže dramaticky zkrátit dobu generování stránek u dynamických webů.

CDN - Content Delivery Network

CDN rozmisťuje statické zdroje vašeho webu na servery po celém světě, takže návštěvníci načítají obsah z nejbližšího serveru. Pro weby s převážně českým publikem není CDN kriticky důležitá, protože server BeoHosting je už v regionu. Pro weby s globálním publikem ale CDN může rychlost výrazně zlepšit.

Cloudflare nabízí bezplatný CDN program, který zahrnuje ochranu proti DDoS útokům a základní optimalizaci. Integrace s WordPressem je jednoduchá a nevyžaduje technické znalosti.

Praktický kontrolní seznam optimalizace PageSpeed

Komprimujte obrázky a převeďte je do WebP. Zaveďte lazy loading pro obrázky pod ohybem. Zapněte cache prohlížeče s dlouhou platností pro statické zdroje. Minifikujte CSS a JavaScript soubory. Pro maximální výkon používejte PHP 8.4. Zapněte kompresi GZIP nebo Brotli. Optimalizujte fonty a omezte počet variant. Pravidelně čistěte databázi. Používejte cache stránek (LiteSpeed Cache pro WordPress). Minimalizujte počet externích skriptů a zdrojů.

Závěr

Zlepšování skóre PageSpeed je iterativní proces - nečekejte, že skóre 100/100 dosáhnete naráz. Nejprve se zaměřte na největší problémy, které PageSpeed Insights označí, obvykle jsou to obrázky a JavaScript. S BeoHosting už máte optimalizovanou serverovou stranu, takže se můžete soustředit na front-end optimalizace. Usilujte o zelené skóre (90+) jak pro mobilní, tak pro desktopovou verzi vašeho webu.