Redesign e‑shopu na WooCommerce: nový vzhled, slovenská verze a rychlejší server

E‑shop safetyshop.cz prodává bezpečnostní a průmyslové značení: bezpečnostní tabulky, podlahové a dopravní značení, štítky a vybavení pracovišť. Běží na WooCommerce v české verzi na safetyshop.cz a ve slovenské na safetyshop.sk.

Provozovatel chtěl modernější vzhled a rychlejší web. E‑shop má teď nový vzhled na šabloně Woodmart v obou jazycích, přehlednější katalog a běží na výkonnějším serveru. Po úpravách klesla zátěž serveru z 8 až 11 na 1,1 a průměrné načtení stránky z 5 až 6 s na 1,3 až 1,8 s.

Co provozovatel potřeboval

• modernější a čistší vzhled v barvách nového loga,
• rychlejší web,
• zachovat produkty, kategorie, popisy, fotky, blog i adresy stránek, aby e‑shop nepřišel o to, co mají vyhledávače zaindexované,
• českou i slovenskou verzi ve stejném rozsahu,
• spuštění bez ztráty objednávek a s výpadkem nejvýš v řádu hodin.

Nová šablona místo úprav staré

Původní e‑shop běžel na starší šabloně s vlastním systémem pro skládání stránek (builderem) a na 50 aktivních pluginech. Úpravou vzhledu přes CSS by e‑shop vypadal jinak, ale rychlejší by nebyl. Provozovatel proto zvolil redesign na nové šabloně a s ním i úklid pluginů.

Ze dvou kandidátů, Divi 5 a Woodmartu, jsme s provozovatelem vybrali Woodmart. Je udělaný přímo pro WooCommerce a jako vzor posloužil jeho ukázkový e‑shop Megamarket. Stránky se v něm upravují v Elementoru.

Redesign neznamená nový e‑shop. Produkty, kategorie a blog zůstaly, nová šablona je jen zobrazuje jinak. Znovu jsme postavili jen asi 20 stránek složených v původním builderu, které by se po změně šablony rozpadly. Plugin „Advanced Custom Fields“ (vlastní pole), který potřebovala jen stará šablona, jsme odstranili.

Přehledný katalog pro přes 1 000 kategorií

E‑shop má přes 1 000 kategorií. Stránka Obchod dřív vypisovala přes 20 kategorií první úrovně, teď ukazuje 7 hlavních skupin a Výprodej, třeba bezpečnostní značení a tabulky, podlahové značení a pásky nebo vybavení pracoviště a BOZP. Staré adresy kategorií jsou přesměrované na nové, takže odkazy z vyhledávačů dál fungují.

Menu z tolika kategorií Woodmart sám nesestaví, proto jsme ho vygenerovali. U každé skupiny je nejvýš 8 podkategorií a odkaz „Zobrazit vše“, aby menu zůstalo čitelné. Dál jsme upravili:

• stránku kategorie: nahoře jsou podkategorie v mřížce s obrázky, pod nimi produkty,
• detail produktu: jednodušší výběr materiálu, velikosti a množství a související produkty,
• vyhledávání: našeptává výsledky už při psaní.

Slovenská verze z jedné instalace

Slovenská verze na safetyshop.sk není samostatný web. Běží ze stejné instalace jako česká a jazyky přepíná plugin Polylang, takže produkty i objednávky obou verzí jsou v jedné administraci.

Woodmart a Polylang spolu na tomhle e‑shopu bez úprav nefungovaly, kompatibilitu jsme proto doprogramovali. Menu, úvodní stránku i kategorie jsme pak nastavili pro obě verze.

Spuštění bez ztráty objednávek

Nový vzhled jsme připravili na kopii e‑shopu na testovací subdoméně, se skutečnými produkty a kategoriemi. Ostrý e‑shop mezitím normálně prodával a provozovatel na kopii posílal připomínky.

Nejdřív jsme e‑shop přesunuli na výkonnější virtuální server WP Cloud od WP Hostingu s 8 procesorovými jádry, dvakrát víc, než měl původní server. Přesun trval zhruba 4 hodiny. Nový vzhled jsme nasadili až o týden později, když e‑shop na novém serveru běžel bez potíží.

