Rastlinkovo · Optimalizace existujícího e-shopu
Optimalizace e-shopu, který už byl v plném provozu.
Rastlinkovo jsme nevytvářeli od nuly. V už fungujícím WooCommerce e-shopu jsme se soustředili na výkon, opravy chyb a vybrané úpravy rozhraní.
Nákupní cesta
Cestu jsme optimalizovali jako jeden propojený celek.
Výkon ani chyby jsme neposuzovali jen na jedné obrazovce. Sledovali jsme cestu od vstupu přes katalog a vyhledávání až k detailu produktu a košíku.
Posuňte diagram do strany.
- 01
Domov
Vstup do obchodu a první rozhodnutí, kam pokračovat.
- 02
Kategorie
Procházení nabídky, porovnání produktů a přechod do detailu.
- 03
Vyhledávání
Přímá cesta ke konkrétnímu produktu bez procházení kategorií.
- 04
Produkt
Informace, cena a nákupní akce v rozhodujícím bodě cesty.
- 05
Košík
Kontrola výběru před pokračováním v objednávce.
Informace
- Typ zásahu
- Optimalizace existujícího e-shopu
- Platforma
- Webový e-shop
- Naše role
- E-shop jsme nestavěli. Do fungujícího WooCommerce jsme vstoupili kvůli výkonu, opravili chyby a upravili vybrané části rozhraní.
- Kontext
- Živý obchod během zásahů
Technologie
- WordPress
- WooCommerce
- PHP
- MySQL
Co se dozvíte
- 01Jak projít celou nákupní cestu dříve, než se začne měnit kód.
- 02Proč je třeba výkon hledat napříč rozhraním, WooCommerce, runtime a daty.
- 03Jak řadit zásahy podle dopadu na uživatele, ne podle jejich viditelnosti.
- 04Jak ověřit malou změnu v celém dotčeném flow na mobilu i desktopu.
01
Nejprve pochopit, potom měnit
Rastlinkovo už fungovalo jako živý obchod s katalogem, vyhledáváním, detaily a košíkem. Nezačínali jsme čistým návrhem. Prošli jsme existující nákupní cestu, reprodukovali problémy a zmapovali vazby.
“Při optimalizaci existujícího systému je kontext součástí řešení.”
02
Výkon je problém propojeného systému
Pomalá obrazovka nemusí mít příčinu tam, kde ji uživatel vidí. Rozhraní, WooCommerce logika, PHP, pluginy, integrace a MySQL tvoří jeden řetězec. Optimalizaci jsme vedli podle toku požadavku.
03
Priorita podle dopadu na uživatele
Nejvýše jsme zařadili problémy, které přerušovaly procházení nebo se přenášely mezi mobilem a desktopem. Viditelný detail neměl automaticky přednost. Rozhodoval dopad a riziko pro okolní cestu.
“Optimalizace má pořadí podle dopadu, ne podle toho, co je nejvíc na očích.”
04
Optimalizovat, testovat, ověřit
Každý zásah jsme začali reprodukcí problému a jasným rozsahem. Po úpravě kódu nebo stylů následovala kontrola dotčeného flow a responzivních stavů. Nešlo o to měnit hodně, ale přesně.
05
Zlepšení bez přepisování
Hodnota byla v pochopení existujícího řešení, v nalezení míst s reálným dopadem a ve zlepšení výkonu, chování i vybraných stylů. Obchod přitom celou dobu běžel.
Architektura existujícího řešení
Výkon nevzniká v jedné vrstvě.
Rastlinkovo je existující WordPress a WooCommerce obchod. Při hledání příčin jsme proto četli rozhraní, commerce logiku, PHP runtime, integrace a data jako jeden propojený systém.
Jak jsme hledali příčinu
Nejdřív reprodukce
Prošli jsme existující cestu a reprodukovali konkrétní problém.
Čísla před odhadem
Změřili jsme chování a oddělili symptom od pravděpodobné příčiny.
Dopad určil pořadí
Pořadí zásahů jsme určili podle dopadu na nákupní cestu.
Malý bezpečný zásah
Zvolili jsme nejmenší bezpečnou změnu v kódu nebo stylech.
Celá nákupní cesta
Změnu jsme otestovali v souvisejícím flow a na různých šířkách.
Kontrola po nasazení
Po nasazení jsme ověřili výsledné chování v živém kontextu.
Posuňte diagram do strany.
- 01
Storefront
Téma, šablony, katalog a rozhraní, které uživatel přímo vnímá.
- 02
Commerce
WooCommerce propojuje produkty, košík a objednávkový proces.
- 03
Runtime
PHP, jádro WordPressu, hooky a pluginy vykonávají aplikační logiku.
- 04
Integrace
Platba, doprava a notifikace rozšiřují tok mimo samotný storefront.
- 05
Data
MySQL a média drží produktový, objednávkový a obsahový stav.
Kontrola kvality
Malý zásah, celý kontrolní okruh.
V živém e-shopu nestačí opravit izolovaný řádek. Rozsah jsme drželi úzký, ale výsledek kontrolovali v celé dotčené cestě, na mobilu i desktopu a po uvolnění změny.
Posuňte diagram do strany.
- 01
Reprodukovat
Nejprve potvrdit známý problém v reálné uživatelské cestě.
- 02
Ohraničit
Vybrat nejmenší bezpečnou změnu bez zbytečného zásahu vedle.
- 03
Responzivně
Ověřit dotčenou cestu v mobilním i desktopovém rozložení.
- 04
Uvolnit
Po změně ještě jednou potvrdit výsledné chování živého obchodu.
