######################
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.

.. code-block:: css

    /* 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.

.. code-block:: javascript

    (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.

.. code-block:: html+twig

    <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>

.. code-block:: javascript

    var $owlCarousel = $('.owl-carousel');
    if ($owlCarousel.size()) {
        $owlCarousel.owlCarousel({
            loop: true,
            items: 1,
            autoplay: true,
            autoplayTimeout: 8000,
            autoplayHoverPause: true,
            autoplaySpeed: 1000,
            lazyLoad: true
        });
    }

========
WebFonts
========

Google Fonts se načítají z CDN pomocí preload, aby byly co nejdříve k dispozici a s nastavený font-display:swap. Nejprve se tak zobrazí web pomocí fallback fontu a problikne na finální font po jeho načtení. Pro minimalizaci změny vzhledu po načtení fontu je možné použít třídu **wf-active**, která se nastaví na HTML tag po načtení všech fontů.

Kromě fallback fontu je nutné tkaé srovnat letter-spacing apod, aby text byl co nejpodobnější. Pro nalezení správného nastavení nejrychleji funguje FontStyleMatcher__. Načítání webu bez web fontu lze otestovat přidáním *?_disableWebFonts* do URL.

    __ https://meowni.ca/font-style-matcher/

Příklad zápisu:

.. code-block:: css

    h1 {
        font-family: Verdana, sans-serif;
        letter-spacing: 0.4px;
    }
    .wf-active h1 {
        font-family: 'Open Sans', Verdana, sans-serif;
        letter-spacing: 0;
    }


.. image:: https://cloud.githubusercontent.com/assets/1369170/20506300/ed61ebac-b007-11e6-8324-df0a90604acd.gif
   :width: 600

============
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 ověřit v ostré verzi mačkáním CTRL+F5 (probliknou kritické styly a následně se načtou normální) nebo přidáním parametru **?_forceCritical** na konec URL (pouze po přihlášení). 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__

    __ https://developers.google.com/speed/pagespeed/insights/


Automatické generování critical CSS probíhá nad hlavními typovými stránkami a pro každou se vybere náhodně URL (například náhodný produkt). Může se pak ale stát, že některé produkty mají jiné rozložení. Do config.json je proto možné definovat, které CSS selectory se mají vždy zahrnout bez ohledu na to, jestli byly na stránce vidět.

config.json:

.. code-block:: json

    {
        "webfonts":[
            "Open Sans:400,600,700"
        ],
        "criticalCss": {
            "global": {
                "forceInclude": [".header-info-bar"],
                "forceExclude": [".promo-dialog"]
            },
            "index": {
                "forceInclude": [".main-banner"],
                "forceExclude": [".video-player"]
            },
            "product": {
                "forceInclude": [".image-gallery"]
            },
            "category": {
                "forceInclude": [".image-gallery"]
            },
            "subcategory": {
                "forceInclude": [".image-gallery"]
            },
            "page": {
                "forceInclude": [".image-gallery"]
            }
        }
    }