Jak zrychlit web: praktický checklist pro WordPress, Shoptet i vlastní weby

Proč řešit rychlost webu a kde začít

Pomalý web stojí zákazníky. Člověk, který na mobilu hledá kavárnu v Brně s otevřeno teď, nečeká, až se načte desetimegový slider. Rychlost je navíc jeden ze signálů, které Google používá při hodnocení stránek, a robotům vyhledávačů i AI asistentů rychlý server usnadní procházení webu.

Než cokoli změníte, změřte výchozí stav. Otevřete PageSpeed Insights, vložte adresu úvodní stránky a jedné typické podstránky (produkt, služba, článek) a výsledky si uložte. Co znamenají metriky LCP, INP a CLS a proč se laboratorní a reálná data liší, vysvětluje článek o Core Web Vitals. Tady se soustředíme na to, co s výsledky udělat.

Jak najít, co web brzdí

PageSpeed Insights pod výsledkem vypíše doporučení a seřadí je podle odhadované úspory. Čtěte je jako vodítko, ne jako úkolník: některá se týkají kódu, který neovlivníte. Ještě názornější je panel Network (Síť) ve vývojářských nástrojích prohlížeče Chrome. Načtěte stránku, seřaďte soubory podle velikosti a uvidíte, co je největší. Na firemních webech to bývá téměř vždy obrázek, video na pozadí nebo balík skriptů od externí služby.

Checklist: co zrychlí web nejvíc

Obrázky: nejrychlejší výhra

Na většině firemních webů tvoří obrázky největší část stahovaných dat. Fotka nahraná přímo z telefonu má často 3 až 5 MB, přitom na stránce se zobrazuje v šířce 800 pixelů.

1. Zmenšete rozměry. Obrázek nemá být širší, než kolik se ho reálně zobrazí. Pro displeje s vysokým rozlišením stačí zhruba dvojnásobek zobrazované šířky.
2. Použijte moderní formát. WebP bývá výrazně menší než JPEG při stejné kvalitě, AVIF ještě o něco menší. Všechny současné prohlížeče oba formáty podporují.
3. Nastavte responzivní varianty. Atribut srcset nabídne prohlížeči několik velikostí a telefon si stáhne tu menší. WordPress to dělá automaticky.
4. Líně načítejte jen to, co je pod okrajem. Atribut loading="lazy" odloží obrázky níž na stránce. Hlavní obrázek nahoře ale líně načítat nesmíte, jinak zpomalíte LCP.
5. Uveďte rozměry. Atributy width a height zabrání poskakování obsahu při načítání.

Když už obrázky upravujete, doplňte rovnou i popisky. Proč a jak je psát, najdete v článku o alt textu obrázků.

Cache, CDN a hosting

Cache

Bez cache server při každé návštěvě znovu skládá stránku z databáze. Cache celých stránek uloží hotové HTML a další návštěvníci ho dostanou okamžitě. Cache v prohlížeči (hlavičky Cache-Control) zajistí, že se styly, skripty a obrázky při další návštěvě nestahují znovu. Pozor jen na stránky, které cachovat nechcete: košík, pokladna, přihlášení.

CDN

CDN (Content Delivery Network, síť serverů po světě) doručuje soubory z místa nejbližšího návštěvníkovi. Pro web s návštěvníky jen z Česka a dobrým českým hostingem je přínos menší, ale CDN odlehčí serveru a často přidá kompresi a moderní protokoly. Cloudflare nabízí bezplatný plán. Po zapnutí zkontrolujte, že firewall neblokuje roboty vyhledávačů a AI, které chcete na webu mít.

Hosting

Pokud server odpovídá na první požadavek déle než zhruba půl sekundy i s cache, problém je nejspíš v hostingu. Zeptejte se poskytovatele na verzi PHP, podporu HTTP/2 nebo HTTP/3 a na to, kolik webů sdílí jeden server. Nejlevnější sdílený hosting bývá první věc, kterou se vyplatí změnit.

Ověřte také, že server posílá textové soubory (HTML, CSS, JavaScript) komprimované pomocí gzip nebo Brotli. U většiny hostingů je komprese zapnutá automaticky, ale u starších nebo ručně spravovaných serverů občas chybí a HTML pak putuje k návštěvníkovi několikanásobně větší.

Skripty třetích stran a fonty

Každý kód, který na web vložíte zvenku, si stahuje vlastní soubory a zatěžuje procesor návštěvníka. Typický web autoservisu v Liberci může mít najednou Google Analytics, Meta Pixel, chatovací okno, mapu, widget s recenzemi a nástroj na nahrávání návštěv. Každý zvlášť je malý, dohromady zpomalí hlavně reakci stránky na kliknutí.

