Optimalizace rychlosti

Obrázky

Všechny obrázky šablony (PNG/JPG/GIF) prochází optimalizací. Jsou odstraněná zbytečná data (EXIFF, …) a je provedena beztrátová komprese.

Tato optimalizace probíhá až po zveřejnění.

Obrázky v CSS

Obrázky použité v CSS (background, …) můžou být nahrazeny za data-uri. Díky tomu se načeká na jejich načtení a jsou obsaženy přímo v CSS. Aby byl obrázek převeden na data-uri, musí splnit tyto podmínky:

  • obrázek nesmí být větší než 1 kB (po optimalizaci)
  • obrázek se v CSS vyskytuje jen jednou

Minifikace CSS

Všechny CSS soubory (včetně pluginů) jsou spojeny do jednoho a následně minifikovány. Zápis vlastností je zjednodušen (například se spojí margin-left, margin-right, margin-top do jednoho margin) a jsou spojeny stejné vlastnosti dohromady.

/* původní CSS */
.product .price {
    display: none;
}
.hidden {
    display: none;
}

/* minifikovaný výstup */
.product .price,.hidden{display:none}

Minifikace Javascriptu

Všechny JS soubory jsou spojeny do jednoho (včetně pluginů) a minifikovány. Jsou odstraněny bílé znaky, nepoužitý kód a proměnné uvnitř funkcí nahrazeny za kratší.

Minifikaci můžete pomoct obalením logických celků do anonymní funkce. Výsledkem bude menší minifikovaný kód a navíc izolace kódu od zbytku šablony. Obalení má smysl jen u větších celků jako je třeba javascript dodání - naopak nemá smysl obalovat definici jednoho banneru.

(function(){
    // dlouhý kód
}());

Javascript

Javascript je načítán na konci stránky. Díky tomu zobrazení stránky nečeká na jeho načtení. Návštěvník může stránku používat už před načtením javascriptu, takže by měla bez něj fungovat.

Všechny pluginy jsou initovány až jako poslední, takže je potřeba počítat s tím v CSS. Například je nutné v CSS skrýt všechny taby kromě prvního a nespoléhat se na skrytí přes javascript.

V javascriptu není potřeba používat $(document).ready - díky načítání na konci je funkce zbytečná a naopak zpomaluje běh.

Lazy-load

Při použití bannerů vždy používejte lazy-load. První banner se do stránky normálně vypíše a další se načtou až v případě potřeby. Výrazně se tím zrychlí načítání stránky.

<div class="owl-carousel">
    {%for banner in zdroj_bannery_index%}
        <a href="{{banner.odkaz}}" title="{{banner.popis?banner.popis:banner.nazev}}" class="item">
            {%if loop.first%}
                <img src="banner.link" alt="{{banner.alt}}">
            {%else%}
                <img data-src="{{banner.link}}" class="owl-lazy" alt="{{banner.alt}}">
            {%endif%}
        </a>
    {%endfor%}
</div>
var $owlCarousel = $('.owl-carousel');
if ($owlCarousel.size()) {
    $owlCarousel.owlCarousel({
        loop: true,
        items: 1,
        autoplay: true,
        autoplayTimeout: 8000,
        autoplayHoverPause: true,
        autoplaySpeed: 1000,
        lazyLoad: true
    });
}

Critical CSS

Při odeslání změn do ostré verze se vygeneruje critical CSS. Výsledkem jsou styly, které jsou nutné pro přibližné zobrazení stránky. Při jejich použití se nečeká se zobrazením stránky na načtení všech stylů a zobrazí se hned.

Stránka pravděpodobně nebude mít 100% vzhled, ale zobrazí se rychleji. Po načtení klasických stylů se pak vzhled opraví. Prodleva mezi kritickými a kompletními styly je obvykle menší jak 1 sekunda, ale má zásadní vliv na dojem z rychlosti načítání webu.

Critical CSS lze testovat mačkáním CTRL+F5 (probliknou kritické styly a následně se načtou normální). Při testování ale počítejte s tím, že v reálném nasazení nemá uživatel v cache obrázky a podobně. Nejreálnější náhled získáte přes Google PageSpeed

Písma

Písma vložená v config.json jsou automaticky převáděna do optimálního formátu.

V ostré verzi pak jsou načítána asynchronně. Nejprve se načtou styly eshopu se systémovým písmem (pokud není definováno ve font-family, použije se systémové písmo z definice fontu) a asynchronně se načítají správné fonty. Po úspěšném načtení se fonty použijí.

Na mobilním připojení se může stát, že se fonty nenačtou vůbec - pokud je připojení příliš pomalé, tak eshop raději fonty nezkouší stahovat a použije systémové.

Při prvním načtení návštěvník vidí nejprve systémové fonty a až o ~vteřinu později normální. Při dalším načtení už jsou fonty v cache, takže neblikají. Díky tomuto postupu je první načtení rychlejší.