Optimalizace Google metrik pro PrestaShop: Proč to není jen o jednom „čudlíku“ a jak na kompromisy v praxi

Zrychlení e-shopu a dosažení skvělých výsledků v nástroji Google PageSpeed Insights je dnes jedním z častých požadavků majitelů e-shopů. Správně optimalizovaný web totiž přímo ovlivňuje konverzní poměr, cenu za proklik v reklamách a hraje klíčovou roli v SEO, pokud budujete organickou návštěvnost z fulltextu.

Mnoho klientů se však domnívá, že optimalizace rychlosti je rychlý zásah – například se nainstaluje jeden modul a web „zezelená“. Realita u platformy PrestaShop je ale úplně jiná. Zlepšení metrik je komplexní skládačka, která vyžaduje sérii více kroků, hlubokou analýzu a velmi často také rozumné kompromisy.

Část 1: Skládačka rychlosti aneb co všechno ovlivňuje vaše skóre?

Dosáhnout dobrých výsledků znamená provázat tři hlavní pilíře e-shopu. Pokud selže jeden z nich, performance webu se propadne.

• Kvalitní hosting (Optimalizace backendu): Sebelepší kód nezachrání e-shop, který běží na přetíženém nebo nevhodně nastaveném hostingu. Rychlá odezva serveru a správná konfigurace (např. cache, komprese, verze PHP) jsou absolutním základem.
• Optimalizovaná šablona (Front-end): Šablona diktuje, jak moc je web „těžký“. Záleží na tom, jak čisté je CSS, jak se načítají fonty, zda šablona obsahuje zbytečně velkou strukturu kódu (velikost DOM, mimochodem zde negativně vychází různé vizuální editory, například Elementor) a jak efektivně nakládá s Javascriptem.
• Množství a kvalita modulů: Každý modul navíc přidává další zátěž, pro metriky to často platí například pro moduly na marketing a analytiku.

Proč dynamický e-shop málokdy mívá mobilní metriky „v zeleném“?

Google je extrémně přísný na mobilní metriky, protože simuluje načítání na průměrném (často slabším) mobilním zařízení a na pomalejším 3G/4G připojení. Na stolním počítači (PC) snesou metriky podstatně více a s dobrým hostingem se zde lze běžně dostat přes 80 bodů.

U mobilních zařízení je ale realita s PrestaShopem taková, že pokud se dostanete přes 50 nebo 60 bodů, jedná se o velmi dobrý výsledek.

Proč? Kvůli externím skriptům třetích stran.
Moduly, které do webu přes Javascript dotahují externí obsah, ze své podstaty blokují vykreslení stránky. Hovoříme o věcech jako:

• Google reCAPTCHA (dnes nutné základní zabezpečení formulářů).
• Google Tag Manager (GTM)
• Facebook Pixel / Instagram feedy
• Ověřeno zákazníky od Heureky, Google Recenze
• Live chaty a zákaznická podpora

Tyto skripty fyzicky neběží na vašem serveru. Váš web musí počkat, až se stáhnou z cizích serverů, což Google nekompromisně penalizuje.

Rychlost vs. Funkce: Nebuďte otrokem metrik

Optimalizace pro mobilní telefony často vyžaduje vypínání některých funkcí (např. těžkých Javascriptových sliderů, animací, odložení načítání chatovacích oken). Zde přichází čas na byznysové rozhodnutí. Někteří klienti kompromisy nechtějí – potřebují mít na homepage všechny rotující bannery a chaty hned na startu. Pak je lepší smířit se s horším skóre a raději investovat do placené reklamy, než se stát „otrokem metrik“. Pokud však stavíte byznys na organickém vyhledávání, optimalizace smysl dává.

Jak probíhá reálná optimalizace PrestaShopu?
Profesionální optimalizace není jeden rychlý zásah, ale skládá se z mravenčí práce a série mnoha drobných vylepšení. Každé řešení e-shopu je naprosto individuální, proto je základem kompletní a hloubková revize webu jako celku (hosting, šablona, moduly).

V praxi proces zahrnuje kombinaci těchto kroků: analýza šablony, profiling modulů, optimalizace serveru a nastavení cache, odstranění blokujícího JavaScriptu (defer/async), úpravy těžkých sliderů, optimalizace a lazy loading obrázků, preload důležitých prvků, úpravy CSS/JS, optimalizace fontů, omezení vlivu externích služeb a precizní řešení stability obsahu (CLS). Výsledkem je na míru navržený balík úprav pro váš konkrétní e-shop.

Více o této službě a orientační ceně se dozvíte na stránce Optimalizace rychlosti Google PageSpeed Insights na premium-templates.eu.

Část 2: Technické okénko – Metriky Core Web Vitals a nástroje pro jejich vylepšení

