Jak zrychlit web: 10 kroků pro WordPress a Shoptet

Je pátek podvečer a majiteli e-shopu přijde e-mail od kolegy z marketingu: „Test rychlosti nám ukázal 34 bodů, to je katastrofa, musíme to hned řešit.“ Do neděle stihne napsat třem agenturám, jedna z nich slíbí nápravu za týden a cenu, která ho vyděsí víc než to samotné číslo. V pondělí se ukáže, že Google Search Console hlásí u webu „Dobré“ ve všech třech sledovaných metrikách. Web totiž nikdy pomalý nebyl. Jen se měřil špatný ukazatel.

Tahle situace se opakuje čím dál častěji, protože PageSpeed Insights je dnes první nástroj, který kdokoliv otevře, když chce zjistit, jak si web vede. Jenže číslo, které vyplivne, odpovídá na jinou otázku, než si většina lidí myslí. V tomhle článku si ukážeme, jak rychlost webu měřit správně, které kroky reálně pomůžou na WordPressu i na Shoptetu, a hlavně: kde je hranice, za kterou už honba za lepší rychlostí nemá smysl.

Co dělá web pomalým

Web dělá pomalým typicky kombinace pěti věcí, a skoro nikdy jen jedna z nich:

• Nekomprimované obrázky. Fotka rovnou z fotoaparátu nebo telefonu má klidně 5 až 8 MB. Na produktové stránce jich visí deset, a najednou stahujete desítky megabajtů dat kvůli obrázkům, které by v komprimované podobě zabraly desetinu.
• Skripty třetích stran. Google Analytics, Facebook pixel, live chat, recenzní widget, měřicí kód pro reklamy, video atd. Každý se stahuje a spouští zvlášť a každý blokuje na chvíli hlavní vlákno prohlížeče.
• Chybějící nebo špatně nastavená cache. Bez cache server skládá stejnou stránku pro každého návštěvníka znovu od nuly, i když se od minulého načtení nic nezměnilo.
• Neuklizený kód a přebytečné pluginy. WordPress s třiceti pluginy, z nichž polovina se roky nepoužívá, pořád táhne jejich CSS a JavaScript na každou stránku.
• Slabý hosting. Sdílený server s stovkami jiných webů, který v době špičky nestíhá odpovídat na požadavky. Bývá to nejméně častá příčina, ale taky jsem se s ní už setkal. Když je to serverem, optimalizační plugin s tím jen horko těžko pomůže.

Než se do řešení pustíte, vyplatí se ale ujasnit si jednu věc, na které stojí zbytek článku: číslo, které vidíte v PageSpeed Insights, a to, co skutečně zažívají vaši návštěvníci, jsou dvě různá měření.

Proč nízké číslo v PageSpeedu neznamená, že web hoří

PageSpeed Insights ve skutečnosti ukazuje dva rozdílné reporty pod jednou stránkou, a skoro nikdo si toho nevšimne. Nahoře je velké barevné skóre od 0 do 100. To se počítá v laboratoři: robot na Google serverech si otevře váš web na simulovaném, uměle zpomaleném mobilu s pomalým připojením a jedním jediným načtením bez cache. Je to zátěžový test, ne zpráva o tom, jak se webu daří u reálných lidí.

Je to podobné, jako byste měřili obsluhu v restauraci tak, že přijde jeden host do prázdné restaurace ve tři odpoledne. Číšník má na něj sto procent pozornosti a naměříte skvělý čas. V pátek večer, kdy je plno, ale obsluha jednoho stolu trvá jinak dlouho. Vaši skuteční hosté zažívají to druhé číslo, ne to první.

Druhá část reportu, často schovaná níž nebo úplně chybí, pokud web nemá dost návštěv, se jmenuje terénní data a pochází z Chrome User Experience Report (CrUX). To jsou skutečná čísla od reálných uživatelů Chromu, kteří na web přišli za posledních 28 dní. Google je hodnotí na takzvaném 75. percentilu, což znamená, že web projde jen tehdy, když je v pořádku alespoň tři čtvrtiny všech zobrazení, ne jen ta průměrná návštěva.

