Strona główna cometweb.io przed poprawką i po niej

Maciej Zmitrukiewicz · Pakiet badania

To pomiar do artykułu Core Web Vitals: dane laboratoryjne a CrUX. Po próbie diagnostycznej poprawiłem stronę główną w dwóch krokach i po każdym zmierzyłem ją na produkcji tak samo jak wcześniej.

Na co patrzyłem

Każdy wariant to siedem przebiegów Lighthouse w domyślnym profilu mobilnym z symulowanym dławieniem, z nową przeglądarką przy każdym przebiegu. Podaję medianę. Najpierw odroczyłem CSS dema, które blokował renderowanie. Potem wyciąłem z paczki JavaScriptu, którą layout ładuje na każdej stronie, cały słownik haseł i tabelę meta wszystkich podstron. JavaScript ładowany przed pierwszym renderem strony głównej spadł przez to z 329 do 208 KB po kompresji gzip.

Wyniki

Wariant	LCP	FCP	Wynik
Przed poprawką	6,39 s	4,14 s	65
Po odroczeniu CSS	6,34 s	4,02 s	65
Po odroczeniu CSS i odchudzeniu JS	5,46 s	3,64 s	69

Samo odroczenie CSS skróciło FCP o 0,12 s i prawie nie ruszyło LCP. Zysk dało dopiero odchudzenie JavaScriptu.

Czego te dane nie pokażą

Jak zmiana działa u prawdziwych użytkowników. To dane laboratoryjne z jednego komputera, a CrUX nie ma danych dla cometweb.io.
Jak zachowają się inne podstrony. Mierzyłem tylko stronę główną.

Pliki

prod-before.json: przebiegi przed poprawką
prod-after-css-only.json: przebiegi po samym odroczeniu CSS
prod-after.json: przebiegi po obu zmianach
lcp-home.mjs: skrypt pomiaru

Żeby to powtórzyć z Lighthouse 13.5, uruchom CHROME_PATH=<Chromium> node lcp-home.mjs https://cometweb.io/ 7 wynik.json.

Wróć do artykułu