Narzędzia do sprawdzania i optymalizacji Core Web Vitals
Pomijając aplikację internetową PageSpeed Insights, komponent Lighthouse oraz Web Vitals Chrome Extension, do pozyskania wielkości metryk w ramach Core Web Vitals wykorzystać można serwis branżowy WebPageTest.
Serwis WebPageTest został opracowany przez Patricka Meenana do użytku wewnętrznego. W 2008 roku narzędzie zostało udostępnione na licencji BSD, tj. jednej z licencji zgodnych z zasadami wolnego oprogramowania. Wersja online ukazała się z korzyścią dla społeczności zajmującej się analizą wydajności serwisów internetowych.
We wrześniu 2020 roku WebPageTest został przejęty przez Catchpoint, jedną z platform Digital Experience Monitoring, zapewniającą produkty do monitorowania syntetycznego, pomiaru rzeczywistych użytkowników (Real User Measurement, RUM) oraz monitorowania sieci (Network Monitoring, and Endpoint Monitoring).
Studium przypadku
Wartość wskaźnika Largest Contentful Paint (LCP) oznacza czas wyrenderowania największego elementu graficznego lub bloku tekstu i jest wyrażana w sekundach. W przypadku witryny http://homeproject.pl/ największym elementem do wczytania jest grafika (background image) o rozmiarze 1500x1800px oraz objętości nieznacznie przekraczającej 200KB. W trakcie pomiaru odnotowano wartość wskaźnika LCP równą 3816 ms, czyli około 3.82 sekundy, co stanowi rekomendację dla optymalizacji. Według Core Web Vitals wartość LCP nie powinna przekraczać 2.5 sekundy.
Webpage Performance Test Result http://homeproject.pl/ – Video of page loading process (Largest Contentful Paint 3816ms). Źródło: https://webpagetest.org
Cumulative Layout Shift (CLS) to wskaźnik oddający tzw. stabilność wizualną witryny. Według zaleceń Core Web Vitals jego wartość nie powinna przekraczać 0.1 jednostki. W przypadku witryny http://homeproject.pl/ wartość wskaźnika CLS wyniosła 0.033, co jest wynikiem świadczącym o wysokiej stabilności wizualnej witryny. Położenie oraz „zachowanie się” poszczególnych elementów witryny są stabilne w trakcie ładowania strony. Żadne treści nie są wczytywane w sposób nieoczekiwany, co mogłoby negatywnie wpływać na UX.
To o czym można zapomnieć w przypadku testów wykonywanych ad-hoc są ustawienia testu. W tym przypadku pomiary wykonano według ustawień domyślnych w trybie MOBILE – Chrome on an Emulated Motorola G (gen 4) tested from Virginia, US on a 9 Mbps 4G connection with 170ms of latency.