A tahle terénní data, ne laboratorní skóre, jsou to, co Google skutečně používá jako signál pro řazení ve vyhledávání. Najdete je v Google Search Console v sekci Core Web Vitals, případně přímo pod terénním reportem v PageSpeed Insights. Pokud tam vaše URL svítí zeleně, dělá web přesně to, co má.

Google sleduje tři konkrétní metriky, takzvané Core Web Vitals:

Pokud tyhle tři hodnoty vycházejí v Search Console zeleně, PageSpeed skóre 45 nebo 60 vás nemusí trápit. Jak jde vidět, Apadore má z dat od reálných uživatelů na všech 54 URL adres dobrou rychlost. Když však vložím web do PageSpeed Insights, vidím velké skóre 50 u výkonu. Díky informacím výše, se tím nemusím příliš trápit.

Naopak skóre 95 s červenými Core Web Vitals v terénu je horší situace, i když vypadá líp na první pohled.

10 kroků, které zaberou na WordPressu, pokud máte špatnou rychlost webu

Tyhle kroky zvládnete většinou sami, bez zásahu vývojáře:

1. Zkomprimujte obrázky. Plugin ShortPixel nebo Imagify převede obrázky do formátu WebP, který je oproti JPEG menší o 25 až 35 procent při srovnatelné kvalitě. U webu plného fotek je to nejrychlejší cesta k viditelnému zlepšení.
2. Nastavte správné rozměry obrázků. Fotku 4000 × 3000 px nemá smysl nahrávat pro náhled velký 400 × 300 px. Prohlížeč si stejně stáhne celý soubor, jen ho zmenší.
3. Zapněte lazy loading. Obrázky pod první obrazovkou se načtou, až když k nim návštěvník doscrolluje. WordPress od verze 5.5 to umí nativně, stačí zkontrolovat, že to šablona nevypíná.
4. Přidejte cachovací plugin. WP Rocket nebo zdarma WP Super Cache uloží hotovou verzi stránky, takže se nemusí skládat znovu při každé návštěvě. Nastavte platnost cache alespoň na 24 hodin.
5. Zpozděte skripty třetích stran. Plugin Perfmatters nebo Flying Scripts umí odložit načtení Google Analytics nebo Facebook pixelu až na chvíli, kdy uživatel se stránkou začne interagovat. Návštěvník to nepozná, web se ale vykreslí rychleji.
6. Vyčistěte databázi. WP-Optimize smaže staré revize příspěvků, spam komentáře a dočasná data, která se roky hromadí a zpomalují dotazy do databáze.
7. Zbavte se nepoužívaných pluginů. Každý aktivní plugin, i ten, co zrovna nic nedělá, přidává na pozadí kód, který se musí načíst. Pravidelná revize jednou za čtvrt roku stačí.
8. Minifikujte CSS a JavaScript. Autoptimize nebo součást cachovacího pluginu odstraní z kódu zbytečné mezery a komentáře a sloučí víc souborů do jednoho.
9. Zapněte CDN. Cloudflare v bezplatné verzi doručuje statický obsah (obrázky, styly) z serveru blízko vašeho návštěvníka, ne z jednoho místa na druhém konci republiky.
10. Zkontrolujte hosting. Pokud běžíte na nejlevnějším sdíleném tarifu a web má víc než pár stovek návštěv denně, tohle bývá strop, přes který se pluginy nedostanou.

10 kroků pro Shoptet a další e-shopová řešení

Shoptet má oproti WordPressu výhodu: hosting, základní cache i bezpečnost řeší za vás. Přesto zůstává dost nastavení, které je na vás, a právě tady se rozhoduje, jestli e-shop poletí, nebo bude jen tak tak stíhat.