Kopii z testovací subdomény jsme na ostrý e‑shop nepřehrávali, protože by se ztratily objednávky z mezidobí. Šablonu jsme zapnuli přímo na ostrém e‑shopu a nahráli do ní nastavení připravené na kopii.

Objednávky a dodací list

• Stav „Vytištěno“: nový stav objednávky, který jde v přehledu objednávek nastavit i hromadně.
• Dodací list: tiskne se k vychystání zboží. Číslo objednávky je v něm velké a v rámečku a pod způsobem dopravy je způsob platby se stavem úhrady: dobírka, zaplaceno nebo nezaplaceno.

Zrychlení: zátěž serveru z 8 až 11 na 1,1

Nový server a šablona byly základ. Kde e‑shop ztrácí čas, ukázalo až měření za provozu. Na serveru jsme zapnuli záznam požadavků (log), ze kterého je vidět, které stránky a dotazy server zatěžují, a podle něj jsme web postupně upravovali a optimalizovali.

Zbytečná práce serveru

• OPcache: kód pluginů se nevešel do paměti pro přeložený kód PHP (128 MB), takže se jeho část překládala znovu při každém zobrazení stránky. Paměť jsme s hostingem zvětšili.
• Pluginy pro SEO: „AIOSEO Link Assistant“ (návrhy interních odkazů) a „AIOSEO Video Sitemap“ (mapa stránek s videi) posílaly do databáze stovky dotazů. E‑shop je nepotřeboval, tak jsme je vypnuli.
• Počítadlo návštěvníků: na stránce produktu volalo server každých 10 sekund a ukazovalo jen náhodné číslo. Vypnuli jsme ho.
• Nepoužívané pluginy: po dohodě s provozovatelem jsme vypnuli dalších 7, třeba formuláře, ve kterých nebyl žádný formulář.

Roboti

Měření ukázalo, že přes polovinu zátěže serveru tvoří roboti vyhledávačů a AI nástrojů a skuteční zákazníci jen asi čtvrtinu. Proti robotům jsme postupovali v několika krocích:

• robota z cloudu Alibaba v Singapuru, který posílal 62 % všech požadavků na web, jsme zablokovali,
• robotům jsme zakázali procházet kombinace filtrů a ty nejaktivnější zpomalili, protože každou takovou stránku musí server sestavit celou,
• když v říjnu e‑shop procházel botnet z víc než 19 000 IP adres během dvou hodin, rozšířili jsme ochranu na celý web, českou i slovenskou verzi,
• po dohodě s provozovatelem povoluje server přístup jen z Evropy, USA a Kanady. Předem jsme ověřili, že se to nedotkne žádného zákazníka.

Košík a stránky pro přihlášené

Košík, pokladna a stránky pro přihlášené zákazníky se nedají brát z mezipaměti a server je pokaždé sestavuje znovu. Záznam požadavků ukázal, že Elementor na každé takové stránce zbytečně opakoval jednu kontrolu a spotřeboval na ní většinu času. Po opravě se košík a produkt pro přihlášeného zákazníka načtou za 1,5 až 2 s místo 5 až 15 s.

Čísla před a po

Co jsme měřili	Před	Po
Zátěž serveru s 8 jádry	8 až 11	1,1
Čas sestavování stránek za minutu	450 až 770 s	90 až 130 s
Průměrné načtení stránky	5 až 6 s	1,3 až 1,8 s
Košík a produkt pro přihlášeného zákazníka	5 až 15 s, ve špičce 35 s	1,5 až 2 s

Zátěž serveru říká, kolik úloh najednou čeká na procesor. Při zátěži 8 až 11 byl server s 8 jádry trvale přetížený, po úpravách se drží kolem 1 až 2. Čas sestavování stránek je součet času, který server za jednu minutu strávil sestavováním stránek.

Redesign děláme za pevnou cenu za dohodnutý rozsah, kterou znáte předem. Úpravy navíc nejdřív odhadneme a pustíme se do nich po vašem souhlasu. Jak cenu počítáme, je na stránce Redesign webu.

Když váš e‑shop na WooCommerce potřebuje nový vzhled nebo se pomalu načítá, podíváme se na něj. Nejdřív projdeme šablonu, pluginy a server a navrhneme, co má smysl. Nový vzhled připravíme na kopii, aby e‑shop mezitím prodával dál, a při spuštění pohlídáme adresy stránek, objednávky i jazykové verze.