Tento článek popisuje redesign e-shopu na Woocommerce delameoriginaly.cz Na webu se prodávají produkty vlastní výroby a každý kus je originál. Přečtěte si celý postup od prvního zásahu na webu až po jeho dokončení, zrychlení a předání.
Jaký byl stav webu před naším zásahem?
E-shop delameoriginaly.cz byl postaven na šabloně MaxOne (ceske-sablony.cz), která byla určena pro jednostránkové prezentace. Na webu bylo zhruba 60 produktů a samotná šablona nebyla úplně optimalizovaná pro e-shop. Všechny produkty se načítaly na hlavní stránce a z toho důvodu měl web problém i s rychlostí, která byla zapříčiněna načítáním velkého množství produktů, slideru, kontaktního formuláře a celého Woocommerce pluginu.
Na webu byla spousta neaktualizovaných a neaktivních pluginů. Před samotným redesignem si zákaznice objednala zrychlení webu, při kterém jsme redukovali množství načítaných produktů na hlavní stránce, upravili slider, komprimovali obrázky, nastavili minifikace a kombinování skriptů. Na závěr jsme nastavili cache na webu, ale při načítání bylo stále vysoké TTFB (Time to first byte). To bylo způsobeno pomalým hostingem (webcloud.cz).
Jak dopadlo zrychlení?
Před naším zásahem se web načítal 10-12 sekund, což je absolutně nepřijatelná doba načítání. Samotná homepage měla 9,7 MB a 263 http dotazů.
Po našem zásahu a zrychlení byla rychlost webu 4,5 sekundy, 717 kB a 41 http požadavků. Doba načítání byla stále dlouhá, a tak jsme zkusili stejný web nakopírovat na jiný hosting a doba načítání se pohybovala okolo 1 sekundy. Zákaznice ale stále nechtěla změnit hosting.
Redesign e-shopu
Po tomto zrychlení na webu spolupráce na nějakou dobu utichla. Po pár měsících se zákaznice ozvala s požadavkem redesignu celého e-shopu. A to pro nás byla opravdová výzva.
Poptávka a nacenění redesignu e-shopu
Celé zadání od zákaznice obsahovalo přes 13 bodů, které zahrnovaly různé funkce a požadavky na nový e-shop. Rozpočet nebyl takový, aby vystačil na vytvoření vlastní šablony, předvybrali jsme 3 šablony z ThemeForest. Po delší komunikaci se zákaznicí jsme stanovili šablonu, na které web vytvoříme. Dále jsme připravili bodový plán pro kompletní změnu šablony a časové odhady na jednotlivé úkoly.
Vytvořili jsem plán práce:
- Vytvoření pracovní kopie webu
- Instalace a nastavení šablony
- Vytvoření a úprava stránek, hlavičky a patičky
- Nastavení sidebarů, widgetů a překlad šablony
- Nastavení Woocommerce
- Testování, kontrola, připomínky, opravy
- Převod z pracovní kopie na ostrý web
- Zabezpečení webu a závěrečná zpráva
Součástí nacenění nebyl převod webu na zabezpečený protokol https a zákaznice se chtěla vyhnout vytvoření vývojářského prostředí (develu) a vše provádět přímo na ostrém webu, protože její původní domněnka byla, že celá práce bude trvat 1-2 týdny. I přes zamítnutí požadavku na vytvoření develu jsme ho vytvořili, aby ostrý web mohl být stále v provozu a nedošlo ke ztrátě dat.
Práce může začít
Jako první věc jsme zadali úkoly na jednotlivé práce postupně, aby se nepřeskakovalo a měli jsme přehled o časovém plánu. V další fázi jsme vytvořili devel (vývojářský web), na kterém jsme provedli všechny práce, abychom nezasahovali do ostrého webu.
Nainstalovali jsme čistý WordPress a provedli jsme export webu z ostré verze a import na pracovní pomocí pluginu WP All in One Migration. Analyzovali jsme stav webu a vypnuli jsme přebytečné pluginy, které se nebudou používat. Celý web jsme aktualizovali, abychom pracovali s aktuálními verzemi pluginů.
Instalace šablony a nastavení
Na pracovní verzi jsme nainstalovali šablonu, kterou jsme vybrali se zákaznicí již při nacenění. Vybrali jsme šablonu Handy, která nejvíce vyhovovala požadavkům na vzhled a funkce dle zadání. Má jednoduchý vzhled a dá se dobře přizpůsobit.
Po instalaci šablony jsme importovali demo obsah šablony a nainstalovali doplňkové pluginy, které šablona vyžadovala. Vytvořili jsme podřízenou šablonu (child theme), aby se při aktualizaci nepřepisovaly naše změny v šabloně. Šablona používá známou dvojici pluginů WP Bakery Page Builder (Visual Composer) a Slider Revolution, který jsme deaktivovali.
Úprava šablony
Po instalaci demo obsahu z šablony na web přibyla spousta zbytečných věcí, které bylo potřeba odstranit. Šlo o zbytečné stránky, příspěvky, kategorie, produkty, pluginy, menu a widgety. Bylo tedy potřeba upravit hlavičku a menu celého webu a odstranit z něj zbytečné stránky. Nastavili jsme kontaktní informace, logo a vzhled hlavičky webu.
Jako další jsme ve spolupráci se zákaznicí upravili stránku Kontakt, O nás, Recenze, Časté dotazy a jak je u eshopů obvyklé: Obchodní podmínky, Ochrana osobních údajů a informace o dopravě a platbách. U všech těchto prací bylo potřeba komunikovat se zákaznicí a čekat na podklady pro obsah stránek.
Následně jsme upravili patičku dle zadání, kde jsou kontaktní informace, sociální sítě, poslední recenze a odběr newsletteru. Zde jsme museli nastavit CSS kvůli barvám a zarovnání textu.
Další z kódových úprav nás čekala na stránce Galerie, kde byla u obrázků možnost prokliknout se na konkrétní obrázek a problém s řazením Galerie. Nastavili jsme na webu všechny sidebary a widgety na stránkách.
Homepage jsme upravovali několikrát, ale nakonec jsme se dobrali k požadovanému výsledku s výpisem nejprodávanějších produktů, kategorií, hlavním bannerem a nejnovějšími články. V této fázi bylo vizuálně vše vyřešeno.
Překlad šablony a pluginů
Když byl web vzhledově hotový, bylo ještě potřeba přeložit šablonu, která byla v angličtině. Šlo o překlady převážně v šabloně, ale i v jejích pluginech a Woocommerce, aby byl e-shop kompletně přeložený pro české zákazníky.
Nastavení Woocommerce
V poslední fázi jsme provedli revizi nastavení pluginu pro e-shop Woocommerce. Nastavení platby a dopravy. Na webu je pouze možnost platby přes účet a osobní převzetí. Dopravu jsme nastavili pluginem Woo Doprava. Otestovali jsme celý objednávkový proces a postupně opravili drobné chyby ve vzhledu pokladny a košíku.
A je hotovo! Vlastně ještě ne
Po dokončení všech nastavení vzhledu a funkčnosti jsme nechali zkontrolovat web zákaznicí, jestli je vše v pořádku a dokončili jsme drobné úpravy a zodpověděli dotazy k webu ohledně práce s šablonou. Nechali jsme si schválit práci a přesun z develu na ostrý web.
Před samotným přesunem jsme zálohovali ostrý web. Všechny soubory na FTP a databázi, kdyby došlo k nějaké ztrátě dat (obrázků, stránek, příspěvků). Ještě jednou jsme zkontrolovali, jestli je web v pořádku připravený na nasazení na ostrou verzi a provedli jsme export pluginem All in one Migration.
Všechna data z ostrého webu jsme smazali a nainstalovali čistý WordPress, na který jsme importovali web z develu. Po přesunu ještě proběhla kontrola webu a otestování objednávkového procesu. Vše fungovalo v pořádku.
Zabezpečení webu
Po přesunu webu jsme hned web zabezpečili pluginem IThemes Security, smazali z FTP zbytečné soubory, nastavili příslušná práva k souborům, změnili náhodný řetězec pro generování hesel (salt) ve wp-config.php, nastavili vyžadování silných hesel a ochranu proti brute force útokům.
Na závěr jsme provedli test rychlosti a připravili závěrečnou zprávu pro zákaznici s doporučeními, co se dá na webu ještě zlepšit. Pamatujete si, jak jsme řešili na začátku rychlost webu na hostingu? Tak tady se konečně dostáváme k řešení.
Přesun webu na jiný hosting
Zákaznice si objednala Český hosting, kam jsme následně web přesunuli web z webcloud.cz. Zrychlení načítání webu bylo výrazné a TTFB se z několika sekund zlepšilo na jednotky milisekund – tím se výrazně zvýšila rychlost načítání webu.
[alert title=“Můžeme nabídnout více“ type=“info“]Po těchto úkolech jsme vyčerpali rozpočet pro redesign, ale i přesto máme dále co nabídnout. Web je potřeba převést na HTTPS protokol a provést ještě nějaké zásahy pro zrychlení webu, jako je například komprese obrázků nebo sloučení a kombinování skriptů.[/alert]
Co na to zákaznice?
Zákaznice byla velice spokojená s naší prací a po prvním týdnu jí začaly chodit první objednávky. Celkový vzhled, orientace na webu, rychlost a bezpečnost se zlepšily a nyní je i jednodušší a rychlejší práce s webem pro samotného klienta.
[card type=“light“ title=“Hodnocení zákaznice“ ]
Jste spokojena s provedenými pracemi na vašem webu (čas, rychlost, kvalita)?
Vše probíhalo na 100%, takže s prací na nových webových stránkách www.delameoriginaly.cz jsem byla absolutně spokojena. Časové prodlevy vznikaly jen díky mému pracovnímu vytížení, kdy se muselo čekat na moje korektury.
Co nejvíce oceňujete na spolupráci s námi?
Vstřícnost ke všem mým požadavkům, ochotu mi jednoduše vysvětlit, jak spravovat web v budoucnu, profesionalitu při práci na stránkách a rychlost reakcí na moje e-maily.
Jak konkrétně Vám pomohly provedené úpravy webu?
Webové stránky Děláme originály měly dlouhou dobu načítání (cca 9 sekund), což bylo dané jak nevhodným výběrem šablony, tak špatným hostingem. Po změně šablony a přechodu na nový hosting je rychlost načítání blesková a tudíž zákazníky neodrazuje od nakupování.
Potřebujete také vylepšit webové stránky?
Máte pocit nebo dokonce skoro jistotu, že vaše webovky nestíhají, jsou pomalé a že by měly fungovat lépe? Zavolejte nám nebo napište, my jejich stav zhodnotíme a dáme vám nabídku, jakým způsobem je dokážeme vylepšit – zrychlit, zabezpečit, učinit z nich výkonný nástroj.
