Ako zmerať rýchlosť načítania webovej stránky?

Rýchlosť načítania webovej stránky je možné merať niekoľkými spôsobmi:

1. Nástroje pre vývojárov v prehliadači:

   • Otvorte záložku "Network" (Sieť) vo vývojárskych nástrojoch (F12).
   • Obnovte stránku.
   • Analyzujte časové ukazovatele pre každý zdroj (HTML, CSS, JS, obrázky):
     • Waiting (TTFB): Čas do prijatia prvého bajtu zo servera.
     • Content Download: Čas na stiahnutie obsahu.
     • Total: Celkový čas načítania zdroja.
   • Venujte pozornosť diagramu Waterfall (vodopád) na vizualizáciu sekvencie načítania zdrojov.
   • Analyzujte zhrnutie v spodnej časti pre celkový čas načítania a počet požiadaviek.

2. Online služby na meranie rýchlosti:

   • Google PageSpeed Insights: Analyzuje výkon na mobilných a desktopových zariadeniach, poskytuje odporúčania na optimalizáciu.
   • GTmetrix: Poskytuje metriky PageSpeed a YSlow, podrobnú správu o načítaní, výkonnosti a odporúčania.
   • Pingdom Website Speed Test: Meria rýchlosť z rôznych lokalít, poskytuje podrobnú analýzu výkonu.
   • WebPageTest: Umožňuje testovanie z rôznych lokalít a prehliadačov, poskytuje množstvo metrík a vizualizácií.

3. Metriky, na ktoré je potrebné dbať:

   • Time to First Byte (TTFB): Čas do prijatia prvého bajtu zo servera.
   • Largest Contentful Paint (LCP): Čas, kedy sa zobrazí najväčší prvok obsahu na obrazovke.
   • First Input Delay (FID): Čas od prvého zásahu používateľa na stránke po odpoveď prehliadača.
   • Cumulative Layout Shift (CLS): Celkový posun rozloženia stránky počas načítania.
   • DOMContentLoaded: Čas, keď prehliadač úplne načítal a analyzoval HTML dokument.
   • Load: Čas úplného načítania všetkých zdrojov stránky.

4. Automatizácia pomocou rámcov:

   • Lighthouse (nástroj Google): Môže sa použiť ako CLI alebo integrovať do CI/CD pipeline.

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

   • Selenium/WebDriver: Môže sa použiť na načítanie stránky a získanie času načítania pomocou Performance API v JavaScripte.

   # Príklad získania času načítania pomocou Selenium a Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Alebo iný prehliadač
   driver.get("https://www.example.com")
   
   # Čakanie na úplné načítanie stránky
   time.sleep(5) # Môžu sa použiť spoľahlivejšie metódy čakania
   
   # Získanie PerformanceTiming objektu
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Výpočet času načítania
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Čas načítania: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Tiež poskytuje prístup k Performance API.

5. Systémy monitorovania v reálnom čase (RUM):

   • Nástroje, ktoré zbierajú údaje o výkonnosti priamo od skutočných používateľov na stránke. Príklady: Sentry, New Relic Browser.

Výber metódy závisí od cieľov: pre rýchle hodnotenie sú vhodné online služby, pre detailnú analýzu a ladenie – nástroje pre vývojárov, pre pravidelný monitoring a integráciu do vývojových procesov – automatizácia a RUM systémy.