7 tipov pre rýchlejší web

Rýchlosť načítania webu je extrémne dôležitou súčasťou "user experience". Takmer 40% návštevníkov opúšťa web, ak načítanie trvá dlhšie ako 3 sekundy. Google od roku 2010 považuje "page speed" za jeden z faktorov ovplyvňujúci SEO. Zamerajme sa preto na techniky, ktoré vám ho pomôžu optimalizovať.

1. Minifikácia HTML, CSS a JS súborov

Minifikácie je proces, kedy odstránime všetky nepotrebné a nadbytočné elementy (medzery, komentáre), ktoré neovplyvnia funkčnosť alebo vzhľad stránky. Týmto krokom dosiahneme zmenšenie prenášaných súborov a tým pádom načítanie stránky zrýchlime. Na minifikáciu môžeme rôzne knižnice:

2. WebP formát

WebP je moderný formát ponúkajúci stratovú ale aj bezstratovú kompresiu obrázkov. Oproti štandardným formátom ako JPEG, PNG alebo GIF poskytuje 25 - 35% úsporu veľkosti súboru. V čase písania článku má už veľmi sľubnú podporu prehliadačov. Je však dobré mysliť aj na tých, ktorí majú staršie verzie alebo prehliadač bez podpory.

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="Alternate text">
</picture>

Prehliadač použije prvý podporovaný formát, preto je dobré umiestniť webp obrázok na prvé miesto. Tag <img> slúži ako fallback pre prehliadače, ktoré nepodporujú tag <picture>

3. Asynchronné načítanie obrázkov

Myšlienka na úvod. Prečo sťahovať zdroje, ktoré nie sú nevyhnutné pre vykreslenie stránky? Mám na mysli hlavne obrázky alebo videá mimo "viewport" prehliadača. Určite ste si na vašich obľúbených portáloch všimli, že sa obrázky načítavajú v momente skrolovania stránky. Táto technika sa nazýva lazy loading. Princíp spočíva v nahradení hodnoty src atributu cestou k požadovanému obrázku. Existuje niekoľko spôsobov implementácie (event handlery, intersection observer) avšak najjednoduchší je cez externé knižnice ako napríklad:

Pre účely ukážky som si vybral knižnicu lazysizes
<script src="lazysizes.min.js" async></script>

<img src="" data-src="image.jpg" class="lazyload" />
<img src="" data-src="image2.jpg" class="lazyload" />
<img src="" data-src="image3.jpg" class="lazyload" />

Existuje aj natívna alternatíva (vlastnosť lazyload). Bohužiaľ, v čase písania článku bola podpora v prehliadačoch veľmi slabá a preto uvažujme o tejto možnosti len ako o budúcom nástupcovi.

<img src="image.jpg" lazyload="on" alt="Image">

4. Responzívne obrázky

Pre niekoho môže byť nadpis tejto sekcie zavádzajúci. Stačí ak na obrázok použijem CSS štýl width: 100% a hotovo. Áno, ale nie v tomto kontexte.
Presuňme sa do čias, keď bol web ešte len v plienkach. Webové stránky sa dali pozerať maximálne tak na desktope alebo notebooku a preto programátorovi príp. dizajnérovi stačilo ak uvažoval o jednom rozmere obrázka. V dnešnej dobe, kedy nás zasiahla invázia mobilných zariadení sa musíme pozerať na web inak. Vznikajú tu dva problemy:

  • obrázok vytvorený pre veľké obrazovky stráca detaily pri malých rozlíšeniách
  • pri oboch obrazovkách musíme prenášať rovnako veľké súbory
Keďže je tento článok o optimalizácií rýchlosti náčítania webu zamerajme sa na druhý problém. Klasický img element rozšírme o vlastnosti srcset a sizes.
<img srcset="my-image-320w.jpg 320w,
             my-image-480w.jpg 480w,
             my-image-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="my-image.jpg" alt="Alternate text">
Prehliadač si na základe podmienok definovaných v sizes vyberie vhodnú veľkosť obrázka zo srcset.

5. Asynchronné načítanie CSS

CSS je štandardne považované za blokujúci element. To znamená, že blokuje vykresľovanie stránky pokiaľ sa nenačíta a nevytvorí tzv. CSSOM (CSS Object Model). Je to pochopiteľné, pretože nechceme aby sa návštevníkom zobrazila rozbitá stránka bez žiadneho štýlovania. V určitých prípadoch by sa nám však hodila možnosť nečakať na CSS a pokračovať vo vykresľovaní. Môže to byť prípad načítavania externých pluginov alebo fontov, ktoré nie sú nevyhnutné pre správne zobrazenie.

<link rel="stylesheet" type="text/css" media="none" onload="this.media='all';" href="https://path/to/style.min.css">
<link rel="stylesheet" type="text/css" media="none" onload="this.media='all';" href="https://path/to/another-style.min.css">
Samozrejme táto technika bude fungovať pokiaľ má návštevník povolený JavaScript. Ako fallback môžeme použiť <noscript> ekvivalent.
<link rel="stylesheet" type="text/css" media="none" onload="this.media='all';" href="https://path/to/style.min.css">
<noscript><link rel="stylesheet" type="text/css" media="all" href="https://path/to/style.min.css"></noscript>

<link rel="stylesheet" type="text/css" media="none" onload="this.media='all';" href="https://path/to/another-style.min..css">
<noscript><link rel="stylesheet" type="text/css" media="all" href="https://path/to/another-style.min..css"></noscript>

6. Podmienené načítanie CSS

Podobne ako pri asynchrónnom načítaní obrázkov môžeme uvažovať aj pri CSS súboroch. Neprenášajme zdroje, ktoré v danom momente nepotrebujeme. Návštevník prezerajúci stránku alebo aplikáciu cez mobil nepotrebuje CSS štýly určené pre desktop. Rozdelme CSS do viacerých súborov, pričom pomocou media query zadefinujme za akých podmienok sa majú použiť.

<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="phone.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 768px)" href="tablet.css" />
<link type="text/css" rel="stylesheet" media="print" href="print.css" />

7. Asynchronné načítanie JavaScriptu

Rovnako ako CSS aj JavaScript štandardne blokuje vykreslenie stránky. Pridanie vlastnosti async do volania externého JavaScriptu spôsobí, že prehliadač nepreruší vytváranie DOM (Document Object Model) a zdroj načíta asynchronne.

 <script src="main.js" async></script>