Abychom věděli, co přesně na PrestaShopu opravujeme, musíme rozumět řeči, kterou k nám Google mluví. Než se ponoříme do samotných metrik, je dobré zmínit hlavní diagnostický nástroj.

Nástroje pro měření a optimalizaci

Základním kamenem pro analýzu výkonu je Google PageSpeed Insights. Tento bezplatný nástroj od Googlu nám poskytuje klíčová data o tom, jak si web vede. Ukazuje oddělené výsledky pro mobilní telefony a počítače, vyhodnocuje uživatelské metriky Core Web Vitals, generuje konkrétní doporučení ke vylepšení kódu, odhaluje skripty blokující vykreslení a detailně vypisuje velikost stahovaných zdrojů.

Hlavní Google metriky, které musíte znát

1. LCP (Largest Contentful Paint) – Nejdůležitější prvek viditelné části Limit: < 2.5s

• Co to je: Měří rychlost načtení hlavního (největšího) obsahu na stránce. Zpravidla jde o hlavní obrázek produktu, velký banner na homepage nebo hlavní nadpis H1.
• Co ho ovlivňuje a jak ho zlepšit: LCP nejvíc drtí rychlost serveru, obří neoptimalizované bannery, slider na homepage a blokující CSS. Prohlížeči pomáhá rychlý hosting, správná komprese obrázků a včasný preload (přednačtení) klíčového LCP obrázku ještě předtím, než prohlížeč zpracuje zbytek stránky.
• Pozor na Lazy Loading: Líné načítání (lazy loading) u obrázků pod první obrazovkou velmi pomáhá. Pokud ho ale omylem aplikujete na hlavní produktový obrázek (LCP element), načítání tím drasticky zpomalíte.

2. CLS (Cumulative Layout Shift) – Vizuální stabilita stránky Limit: < 0.1

• Co to je: Měří „poskakování“ a nechtěné posuny obsahu během načítání stránky. Určitě to znáte – chcete na něco kliknout, ale najednou shora skočí banner nebo cookie lišta a vy kliknete vedle.
• Co ho ovlivňuje a jak ho zlepšit: CLS nejčastěji způsobují obrázky a bannery bez jasně definovaných rozměrů, dynamicky vkládané reklamy, widgety třetích stran, vyskakující cookie lišty a opožděné načítání fontů. V HTML/CSS je nutné striktně definovat rozměry (šířku a výšku) pro všechny asynchronní prvky včetně obrázků (<img>) a reklamních pozic, aby prohlížeč dopředu rezervoval správné místo.

3. INP (Interaction to Next Paint) – Rychlost odezvy na akci uživatele Limit: < 200ms

• Co to je: Klíčová metrika uživatelské přívětivosti, která měří zpoždění všech interakcí (kliknutí na tlačítko „Do košíku“, rozbalení menu, filtrace) po celou dobu návštěvy webu.
• Co ji ovlivňuje a jak ji zlepšit: INP zhoršuje hlavně přebujelé množství JavaScriptu na stránce, složitá struktura kódu (obří DOM), těžké moduly šablony, live chaty a widgety. Cesta ke zlepšení vede přes zjednodušení DOM struktury a rozbíjení dlouhých úloh JavaScriptu (Long Tasks) pomocí technik jako setTimeout(), aby měl prohlížeč čas okamžitě reagovat na kliknutí uživatele.

4. TBT (Total Blocking Time) – Celková doba blokování

• Co to je: Ukazuje, jak moc JavaScript spuštěný na stránce blokuje hlavní vlákno prohlížeče mezi začátkem vykreslování obsahu a jeho plnou interaktivitou.
• Co ho ovlivňuje a jak ho zlepšit: TBT velmi často zhoršují externí služby, špatně nastavený Google Tag Manager (GTM), masivní tracking skripty pro analytiku a zbytečně velké JS knihovny. Řešením je odložení nebo asynchronní spouštění těchto skriptů (pomocí atributů defer nebo async) a vypínání nepotřebného JS na mobilních zařízeních.

5. FCP (First Contentful Paint) – První vykreslení obsahu

• Co to je: Měří čas od chvíle, kdy uživatel zadá adresu, do okamžiku, kdy prohlížeč vykreslí první kousek jakéhokoliv obsahu (text, část obrázku nebo grafiku).
• Co ho ovlivňuje a jak ho zlepšit: FCP je přímo závislé na rychlosti odezvy serveru (TTFB), velikosti samotného HTML souboru, blokujícím CSS a Javascriptu v hlavičce a načítání fontů. Základem úspěchu je zmenšení velikosti kódu a odstranění skriptů blokujících vykreslení na začátku stránky.

Doporučení pro velikost dat vs. realita e-shopů:
Teoretické příručky pro maximální výkon (např. PageSpeed.ONE) často uvádějí jako ideál pro bleskové načítání extrémně přísné limity: HTML do 20 kB, celkové CSS pod 50 kB, fonty pod 50 kB a obrázky pod 100 kB.