1. Nahrávejte obrázky ve WebP. Shoptet formát podporuje, ale nedělá převod automaticky za vás při každém nahrání. U hromadného importu produktů to znamená připravit obrázky ve WebP ještě před nahráním do administrace.
2. Ohlídejte rozlišení produktových fotek. Pro galerii produktu stačí 1200 px na delší straně, pro náhled v kategorii 600 px. Dodavatelské fotky v plném rozlišení 4000 px zbytečně natahují každou stránku kategorie.
3. Zapněte lazy loading v nastavení šablony. Shoptet ho nabízí, ale u starších šablon není zapnutý automaticky. Zkontrolujte to v Nastavení e-shopu → Vzhled.
4. Omezte počet produktů na stránce kategorie. Katalog s 500 produkty a stránkováním po sto kusech znamená, že se najednou renderuje sto obrázků a popisků. Snížením na 24 nebo 48 produktů na stránku se kategorie viditelně zrychlí.
5. Zredukujte měřicí a marketingové skripty. Google Analytics 4, Facebook Pixel, Seznam Sklik, Heureka ověřeno zákazníky, Zboží.cz, Glami. Každý přidá vlastní kód. Sdružte, co jde, přes Google Tag Manager, a trackujte jen klíčové události (přidání do košíku, dokončená objednávka), ne každé kliknutí.
6. Nechte recenze a doporučené produkty načítat asynchronně. Widgety typu Heureka recenze nebo Zboží.cz hodnocení zbytečně blokují vykreslení stránky, pokud se načítají hned. Většina z nich nabízí variantu, která se dotáhne až po zobrazení hlavního obsahu.
7. Nepřehánějte to s live chatem na každé stránce. Skripty typu Smartsupp nebo Tawk.to váží desítky až stovky kilobajtů. Zvažte, jestli ho potřebujete na produktové stránce i na blogu, nebo stačí v pokladně a na kontaktu.
8. Zkontrolujte přesměrování. Přejmenované kategorie a smazané produkty, které přesměrovávají přes dva nebo tři redirecty za sebou, prodlužují každé načtení o zbytečné kolo komunikace se serverem. Shoptet ukáže historii přesměrování v administraci.
9. Využijte vestavěnou cache. Shoptet cachuje stránky automaticky, ale pokud používáte doplňky třetích stran, ověřte, že si s cachí nekolidují a nezobrazují starý obsah místo aktuálních cen.
10. Sledujte Core Web Vitals v Google Search Console. Shoptet vám sám neřekne, jak si vedete u reálných zákazníků. To zjistíte jedině přes Search Console, propojenou s vaší doménou.

Z praxe: proč je panika kolem skóre často jen planý poplach

Typický scénář, se kterým se u klientů setkáváme: e-shop přidá do několika týdnů za sebou recenzní widget, live chat a nový remarketingový pixel. PageSpeed skóre klesne z 65 na 40, majitel dostane e-mail od kolegy nebo agentury s vykřičníkem v předmětu.

Když se ale podíváme do Search Console, terénní data u stejného webu za poslední měsíc ukazují jen mírné zhoršení LCP, řádově o pár desetin sekundy, a všechny tři Core Web Vitals zůstávají v pásmu „Dobré“. Konverzní poměr se nezměnil. Návštěvníci si zhoršení fakticky nevšimli, protože se pohybovalo v rozmezí, které lidský mozek nevnímá jako čekání.

To neznamená, že na skripty třetích stran rezignujeme. Znamená to, že rozhodnutí, co odstranit a co nechat, se dělá podle toho, co ukazuje terénní report, ne podle barvy kolečka v PageSpeed Insights. Widget, který reálně prodlužuje LCP nad 2,5 sekundy, pryč jde. Widget, který jen snižuje krásné číslo v laboratorním testu, ale terénní data nehýbe, může klidně zůstat, pokud plní obchodní účel.

Kdy si od rychlosti webu můžete oddechnout

Honba za stovkou v PageSpeed Insights je většinou ztráta času. Jednoduchá textová stránka bez jediného skriptu snadno dosáhne 100 bodů, ale žádný reálný firemní web nebo e-shop takhle holý není a ani být nemá. Místo stovky sledujte tyhle čtyři věci:

• Core Web Vitals v Google Search Console svítí zeleně na většině URL, hlavně na produktových stránkách a v kategoriích, ne jen na homepage.
• LCP je pod 2,5 sekundy, INP pod 200 milisekund a CLS pod 0,1 na 75. percentilu, tedy u tří čtvrtin návštěv, ne jen v průměru.
• Konverzní poměr se nezhoršuje. Pokud web dál prodává stejně dobře jako předtím, není důvod honit další body jen kvůli číslu v reportu.
• Zlepšení mezi jednotlivými testy je v řádu jednotek bodů. Rozptyl 5 až 10 bodů mezi dvěma běhy stejného testu je normální šum, ne signál, že se něco pokazilo.

