Na rýchlosti záleží. Optimalizujte CSS a boostnite váš predaj!

Na optimalizácii webu sa dá pracovať stále. Toto tvrdenie podčiarkuje nie raz, ani dvakrát, ale minimálne trikrát výsledok štúdie Milliseconds make millions od spoločnosti Deloitte zameranej na konverziu návštev webu na objednávky v závislosti od rýchlosti načítania mobilnej verzie stránky.

Dôvod? Odhaduje sa, že predaj prostredníctvom mCommerce sa do roku 2023 zdvojnásobí a bude tak tvoriť v globále ¾ všetkých eCommerce obchodov.

Výsledok? Zlepšením rýchlosti načítania mobilného webu o 0,1 s malo pozitívny dopad na počet návštevníkov, mieru konverzie a priemernú hodnotu objednávky. Napríklad len v maloobchode vzrástla miera konverzie o 8,4 % a hodnota jednej objednávky o 9,2 %. A to sú čísla, nad ktorými sa už len tak mávnuť rukou nedá.

Jeden zo spôsobov, ako dosiahnuť vyššiu rýchlosť načítania vášho webu, je optimalizácia CSS súborov.

Ako vplýva CSS na rýchlosť načítania webu?

Všetko začína tým, že prehliadač stiahne HTML dokument, zanalyzuje ho a vytvorí DOM (Document Object Model). V momente, keď narazí na externý zdroj dát (CSS, JS, obrázky), priradí mu prioritu a podľa nej začne s jeho sťahovaním. CSS stylesheets majú zvyčajne vysokú prioritu, lebo sú dôležité pre vytvorenie CSSOM (CSS Object Model). DOM a CSSOM potrebuje prehliadač na vykreslenie webu. A len ak má obe k dispozícii, začne s vykresľovaním. Sú teda dva aspekty v spojení s CSS, ktoré ovplyvňujú rýchlosť načítania webstránky – samotná veľkosť CSS súborov a priradená priorita pri sťahovaní. Obidva aspekty sa dajú optimalizovať.

1. Zmenšite veľkosť vášho CSS stylesheet

Dnes je úplne bežné, že sa na zefektívnenie práce, vytvorenie prefixov a fallbackov pre staršie prehliadače, alebo kvôli iným vylepšeniam pri vytváraní CSS, používajú rôzne pre/post procesory, prípadne iné nástroje. Jednou z možností, ako znížiť loading time vášho CSS súboru, je zmenšenie jeho veľkosti.
Toto dosiahnete napríklad odstránením zbytočných častí kódu. K tomu sa dopracujete jednoduchou aktualizáciou browserslistu autoprefixera, aktualizáciou nastavení ďalších nástrojov, ktoré používate alebo napríklad pluginom na zlúčenie použitých média queries vo vašom CSS stylesheete. Takýmto relatívne jednoduchým spôsobom viete ušetriť aj niekoľko kilobajtov.

Viac info, ako na aktualizáciu browserslistu a PostCSS:

2. Použite Critical CSS

Ďalší spôsob, ako výrazne zvýšiť rýchlosť zobrazenia vášho webu, je zníženie počtu requestov. Ako vieme, prehliadač štandardne začína s vykresľovaním webu až po kompletnom načítaní CSS súborov, čo môže spôsobiť najmä pri pomalších pripojeniach delay v podobe bielej obrazovky. Pri prvej návšteve stránky ale návštevník nepotrebuje mať ihneď načítaný celý web. Reálne mu stačí len tá časť webu, ktorá sa mu vojde do viewportu na jeho zariadení. Na to treba obsahovo len veľmi malú časť vášho CSS. Túto kritickú časť CSS môžete vložiť v inline podobe pomocou <style> priamo do HTML kódu a CSS načítať asynchrónne pomocou JavaScriptu:

<script>
        loadCSS(“style.css“);
</script>

Takto výrazne zlepšíte rýchlosť zobrazenia stránky s tým, že na rýchlosť načítania celého webu to až taký vplyv mať nebude. Podstatné je, že vďaka tejto technike sa návštevníkovi zobrazí web rýchlejšie. Našťastie nemusíte to byť vy, kto rozhodne, čo z CSS bude vložené do HTML. Existujú na to nástroje.

