Úvod > Šablony > Web > Checklist rychlosti webu pro rok 2022 od PageSpeed.cz

Checklist rychlosti webu pro rok 2022 od PageSpeed.cz

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ů

Line Copy 3 Created with Sketch.

Jak na to

Page 1 Created with Sketch.