Na rychlosti záleží. Mnoha případovými studiemi bylo prokázáno, že rychlost webu může mít vliv na konverze uživatelů. V posledních letech je navíc rychlost na mobilech i počítačích zvažována Googlem jako jeden ze signálů pro hodnocení stránky ve výsledcích vyhledávání. Otestujte si web v testeru rychlosti PageSpeed.cz nebo projděte úkoly v checklistu, který přebíráme s laskavým svolením autorů.
Ukázka veřejné šablony ve Freelu
Použij tuto šablonu ve svém Freelu
= Měření
Měřit pravidelně a všechny vstupní stránky: viz tester PageSpeed.cz
Sledovat vývoj metrik Web Vitals u uživatelů v Google Search Console a na PageSpeed.cz
Držet hodnoty metriky Web Vitals na doporučené úrovni: LCP < 2,5 s; FID < 100 ms; CLS < 0,1
= Produkční soubory webu
Minifikovat textové soubory (HTML, CSS, JS…) před umístěním na web
Pokud je to možné, frontendové soubory hostovat na vlastní doméně
= Obrázky
Optimalizovat datový objem pomocí nástrojů jako MozJPEG, Kraken.io nebo Squoosh pro jednorázové optimalizace
Na mobilní zařízení posílat menší velikost obrázků, například pomocí parametrů srcset a sizes v <img>
Využít úsporného formátu WebP, zvážit také AVIF
Nasadit líné načtení, nejlépe pomocí atributu loading="lazy"
Neaplikovat líné načtení na obrázky, které tvoří hlavní obsah stránky (LCP element)
U obrázků v <img> vždy doplňovat parametry width/height, aby nedocházelo k nechtěným posunům layoutu
= Fonty
Využít vlastnost font-display v CSS pro rychlé první vykreslování
Zmenšit velikost webfontů jejich subsetováním
Využít variable fonts
= JavaScript
Pokud je to možné, vlastní JS vkládat jako neblokující před HTML značku </body>
Sledovat vliv třetích stran na metriku Total Blocking Time, například pomocí nástroje Lighthouse
= Server
Rychlost odezvy serveru (metrika TTFB) držet maximálně do 500 ms
Zapnout OCSP stapling, který zrychlí proces TLS autentizace
Zkontrolovat nastavení komprese textových souborů pomocí Gzip, zvážit novější kompresi Brotli
U frontendových souborů nastavit doby kešování v prohlížeči (max-age) na rok a cache invalidovat změnou názvu souboru
= Ostatní
Velikost DOM elementů držet ideálně pod 1 500 uzlů