StoreFront: optimalizovaný
frontend pro e-shopy
Zákaznická část (frontend) pro e-shopy s odděleným vzhledem (headless). Postavená na výkonu, viditelnosti ve vyhledávačích a přístupnosti.
- Skóre výkonu 96 na harfasport.cz
- Hlavní obsah za 1,2 s
- Přístupnost podle WCAG 2.1 AA
Jak to funguje
StoreFront je open-source framework pro zákaznickou část e-shopu.
Spojuje dosah webu, který vyhledávače dobře přečtou, s rychlostí a plynulostí aplikace (PWA). Přidali jsme vlastní moduly, design systém, napojení na data a roky provozních zkušeností.
Zrychlení o pouhých 0,1 s zvýšilo konverzi o 8,4 % a průměrnou hodnotu objednávky o 9,2 %. Zdroj: Deloitte – Milliseconds Make Millions
Rychlost doložená daty
Naměřeno na e-shopu Harfa Sport, který na StoreFront běží.
| Harfa Sport, naměřeno | Hranice Google „dobré“ | |
|---|---|---|
| Skóre výkonu (Lighthouse) | 96 | 90–100 |
| Načtení hlavního obsahu (LCP) | 1,2 s | do 2,5 s |
| Odezva na kliknutí (INP) | 71 ms | do 200 ms |
| Posun obsahu při načítání (CLS) | 0 | do 0,1 |
| První vykreslení (FCP) | 0,9 s | do 1,8 s |
| Odpověď serveru (TTFB) | 0,4 s | do 0,8 s |
Google PageSpeed Insights, e-shop Harfa Sport. Core Web Vitals jsou data Chrome UX Report za posledních 28 dní, počítače. Cíle pro nový projekt můžeme podle dohody ověřit před spuštěním v prostředí blízkém produkci.
Co frontend umí
Šest vlastností, které rozhodují v každodenním provozu.
Více webů z jednoho kódu
Z jednoho kódu může běžet několik webů, každý s vlastní značkou a vzhledem.
Design systém z Figmy do produkce
Vlastní design systém: stejné komponenty v návrhu ve Figmě i na webu, bez rozdílů mezi návrhem a výsledkem.
Content Builder
Redakce skládá stránky a bloky bez vývojáře – od detailu akce po samostatnou microsite.
Napojení na data
Vlastní převodníky dat z API (API mappery) drží data konzistentní i při rozšiřování API. Jedna stránka může brát data z více zdrojů.
Stránky ze serveru a cache
Stránky připravené už na serveru (SSR) a vícevrstvá cache drží rychlost i ve špičkách, třeba při TV reklamě.
Volnost frameworku
Produkčně stavíme na Vue 3. Architektura nevylučuje přechod na React nebo Next.js.
Jak držíme rychlost
Vrstvená cache a vykreslování podle typu stránky drží web rychlý i pod náporem.
Vedle hlavní cesty: RabbitMQ (zpracování na pozadí) a UpSearch s ElasticSearch (vyhledávání, našeptávání a výpisy).
Optimalizace obrázků
Automatický převod do WebP a AVIF a správné velikosti pro každé zobrazení (srcset, retina).
Vykreslování podle typu stránky
Od statických přes pravidelně obnovované až po plně dynamické. Každá stránka používá přístup, který jí sedí.
Nákup odolný špičce
Pokladna (checkout) běží pro každého zákazníka zvlášť, bez sdílené cache, takže se nic nezamění. Dostupnost se dotahuje, aniž by zdržela stránku.
Viditelnost ve vyhledávačích i AI asistentech
Optimalizaci pro vyhledávače (SEO) i pro AI asistenty (GEO) máme zabudovanou přímo v architektuře.
Od strukturovaných dat po propojení entit, aby AI asistenti rozpoznali váš e-shop jako oficiální zdroj.
SEO: klasické vyhledávání
- Obsah je v HTML hned při prvním načtení (SSR), vyhledávače ho celý přečtou.
- Strukturovaná data (JSON-LD): Product, BreadcrumbList.
- Sitemap, canonical, přesměrování 301, hreflang, vstupní stránky bez vývojáře.
- Google Tag Manager s datovou vrstvou (data layer), Open Graph a X Cards.
GEO: AI asistenti
- Data, která se dají citovat: FAQPage, Review a AggregateRating, Person (sameAs).
- Důvěryhodnost obsahu (E-E-A-T): modul ContentAuthors, Organization se sameAs.
- Bloky častých otázek v Content Builderu se automaticky označí jako FAQPage.
- Řízený přístup AI crawlerů (robots.txt a llms.txt).
Použitelné pro všechny
Mobil na prvním místě a přístupnost podle WCAG 2.1 AA řešíme v celém projektu, ne jako kontrolu na konci.
Mobil na prvním místě
Velké dotykové plochy a výkon.
WCAG 2.1 AA
Podle dohody může být podmínkou převzetí díla.
Klávesnice
Celý web se dá ovládat z klávesnice.
Odečítače obrazovky
Sémantické značky a ARIA.
- Napříč projektem. Přístupnost řešíme od úvodní analýzy přes design a vývoj po testy. Je součástí definice hotové práce (Definition of Done).
- Testy. Automatické nástroje (axe, Lighthouse) a ruční testování klávesnicí a odečítačem.
- Postupné vylepšování (progressive enhancement). Klíčové cesty zákazníka fungují i na slabších zařízeních a pomalém připojení.
Od návrhu k produkci
Sdílený design systém, společné komponenty a vzory.
-
Mapa webu (sitemap)
Struktura a obsahová strategie.
-
Drátěné modely (wireframy)
Ve Figmě, nejdřív pro mobil.
-
Vzhled rozhraní (UI)
Finální vzhled nad design systémem.
-
Testování
Podle dohody, třeba s pěti respondenty na klíčových cestách zákazníka.
Postupujeme iterativně v rámci agilní dodávky. Atomic Design drží komponenty jednotné a znovu použitelné a návrh i produkční web stojí na stejném design systému.
Na čem stojí
Moderní ekosystém Vue s plnou sadou testů.
- Vue 3
- Vite
- TypeScript
- Node.js
- SSR a CSR
- PWA
- Vue Router
- Pinia
- Vitest
- Cypress
- Playwright
- REST API
Rychlost, viditelnost a přístupnost od začátku
Napište nám, na čem váš e-shop běží a co potřebujete zlepšit. Ozveme se a domluvíme další postup.