Jak zmierzyć prędkość ładowania strony internetowej…

Prędkość ładowania strony internetowej można mierzyć na kilka sposobów:

Narzędzia deweloperskie w przeglądarce:
- Otwórz zakładkę "Network" (Sieć) w narzędziach deweloperskich (F12).
- Odśwież stronę.
- Analizuj wskaźniki czasowe dla każdego zasobu (HTML, CSS, JS, obrazy):
  - Waiting (TTFB): Czas do otrzymania pierwszego bajtu od serwera.
  - Content Download: Czas pobierania zawartości.
  - Total: Całkowity czas ładowania zasobu.
- Zwróć uwagę na diagram Waterfall (wodospad), aby wizualizować kolejność ładowania zasobów.
- Analizuj podsumowanie (Summary) na dole zakładki, aby sprawdzić łączny czas ładowania i liczbę żądań.
Serwisy online do pomiaru prędkości:
- Google PageSpeed Insights: Analizuje wydajność na urządzeniach mobilnych i stacjonarnych, dostarcza rekomendacje optymalizacyjne.
- GTmetrix: Dostarcza metryki PageSpeed i YSlow, szczegółowy raport o ładowaniu, wydajności i rekomendacjach.
- Pingdom Website Speed Test: Mierzy prędkość z różnych lokalizacji, oferuje szczegółową analizę wydajności.
- WebPageTest: Pozwala testować z różnych lokalizacji i przeglądarek, dostarcza wiele metryk i wizualizacji.
Metryki, na które warto zwrócić uwagę:
- Time to First Byte (TTFB): Czas do otrzymania pierwszego bajtu od serwera.
- Largest Contentful Paint (LCP): Czas pojawienia się największego elementu treści w widocznej części ekranu.
- First Input Delay (FID): Czas od pierwszej interakcji użytkownika do odpowiedzi przeglądarki.
- Cumulative Layout Shift (CLS): Całkowity wskaźnik przesunięcia układu podczas ładowania.
- DOMContentLoaded: Czas, gdy przeglądarka w pełni załadowała i sparsowała dokument HTML.
- Load: Czas pełnego załadowania wszystkich zasobów strony.

Automatyzacja za pomocą frameworków:

Lighthouse (narzędzie Google): Może być używany jako narzędzie CLI lub zintegrowany z pipeline’ami CI/CD.

# Przykład użycia Lighthouse CLI
lighthouse https://www.przyklad.pl --output json,html --output-path ./raport.json

Selenium/WebDriver: Można użyć do załadowania strony i uzyskania czasu ładowania przez API Performance JavaScript.

# Przykład uzyskania czasu ładowania za pomocą Selenium i Performance API
from selenium import webdriver
import time

driver = webdriver.Chrome() # lub inna przeglądarka
driver.get("https://www.przyklad.pl")

# Czekaj na pełne załadowanie strony
time.sleep(5) # można użyć bardziej niezawodnych oczekiwań

# Pobierz obiekt PerformanceTiming
performance_timing = driver.execute_script("return window.performance.timing")

# Oblicz czas ładowania
load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
print(f"Czas ładowania: {load_time} ms")

driver.quit()

Cypress: Również zapewnia dostęp do API Performance.

Systemy monitorowania RUM (Real User Monitoring):
- Narzędzia zbierające dane o wydajności bezpośrednio od rzeczywistych użytkowników na stronie. Przykłady: Sentry, New Relic Browser.

Wybór metody zależy od celów: do szybkiej oceny odpowiednie serwisy online, do szczegółowej analizy i debugowania narzędzia deweloperskie, a do regularnego monitorowania i integracji z procesami rozwojowymi — automatyzacja i systemy RUM.

Jak zmierzyć prędkość ładowania strony internetowej?