Zrychlit web jednou je snadné. Těžší je udržet ho rychlý, když průběžně přidáváte funkce: každá nová komponenta, font nebo knihovna stránku trochu ztíží a nikdo si toho nevšimne, dokud web nepůsobí pomalu. Proto jsme přestali brát rychlost jako jednorázový audit a udělali z ní test, kterým musí projít každá změna.
Kde jsme začínali
Když jsme tento web poprvé pořádně změřili, rozvržení při načítání poskakovalo (Cumulative Layout Shift kolem 0,2) a hlavní obsah se na škrceném mobilním připojení objevoval za 4 až 6 sekund. Hlavní styl měl po kompresi 41 KB, hlavně proto, že se návštěvníkům posílaly i komponenty a validační kód určené pro administraci.
Co jsme změnili
- Návštěvníci dostanou jen kód pro návštěvníky. Knihovna UI administrace a knihovna pro validaci formulářů se už na veřejný web nedostanou. Test projde importy webu a selže, pokud se některá z nich vplíží zpátky.
- CSS jen pro to, co je na stránce. Hlavní styl se zmenšil z 296 KB na 98 KB a po kompresi na 16 KB.
- Fonty, které neposouvají rozvržení. Klíčové fonty se načítají předem a stránka už předem nestahuje kód, který možná nikdy nebude potřeba.
Test, který to tak udrží
U každého pull requestu CI sestaví web, servíruje ho stejně jako produkce — HTTP/2, TLS, komprese — a na čtyřech klíčových stránkách třikrát spustí Lighthouse a vezme medián. Rozpočet: každé skóre aspoň 95, největší obsah viditelný za méně než 2 sekundy, posun rozvržení pod 0,1, blokování hlavního vlákna pod 200 ms. Pokud změna rozpočet překročí, CI zčervená a změna se nesloučí. Souběžně běží kontrola přístupnosti, která na stránkách, jež pokrývá, zatím nenachází žádná porušení WCAG AA.
Výsledek
V CI mají stránky skóre 100 ve všech čtyřech kategoriích Lighthouse a hlavní obsah je vidět za méně než sekundu. Na ostrém webu má domovská stránka 100 s hlavním obsahem zhruba za 1,2 sekundy a stránka produktu 98.
Upřímně říkáme i to, co ještě dokonalé není: stránky v japonštině a dalších jazycích CJK jsou pomalejší, protože jejich fonty jsou mnohem větší. To má vlastní úkol.
Proč je to důležité pro vás
Pomalá stránka ztrácí návštěvníky dřív, než přečtou jediné slovo, a všimnou si toho i vyhledávače. Pokud s námi stavíte landing page nebo e-shop, tento rozpočet je jeho součástí — patří k tomu, jak pracujeme, není to příplatek.