• Udělejte inventuru. Projděte kódy v hlavičce, ve Správci značek Google (Google Tag Manager) a v nastavení šablony. Co nikdo nevyhodnocuje, smažte.
• Odkládejte. Skripty, které nejsou nutné pro první zobrazení, načítejte s atributem defer nebo až po souhlasu s cookies.
• Mapy a videa načtěte až na kliknutí. Místo vloženého přehrávače nebo mapy ukažte náhledový obrázek a skutečný obsah načtěte, až o něj návštěvník projeví zájem.
• Fonty. Používejte jen řezy, které opravdu potřebujete, ve formátu WOFF2. Pro češtinu stačí znaková sada latin a latin-ext. Vlastní hostování fontů ušetří spojení na cizí server a nastavte font-display: swap, aby se text ukázal hned.

Jak zrychlit WordPress a Shoptet

WordPress

WordPress sám o sobě pomalý není. Pomalým ho dělají těžké šablony, desítky pluginů a hosting bez cache. Postup, který obvykle funguje:

1. Spočítejte pluginy. U každého si položte otázku, jestli ho opravdu potřebujete. Deaktivovaný plugin smažte, ať nezůstává jako bezpečnostní riziko.
2. Nasaďte jeden cache plugin. Například WP Super Cache, W3 Total Cache nebo LiteSpeed Cache (ten dává smysl na serverech LiteSpeed). Dva cache pluginy současně si navzájem škodí.
3. Optimalizujte obrázky pluginem, který při nahrání zmenší a převede fotky do WebP. Starší obrázky převeďte hromadně.
4. Zvažte náhradu stavitele stránek. Těžké page buildery přidávají hodně kódu na každou stránku. U nového webu volte lehkou šablonu s blokovým editorem.
5. Aktualizujte PHP na verzi, kterou hosting a vaše pluginy podporují. Novější verze bývají znatelně rychlejší.
6. Pročistěte databázi od starých revizí a spamových komentářů, zvlášť u webů, které běží roky.

SEO pluginy jako Yoast SEO nebo Rank Math web zásadně nezpomalují, ale ani nezrychlují. Celkové nastavení WordPressu pro vyhledávače popisuje článek SEO pro WordPress.

Shoptet a jiné pronajaté e-shopy

Na Shoptetu a podobných platformách server, cache ani verzi PHP neovlivníte, o to se stará provozovatel. Rychlost ale i tak z velké části máte v rukou:

• Obrázky produktů a bannerů. Nahrávejte fotky v rozumném rozlišení a velikosti. Úvodní slider s pěti velkými bannery je častý důvod pomalé úvodní stránky.
• Doplňky a vložené kódy. Každý doplněk a každý kód vložený do hlavičky nebo patičky přidává váhu. Pravidelně je procházejte.
• Šablona a úpravy vzhledu. Vlastní CSS a JavaScript od externích kodérů mohou být neoptimalizované. Nechte si je zkontrolovat.
• Počet produktů na stránce kategorie. Stovky produktů na jedné stránce s velkými náhledy znamenají hodně dat najednou.

Praktický postup pro e-shop s kávou na Shoptetu: změřte úvodní stránku, jednu velkou kategorii a jeden produkt. Pak dočasně vypněte doplněk nebo kód, u kterého si nejste jistí přínosem, a test zopakujte. Když se výsledek výrazně zlepší, víte, kde je problém, a můžete se rozhodnout, jestli za svou cenu stojí. Stejně postupujte u vložených recenzních widgetů a chatů.

Další nastavení e-shopu pro vyhledávače najdete v článcích SEO pro Shoptet a SEO pro e-shop.

Časté chyby při zrychlování

• Víc optimalizačních pluginů najednou. Dva pluginy, které oba slučují a minifikují soubory, umí web rozbít a výsledek zhoršit.
• Agresivní slučování JavaScriptu. Ušetří pár požadavků, ale může přestat fungovat košík nebo formulář. Po každé změně web proklikejte.
• Cache na košíku a pokladně. Zákazník pak vidí cizí obsah košíku nebo starou cenu.
• Líné načítání všeho. Včetně loga a hlavního obrázku, což LCP naopak zhorší.
• Optimalizace jen úvodní stránky. Zákazníci často přicházejí rovnou na produkt nebo článek. Měřte i podstránky.
• Zrychlování přes skrývání obsahu. Text, který se načte až JavaScriptem, nemusí vidět roboti, kteří JavaScript nespouštějí. Víc v článku o JavaScriptu a SEO.

Jak ověřit výsledek

Po každé větší změně spusťte znovu PageSpeed Insights na stejných adresách a porovnejte s uloženým výchozím stavem. Laboratorní test ukáže změnu hned, reálná data v Search Console se přepočítají zhruba za 28 dní. Vyzkoušejte web i na starším telefonu přes mobilní data, protože to je situace mnoha vašich zákazníků. A sledujte i obchodní čísla: pokud po zrychlení klesne počet lidí, kteří odejdou hned z první stránky, oprava splnila účel bez ohledu na skóre.

Základní technickou kontrolu dělá i bezplatný sken Zmínky: změří rychlost odpovědi serveru a velikost HTML a upozorní na problémy s mobilním zobrazením, spolu s kontrolami SEO a připravenosti pro AI.