Jak mierzyć prędkość strony internetowej przy użyciu Lighthouse

Na początek trochę teorii. Lighthouse to darmowa aplikacja służąca do automatycznego testowania stron internetowych pod kątem ich wydajności, dostępności, optymalizacji pod kątem wyszukiwarek internetowych. Testować przy pomocy Lighthouse możemy również aplikacje typu PWA (Progressive Web App).

Narzędzie jest częścią projektu Google Chrome i jego kod źródłowy znajduje się GitHub.

Core Web Vitals i indeksowanie stron przez Google

W kwietniu 2021 Google ogłosiło, że od czerwca 2021 będzie brało pod uwagę przy indeksowaniu stron ich wygląd i działanie.

Do tej pory w swoim algorytmie Google uwzględniało przyjazność strony dla urządzeń mobilnych. Bezpieczeństwo rozumiane jako brak wirusów na stronie. Zabezpieczenie https, czyli poprawnie skonfigurowany certyfikat bezpieczeństwa SSL umożliwiający szyfrowanie strony przy użyciu protokołu SSL, brak agresywnych reklam zakrywających całą powierzchnię strony.

Według nowych zasad na pierwsze miejsca wyjdą wskaźniki Web Vitals, a właściwie 3 kluczowe wskaźniki nazwane Core Web Vitals (a po polsku podstawowe wskaźniki internetowe).

Co to jest Core Web Vitals

Lista wskaźników Web Vitals i ich skróty:

Najważniejsze z nich to 3 wskaźniki nazwane właśnie Core Web Vitals. Są to:

Largest Contentful Paint (LCP) - najważniejsze ze wskaźników CWV. Określa go czas potrzebny na załadowanie głównego i największego elementu na stronie. Może to być tekst lub obraz, który będzie widoczny w tzw. viewporcie strony od momentu rozpoczęcia ładowania strony. Wynik uznawany za dobry musi być krótszy od 2.5 sekundy na urządzeniach mobilnych. W LCP brane są pod uwagę takie elementy jak: <img>, <image>, <video>, <svg>, bloki tekstu, tło wypełnione gradientem. Czas dłuższy niż 4 sekundy oceniany jest jako słaby. Pomiędzy 2.5 sekundy a 4 sekundy to średni wynik.

First Input Delay (FID) - mierzy czas potrzebny na interakcję strony od momentu kliknięcia/tapnięcia strony przez użytkownika do momentu, kiedy strona rozpocznie przetwarzanie zdarzenia. Czas uznawany za dobry musi być krótszy od 100 ms. Powyżej 300 ms wynik będzie słaby. Czas pomiędzy 100 i 300 ms będą uznawane za średnie.

Cumulative Layout Shift (CLS) - tym wskaźnikiem mierzone są nieoczekiwane przesunięcia i zmiany położenia obiektów na stronie podczas jej ładowania. Dzieje się tak, gdy elementy DOM ładowane są asynchronicznie i dodawane dynamicznie do wcześniej utworzonej struktury DOM. Wynik wyliczany na podstawie wzoru uznawany za dobry nie może przekraczać wartości 0.1. Od 0.1 do 2.5 wynik jest średni, a powyżej uznawany za słaby.

Lighthouse 8.0

Lighthouse o którym wspominaliśmy na początku to darmowe narzędzie do audytu strony z którego korzysta wiele narzędzi.

Raport można wygenrować w podziale na kategorie:

• Performance (Wydajność)
• Accessibility (Dostępność)
• Best Practices (Najlepsze praktyki)
• SEO (optymalizacje dla wyszukiwarek)
• Progressive Web App (aplikacje PWA)

Audyt wydajność strony internetowej

Obliczając wydajność strony internetowej Lighthouse bierze pod uwagę kilka wskaźników i ich wagi i na tej podstawie wylicza końcowy wynik w procentach. Poniżej rozkład wag i wskaźników dla Lighthouse w wersji 8.0. Audyt programem Lighthouse można wykonać osobno dla wersji mobile i desktop strony internetowej. Warto jednak zawsze testować wersję mobile, bo wynik tego testu brany jet pod uwagę przez Google przy ustalaniu wyników strony w wyszukiwarce.

Jak wpływają wynikach na poszczególnych wskaźnikach na rezultalt końcowy możemy sobie zasymulować korzystając z Lighthouse Scoring Calculator. Narzędzie pozwala obsługuje algorytmy z kilku wersji Lighthouse oraz osobno wylicza wynika dla wersji desktop i mobile