V reálném e-shopovém světě je však splnění těchto limitů prakticky nemožné. Moderní robustní e-commerce platformy jako PrestaShop potřebují pro svůj chod tisíce řádků kódu pro obsluhu košíku, filtrů, zákaznických účtů a responzivity. Například i zbrusu nová, od základu skvěle optimalizovaná oficiální šablona Hummingbird pro PrestaShop 9 má samotný soubor theme.css o velikosti kolem 348 kB a theme.js zhruba 212 kB. A to mluvíme o čisté šabloně bez započtení stylů a skriptů z desítek dalších modulů, které na e-shopu běžně běží.

Cílem optimalizace PrestaShopu proto není nesmyslné osekávání kódu na úkor funkcí, ale to, aby se tyto větší soubory správně zkomprimovaly (např. pomocí Brotli), efektivně kešovaly v prohlížeči a jejich načítání neblokovalo vykreslení toho, co zákazník zrovna vidí na obrazovce.

Pokročilé nástroje a technologie pro maximální výkon

V ekosystému moderního webu existují technologie na úrovni šablony a serveru, které dokážou výkon PrestaShopu posunout o úroveň výš:

• Komprese Gzip a Brotli: Klíčové nastavení na straně serveru. Moderní algoritmus Brotli nabízí mnohem efektivnější kompresi textových souborů (HTML, CSS, JS) než starší Gzip, což znamená méně přenášených dat a rychlejší stažení webu.
• Optimalizace webfontů: Vlastní písma e-shopu mohou načítání výrazně zabrzdit. Pomáhá nastavení vlastnosti font-display: swap (uživatel vidí text okamžitě v systémovém fontu, než se dotáhne vlastní) a lokální hostování fontů namísto volání Google Fonts. Lokální fonty lze navíc optimalizovat ořezáním – vyřazením znakových sad pro jazyky, které e-shop nepoužívá, a ponecháním podpory např. jen pro Češtinu.
• Speculation Rules API: Moderní technologie, která umožňuje prohlížeči inteligentně předvídat další krok uživatele. Pokud uživatel najede myší na odkaz (např. detail produktu či košík), prohlížeč stránku na pozadí předvykreslí. Kliknutí a přechod na další stránku jsou pak pro uživatele okamžité.
• Cloudflare (Zabezpečení a doplňková optimalizace): Cloudflare slouží jako inteligentní prostředník mezi serverem a návštěvníkem. Jeho hlavní role je často **bezpečnostní** – dokáže odrazit škodlivé roboty a DDoS útoky, které by jinak shodily hosting. Z pohledu rychlosti je to ale dvousečná zbraň. Pokud se Cloudflare pouze nasadí v základním nastavení (nebo narychlo při útoku, kdy chvíli trvá, než se změny v síti projeví), může web kvůli složitější trase dat paradoxně **mírně zpomalit** oproti přímému připojení na kvalitní český hosting. Aby e-shopu rychlostně pomáhal, vyžaduje pokročilé nastavení (např. selektivní kešování HTML stránek pro nepřihlášené uživatele pomocí Cache Rules podle cookies), jinak funguje čistě jako bezpečnostní štít.
• BFcache (Back/forward cache): Zajištění toho, aby prohlížeč při kliknutí na tlačítko „Zpět“ nemusel znovu stahovat celý e-shop, ale zobrazil ho okamžitě z paměti RAM. To extrémně zlepšuje pocitovou rychlost procházení kategorií. V PrestaShopu je pro její funkčnost klíčové:
  • A) Správné HTTP hlavičky: Server nebo cache moduly nesmí posílat hlavičku Cache-Control: no-store, která uložení do paměti prohlížeče striktně zakazuje.
  • B) Odstranění starých skriptů: V Javascriptu šablony a modulů se nesmí používat stará událost window.addEventListener('unload'), která BFcache spolehlivě zabíjí. Místo ní je nutné používat moderní 'pagehide'.

Přehled: Co pomáhá nejvíce?

Pokud hledáte největší páky s nejvyšším dopadem na celkové skóre v PageSpeed Insights, zaměřte se na následující oblasti:

Závěr

Optimalizace rychlosti PrestaShopu není jednorázový úkon, ale kontinuální proces péče o e-shop. Samotné Google metriky jsou v podstatě jen nástroj pro vývojáře, aby věděli, na která úzká hrdla se při vylepšování webu zaměřit, a u komplexního e-shopu je zcela normální, když tyto výsledky nejsou „úplně zelené“. Cílem by proto nemělo být slepé honění se za body na mobilu za cenu odstranění klíčových marketingových nástrojů, ale odstranění skutečných technických chyb (CLS posuny, chybějící komprese, neoptimalizované obrázky a nekvalitní moduly). Rychlý web totiž v konečném důsledku děláte pro své zákazníky, ne pro roboty od Googlu.