Mierzysz, czy zgadujesz?

Tworzenie strony internetowej nie kończy się na wdrożeniu. Regularne testowanie wydajności, dostępności i jakości kodu to proces, który powinien towarzyszyć całemu cyklowi życia projektu. Bez obiektywnych pomiarów opieramy się na przeczuciach — a te potrafią być mylące.

W tym artykule przedstawiamy narzędzia, których używamy na co dzień do testowania stron naszych klientów i własnych serwisów.

Google Lighthouse

Lighthouse to bezpłatne narzędzie od Google, wbudowane w Chrome DevTools. Przeprowadza kompleksowy audyt strony w pięciu kategoriach:

  • Performance — szybkość ładowania i interaktywność
  • Accessibility — dostępność dla osób z niepełnosprawnościami
  • Best Practices — bezpieczeństwo, poprawność kodu, nowoczesne standardy
  • SEO — podstawowa optymalizacja pod wyszukiwarki
  • PWA — zgodność z wymogami Progressive Web App

Każda kategoria otrzymuje ocenę 0-100, wraz ze szczegółowymi rekomendacjami.

Jak uruchomić Lighthouse:

  1. Otwórz Chrome DevTools (F12)
  2. Przejdź do zakładki "Lighthouse"
  3. Wybierz kategorie i urządzenie (mobile/desktop)
  4. Kliknij "Analyze page load"

Kluczowe metryki Performance:

  • FCP (First Contentful Paint) — czas do wyświetlenia pierwszej treści. Cel: poniżej 1.8s
  • LCP (Largest Contentful Paint) — czas do wyświetlenia największego elementu. Cel: poniżej 2.5s
  • TBT (Total Blocking Time) — czas blokowania głównego wątku. Cel: poniżej 200ms
  • CLS (Cumulative Layout Shift) — stabilność wizualna (przeskakiwanie elementów). Cel: poniżej 0.1
  • SI (Speed Index) — jak szybko zawartość jest wizualnie kompletna

Wskazówka: wyniki Lighthouse mogą się różnić między uruchomieniami. Przeprowadź kilka testów i weź średnią. Zamknij inne karty przeglądarki — obciążenie procesora wpływa na wyniki.

GTmetrix

GTmetrix (gtmetrix.com) to popularne narzędzie online oferujące szczegółową analizę wydajności strony. W porównaniu do Lighthouse, GTmetrix dodaje:

  • Waterfall chart — wizualizacja kolejności i czasu ładowania każdego zasobu (HTML, CSS, JS, obrazki, fonty). Nieocenione przy diagnozowaniu wąskich gardeł
  • Historię wyników — śledzenie zmian wydajności w czasie (w darmowym planie do 1 strony)
  • Testy z różnych lokalizacji — Vancouver, Londyn, Sydney i inne. Przydatne, gdy Twoi użytkownicy są rozproszeni geograficznie
  • Porównania — zestawienie wyników przed i po optymalizacji

Na co zwracać uwagę w GTmetrix:

  • Czas do pełnego załadowania (Fully Loaded Time)
  • Liczba żądań HTTP — im mniej, tym lepiej
  • Rozmiar strony — kompresja, optymalizacja obrazów, minifikacja
  • Blokujące zasoby renderowania — CSS i JS ładowane synchronicznie w <head>

WebPageTest

WebPageTest (webpagetest.org) to zaawansowane narzędzie open-source, oferujące możliwości niedostępne w innych narzędziach:

  • Filmstrip view — klatka po klatce, jak strona ładuje się wizualnie
  • Test wielokrotny — automatyczne uruchomienie wielu testów i porównanie wyników
  • Testowanie na prawdziwych urządzeniach — nie symulacja, ale rzeczywiste telefony i tablety
  • Blokowanie domen — testowanie wydajności po zablokowaniu zewnętrznych skryptów (np. "jak szybko działałaby strona bez analytics?")
  • Test pierwszej i powtórnej wizyty — pomiar wpływu cache'owania

WebPageTest jest szczególnie przydatny do głębokiej diagnostyki problemów z wydajnością, których prostsze narzędzia nie wykrywają.