Meranie rýchlosti zobrazenia a načítania webu:

Generovanie Critical CSS:

Pri použití tejto techniky je potrebné si uvedomiť, že ide o kompromis. Na jednu stranu eliminujete načítavanie celého CSS stylesheet, na tú druhú trochu zväčšíte všetky vaše stránky a podstránky, kde túto techniku použijete.

Lazy load

Aby sme dosiahli želaného efektu, je potrebné ďalšie CSS súbory načítavať asynchrónne a teda nastaviť ich do tzv. „lazy load“ módu. Odkedy sa štandardizoval proces načítania CSS v prehliadačoch, dá sa toto dosiahnuť aj jednoduchým HTML zápisom a JavaScript už nie je potrebný:


<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

Dôležité je nastavenie media atribútu na print a onload na all. Dôvody si vysvetlíme v samostatnom blogu.

3. Rozdelenie kódu

Chrome DevTools ponúka užitočný nástroj s názvom Coverage, ktorý vám krásne pomôže identifikovať nepoužité CSS a JavaScript na vašej stránke. V prípade JavaScriptu je úplne bežné, že je rozdelený na menšie súbory, ktoré sa načítavajú, keď ich je treba. Podobným prístupom vieme rozdeliť a teda zmenšiť aj CSS súbory. To je možné spraviť tromi rôznymi spôsobmi:

Rozdelenie na základe media queries
Rozdelenie podľa jednotlivých stránok vášho webu
Rozdelenie na základe komponentov

Rozdelenie na základe media queries

Týmto spôsobom sa rozdelí stylesheet na menšie súbory, ktoré sa následne refernú do vášho HTML. V PostCSS na to existuje plugin. Je však potrebné povedať, že pri použití techniky Critical CSS a lazy load na zrýchlenie zobrazenia vašej stránky tento spôsob rozdelenia CSS súboru veľmi nedáva zmysel, respektíve nie je už potrebný. Prehliadač stiahne všetky CSS súbory bez ohľadu na to, aké media query sa použije. Atribút media v tomto prípade slúži na prioritizovanie sťahovania CSS súboru. Prehliadač stiahne CSS s aktívnym media query a lazy loadne tie zvyšné.

Príklad zápisu:

<link rel="stylesheet" href="index.css" media="all" />
<link rel="stylesheet" href="mobile.css" media="(max-width:44.9375rem)" />
<link rel="stylesheet" href="table.css" media="(min-width: 45rem)" />

Rozdelenie CSS podľa jednotlivých stránok vášho webu

V ideálnom svete by váš CSS súbor obsahoval len CSSko nevyhnutne potrebné na zobrazenie vašej webky bez akýchkoľvek ďalších nepoužitých štýlov. Znie to skvelo, no nie je také jednoduché nájsť nástroj, ktorý by vám rozdelil CSS na menšie časti na základe obsahu jednotlivých stránok. Zároveň je potrebné povedať, že dosiahnuť stav, kedy váš CSS súbor neobsahuje žiadne nepoužité štýly, je v podstate nemožné. Už len kvôli responzívnosti webu bude obsahovať rôzne media queries, ktoré nejaký ten bajt zjedia. Jednou z možností, ako toto dosiahnuť, je použitie dostupného CSS Split-u pre staticky generované webstránky od Tomáša Pustelníka.

Rozdelenie na základe komponentov

Tento spôsob rozdeľovania CSS nás zaviedol až k reaktívnym JS frameworkom ako sú React, Vue alebo Angular, ktoré slúžia na programovanie SPA a webových aplikácií. Tieto technológie majú viacero spoločných znakov, no v kontexte tohto blogu nás zaujímajú najmä reaktívnosť a programovanie pomocou komponentov, z ktorých je web aplikácia vyskladaná. Napríklad vo Vue každý jeden komponent obsahuje vlastné HTML, CSS a JavaScript. Tak sa zabezpečí, že samostatné komponenty neobsahujú „tonu“ nevyužitých štýlov. Aj jednotlivé komponenty sa dajú načítať asynchrónne lazy load metódou, aby sa zabezpečilo ešte rýchlejšie zobrazenie vašej SPA, respektíve MPA.