Audyt dostępności strony internetowej

Audyt dostępności w programie Lighthouse bazuje oczywiście na wytycznych WCAG i bada szereg elementów wpływających na dostępność strony z punktu widzenia osób ze szczególnymi potrzebami. Ten audyt jest jeszcze bardziej restrykcyjny od audytu dostępności. Przykładowo jeśli na stronie znajduje się 10 przycisków <button> i dziwięć jest poprawny a jeden nie ma nazwy zgodnej z zasadami WCAG to strona otrzymuje 0% dla tego testów. Testy składające się na dostępność to temat na osobny artykuł wymienimy więc tylko kilka. Nagłówki (headers). Audyt dostępności bada czy nagłówki występują w odpowiedniej kolejności, czyli po nagłówku <h1> jest nagłówek <h2> a nie na przykład <h3>. Bada jest poprawna kolejność [tabindex]. Poprawność atrybutów [aria-*]. Atrybut [alt] dla obrazków i elementów input type="image". Przypisanie labeli do odpowiednich elementów i wiele, wiele więcej.

Audyt najlepsze praktyki

W tym audycie Lighthouse sprawdza wiele elementów kodu HTML, na przykład czy dokument posiada odpowiednio ustawiony doctype. Błędy w konsoli. Wyświetlanie obrazków w niewłaściwych proporcjach. Sprawdzane jest czy serwer obsługuje HTTP/2. Sprawdzenie czy stronie nie używa document.write(). Badana jest wydajność skrolowania strony. Sprawdzane jest czy strona korzysta z https. Sprawdzana jest podatność target="_blank". Lighthouse sprawdza wersje zewnętrznych bibliotek i w przypadku wykrycia starszych wersji ostrzega o ich ewentualnych podatnościach.

Narzędzia do mierzenia szybkości strony internetowej

• PageSpeed Insight
• Web.dev
• Search Console
• Chrome Dev Tools
• Lighthouse (pakiet NPM)
• Lighthouse Extension
• Web Vitals Extensions

PageSpeed Insight - strona internetowa podająca w przystępny sposób szybkość strony w wersji “na komórki” i “na komputery”. Dane pochodzą z testów laboratoryjnych oparty na Lighthouse 8.0 (w momencie pisania tego tekstu).

Web.dev - strona mierząca wydajność stron internetowych w oparciu o oprogramowanie Lighthouse. Serwer web.dev działa w Stanach Zjednoczonych. Dlatego testując strony na serwerach w Polsce będziemy otrzymywali inne wyniki wydajności niż w przypadku Lighthouse uruchomionego lokalnie na komputerze. Co więcej przy każdym uruchomieniu audytu na stronie web.dev wynik testu wydajności może być różny. Wpływ na niego ma jakość połęczenia internetowego między serwerami w USA i Polsce.

Search Console - Raport "Podstawowe wskaźniki internetowe" od niedawna dostępny jest również w narzędziu Search Console. Search console jest o tyle pomocne, że analizuje wszystkie strony w naszej domenie i pokazuje napotkane problemy.

Chrome Dev Tools - oprogramowanie lighthouse można uruchomić z poziomu narzędzi developerskich w przeglądarce Chrome. Przypomnę, że narzędzia uruchamiamy skrótem Command + Option + J w systemie MacOS, Control + Shift + J na Windowsie. Następnie klikamy zakładkę "Lighthouse" i przyciskiem "Generate Report" uruchamiamy program.

Lighthouse (pakiet NPM) - Lighthouse można ściągnąć jako pakiet Node.js i uruchamaić z poziomu CLI. Do działania wymagany jest Google Chrome.

npm install -g lighthouse

Audyty uruchamiamy poleceniem:

lighthouse <url>

Ten sposób nadaje się do automatyzacji przy tworzeniu oprogramowania i sprawdzaniu czy zmiany w kolejnych wersjach nie wpłynęły na pogorszenie jakości strony.

Lighthouse Extension - rozserzenie z Chrome Web Store uruhamiające pełny audyt Lighthouse.

Web Vitals rozszerzenie do Chrome - dostępne w Chrome Web Store rozszerzenie na bieżąco sprawdza 3 główne wskaźniki internetu pokazując je w formie kolorowego kwadratu, a po kliknięciu zmierzone wartości.