Vývoj nového e-shopu v Pilulce začal přibližně v říjnu 2017. Prapůvodní verze byla postavená na Gulp.js, LESS, Bootstrap 3. Jako první jsme vyměnili Bootstrap 3 za relativně málo používanou verzi 4 v alpha verzi, nastavili konvence (BEM & utility metodiku), komponenty psali v ES6 a čistém JavaScriptu.

Budiž život

První životu schopnou platformu jsme spustili přibližně listopadu v roce 2018 v Rumunsku (www.pilulka.ro). Zjistili jsme, že rychlost e-shopu není na frontendu nijak závratná, bylo tedy nutné:

• Načítat asynchronně JavaScript
• Generovat kritické styly pro homepage, kategorii a detail produktu
• Částečně redukovat DOM a načítat ho lazy
• Správně načítat fonty & redukovat počet řezů
• Kluci na backendu máknout na TTFB
• Knihovny, které se parsujou dlouho nahradit vlastními (carousely, tooltipy, našeptávač ...)
• Implementovat Webpack z hlediska ulehčení stacku vzhledem k různým variantám eshopu

Webpack - welcome!

Webpack nám pomohl ke stabilnímu stacku a rychlejšímu vývoji. Potřebujeme při buildu generovat různé barevné variace e-shopu, minifikovat CSS a JS, pro vývojové prostředí sourcemapy, dále Webpack umožňuje snadněji generovat chunky.

Chunky v JS a CSS používáme jenom na místech, kde je to nutné, na hlavní stránce máme JS a CSS jen pro HP, v kategorii, úču, na objednávce, atp. to samé. Hlavní „app.js“, ve kterém je převážně handlování layoutu, komponenta pro přidávání do košíku, modaly atd.

Z původního 120kB hlavní souboru app.js, který se načítal na všech stránkách, jsme Webpackem mohli snadno rozdělit JS na menší soubory, nyní je velikost hlavního souboru app.js cca. 40kB (s gZip).

Totožný postup jsme aplikovali i na SASS. V hlavním screen.css máme utility třídy, grid, jádro Bootstrap 4 (používáme cca. 40%), helpery atd., v současnosti jeho velikost je 42kB, zbytek je opět rozdelěn na samostatné menší části.

Asynchronní načítání JavaScritpu & kritické CSS

Načítání JavaScriptu jsme na asynchronní, dále bylo potřeba generovat kritické CSS s ohledem pro barevné variace. Pro generování používáme knihovnu critical, dále script, který voláme přes Node.js a vygenerujeme kritické CSS.

Přepis náročných knihoven

... na vlastní. Ne nechci nechceme kolo, nicméně jsme se chtěli dostat na pěkná čísla a rychlý e-shop => nižší bounce rate => vyšší obraty.

Jako první jsme našeptávač napsaný ve Vue.js smazali a kolega Šimon Raichl jej přepsal do jednoduché komponenty s JSX syntaxí. Získali jsme 80ms k dobru. Dále jsme přepsali tooltipy (původně Tippy.js) a vytvořili vlastní, původní knihovnu na carousely (Flickity) jsme odebrali a napsali vlastní.

Jde v podstatě o div, ve kterém lze horizontálně scrollovat. Na rozlišení pro velké monitory přidali šipky, které odscrollují divem vždy o šířku carouselu. Na mobilních zařízení šipky schováváme, nativní scroll se chová hezky stejně jako v mobilní aplikaci.

Původní lazyload na obrázky jsme také odebrali a Šimon napsal knihovnu MiniLazyload.

Těmito změnami, včetně optimalizace TTFB, preloadem assetů, používání <picture> elementu, načítání DOM Ajaxem, ... jsme se dostali z 35 bodů na cca. 80 - 90 bodů Google Insight Speed.

I s těmito základními optimalizacemi lze mít rychlou (a relativně komplikovanou) aplikaci. Aktuálně naši backenďáci chystají servírování WebP obrázků, dále budeme optimalizovat menu, pilotně spouštíme zobrazení skeletonů.