Jakmile tyhle čtyři body sedí, další optimalizace přináší čím dál míň za čím dál víc práce. Ten čas se vyplatí investovat jinam, třeba do SEO nebo do UX a UI.

Kdy je čas zavolat odborníky

Kroky výše zvládne majitel webu nebo interní marketér většinou za jedno odpoledne. Některé situace ale vyžadují vývojáře:

• Core Web Vitals v Search Console jsou dlouhodobě červené i po optimalizaci obrázků a zapnutí cache. Problém pak sedí hlouběji, typicky v kódu šablony nebo v databázových dotazech.
• Potřebujete upravit kritické vykreslovací cesty (critical CSS, přednačítání fontů, HTTP/2 nebo HTTP/3) – to jsou zásahy na úrovni serveru a kódu, ne nastavení v administraci.
• Databáze má miliony záznamů a i jednoduché dotazy trvají sekundy. To chce restrukturalizaci na úrovni vývoje, ne plugin na úklid.
• Web stojí na zastaralé šabloně a desetiletí nahromaděných úprav. V tu chvíli je optimalizace jako oprava auta, které by se vyplatilo spíš vyměnit. Nový web na míru bývá levnější než donekonečna látat starý.

Časté otázky

Jaké jsou hlavní příčiny pomalého načítání webových stránek?

Nejčastěji jsou to nekomprimované obrázky, skripty třetích stran jako analytika nebo live chat, chybějící cache a nedostatečný hosting. Obrázky bývají viníkem číslo jedna, protože na produktových a katalogových stránkách tvoří většinu přenášených dat.

Jaké pluginy doporučují experti pro zrychlení WordPressu?

Na obrázky ShortPixel nebo Imagify, na cache WP Rocket nebo zdarma WP Super Cache, na zpoždění skriptů třetích stran Perfmatters nebo Flying Scripts a na úklid databáze WP-Optimize. Žádný plugin ale nenahradí kvalitní hosting, pokud je server sám o sobě slabý a kvalitně postavený web.

Je nízké skóre v PageSpeed Insights vždycky problém?

Není. PageSpeed skóre vzniká v laboratorním testu na uměle zpomaleném zařízení a často se rozchází s tím, co zažívají skuteční návštěvníci. Rozhodující jsou terénní data v Google Search Console: pokud tam Core Web Vitals svítí zeleně, nízké číslo v PageSpeedu nemusíte řešit jako naléhavý problém.

Které firmy v Česku nabízí optimalizaci rychlosti webu?

Rychlost webu řeší specializovaní vývojáři i webové agentury, které stavějí weby na míru nebo e-shopy. My v Apadore optimalizaci rychlosti děláme jako součást správy webů na WordPressu i e-shopů na Shoptetu, obvykle jako navazující službu po spuštění nebo redesignu webu.

Jak mohu zrychlit web pomocí CDN služby?

CDN (Content Delivery Network) doručuje statický obsah, tedy obrázky, styly a skripty, z serveru geograficky nejbližšího vašemu návštěvníkovi místo z jednoho centrálního serveru. Cloudflare nabízí funkční bezplatnou verzi, kterou zapnete během pár minut a která navíc přidá základní ochranu proti útokům.

Závěr

Rychlost webu nakonec není o tom, kdo má hezčí zelené kolečko v PageSpeed Insights. Je o tom, jestli návštěvník počká na to, co hledá, a jestli se mu web nerozjíždí pod rukama v košíku. Změřte správná čísla, opravte to, co skutečně bolí, a zbytek nechte být.

Nejste si jistí, kde přesně váš web nebo e-shop ztrácí rychlost a co se vyplatí řešit jako první? Ozvěte se nám, podíváme se na vaše konkrétní metriky v Search Console, analyzujeme konverznost webu a řekneme vám, jestli stačí pár nastavení, nebo je čas na hlubší zásah.