Chrome DevTools — codziennie pod ręką

Wbudowane narzędzia deweloperskie Chrome to potężny zestaw do bieżącego testowania:

Zakładka Network

  • Filtrowanie żądań według typu (XHR, JS, CSS, Img)
  • Throttling — symulacja wolnego połączenia (3G, 4G)
  • Disable cache — testowanie bez cache'u przeglądarki
  • Waterfall — identyfikacja żądań blokujących renderowanie

Zakładka Performance

  • Nagrywanie profilu wydajności — szczegółowa analiza, co zajmuje czas
  • Flame chart — wizualizacja stosu wywołań JavaScript
  • Layout shifts — identyfikacja przeskoków elementów (CLS)

Zakładka Application

  • Inspekcja Service Workerów, cache'u, cookies, localStorage
  • Testowanie offline — jak strona zachowuje się bez internetu

Zakładka Coverage

Mniej znana, ale niezwykle przydatna funkcja. Pokazuje, ile procent załadowanego CSS i JavaScript jest faktycznie używane na danej stronie. Typowy wynik to 60-80% niewykorzystanego kodu — ogromna okazja do optymalizacji.

PageSpeed Insights

PageSpeed Insights (pagespeed.web.dev) to narzędzie Google łączące wyniki Lighthouse z danymi z Chrome User Experience Report (CrUX) — realnych pomiarów od użytkowników Chrome.

To kluczowa różnica: Lighthouse mierzy wydajność w symulowanym środowisku, a CrUX pokazuje, jak strona naprawdę działa u realnych użytkowników. Dane CrUX to te same dane, które Google wykorzystuje w rankingu wyników wyszukiwania.

PageSpeed Insights pokazuje osobne wyniki dla mobile i desktop oraz oznacza metryki Core Web Vitals jako "dobre", "wymagające poprawy" lub "słabe".

Inne przydatne narzędzia

  • Pingdom Tools (tools.pingdom.com) — prosty test wydajności z oceną i rekomendacjami
  • Yellow Lab Tools (yellowlab.tools) — zaawansowana analiza kodu CSS i JS, wykrywanie złych praktyk
  • Webhint (webhint.io) — audyt najlepszych praktyk webowych, alternatywa dla Lighthouse
  • WAVE (wave.webaim.org) — specjalistyczne narzędzie do testowania dostępności
  • SSL Labs (ssllabs.com) — test konfiguracji SSL/TLS serwera

Strategia testowania — kiedy i co sprawdzać

Aby testowanie przynosiło realne korzyści, warto ustalić regularny proces:

Przed wdrożeniem:

  • Lighthouse audit (Performance, Accessibility, Best Practices)
  • Test na throttled connection (3G) w DevTools
  • Sprawdzenie Coverage — czy nie ładujemy zbędnego kodu

Po wdrożeniu:

  • WebPageTest z kilku lokalizacji
  • GTmetrix jako baseline do przyszłych porównań
  • PageSpeed Insights — sprawdzenie danych CrUX (dostępne po kilku tygodniach)

Regularnie (co miesiąc):

  • Porównanie wyników GTmetrix z poprzednim miesiącem
  • Sprawdzenie, czy zewnętrzne skrypty (analytics, czat, reklamy) nie spowolniły strony
  • Audyt SSL Labs po zmianach certyfikatów

Podsumowanie

Żadne pojedyncze narzędzie nie da pełnego obrazu jakości strony. Lighthouse to świetny punkt wyjścia, GTmetrix pomaga śledzić zmiany w czasie, WebPageTest pozwala na głęboką diagnostykę, a Chrome DevTools to niezbędnik codziennej pracy.

Najważniejsze to mierzyć regularnie, porównywać wyniki w czasie i reagować na regresje. Szybka, dostępna i poprawnie działająca strona to nie efekt jednorazowej optymalizacji, ale ciągłego procesu.

Chcesz profesjonalny audyt wydajności swojej strony? Skontaktuj się z nami — przygotujemy szczegółowy raport z rekomendacjami.