Jak změřit rychlost načítání webové stránky?

Rychlost načítání webové stránky lze měřit několika způsoby:

1. Nástroje pro vývojáře v prohlížeči:

   • Otevřete záložku "Network" (Síť) ve vývojářských nástrojích (F12).
   • Obnovte stránku.
   • Analyzujte časové ukazatele pro každý zdroj (HTML, CSS, JS, obrázky):
     • Waiting (TTFB): Čas do obdržení prvního bajtu ze serveru.
     • Content Download: Čas stahování obsahu.
     • Total: Celkový čas načítání zdroje.
   • Věnujte pozornost diagramu Waterfall (vodopád) pro vizualizaci sekvence načítání zdrojů.
   • Analyzujte shrnutí v dolní části pro celkový čas načítání a počet požadavků.

2. Online služby pro měření rychlosti:

   • Google PageSpeed Insights: Analyzuje výkon na mobilních a desktopových zařízeních, poskytuje doporučení pro optimalizaci.
   • GTmetrix: Poskytuje metriky PageSpeed a YSlow, podrobnou zprávu o načítání, výkonu a doporučeních.
   • Pingdom Website Speed Test: Měří rychlost z různých lokalit, poskytuje podrobnou analýzu výkonu.
   • WebPageTest: Umožňuje testovat z různých lokalit a prohlížečů, poskytuje mnoho metrik a vizualizací.

3. Metriky, na které je třeba dbát:

   • Time to First Byte (TTFB): Čas do obdržení prvního bajtu ze serveru.
   • Largest Contentful Paint (LCP): Čas, kdy se zobrazí největší obsahový prvek na obrazovce.
   • First Input Delay (FID): Čas od prvního uživatelského zásahu po odpověď prohlížeče.
   • Cumulative Layout Shift (CLS): Celkový posun rozvržení stránky během načítání.
   • DOMContentLoaded: Čas, kdy prohlížeč plně načetl a analyzoval HTML dokument.
   • Load: Čas úplného načtení všech zdrojů stránky.

4. Automatizace pomocí rámců:

   • Lighthouse (nástroj Google): Lze použít jako CLI nebo integrovat do CI/CD pipeline.

   # Příklad použití Lighthouse CLI
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: Lze použít k načtení stránky a získání času načítání přes Performance API v JavaScriptu.

   # Příklad získání času načítání pomocí Selenium a Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # nebo jiný prohlížeč
   driver.get("https://www.example.com")
   
   # Čekání na úplné načtení stránky
   time.sleep(5) # lze použít spolehlivější metody čekání
   
   # Získání objektu PerformanceTiming
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Výpočet času načítání
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Čas načítání: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Také poskytuje přístup k Performance API.

5. Systémy monitorování v reálném čase (RUM):

   • Nástroje, které sbírají data o výkonu přímo od skutečných uživatelů na webu. Příklady: Sentry, New Relic Browser.

Volba metody závisí na cílech: pro rychlé hodnocení jsou vhodné online služby, pro detailní analýzu a ladění – vývojářské nástroje, pro pravidelný monitoring a integraci do vývojových procesů – automatizace a RUM systémy.