Hogyan mérjük egy weboldal betöltési sebességét?

A weboldal betöltési sebességét többféleképpen mérhetjük:

1. Fejlesztői eszközök a böngészőben:

   • Nyissa meg a "Network" (Hálózat) fület a fejlesztői eszközökben (F12).
   • Frissítse az oldalt.
   • Elemezze az időmutatókat minden erőforrás esetében (HTML, CSS, JS, képek):
     • Waiting (TTFB): Idő az első bájt fogadásáig a szervertől.
     • Content Download: A tartalom letöltési ideje.
     • Total: Az erőforrás teljes betöltési ideje.
   • Figyeljen a Waterfall (vízesés) diagramra az erőforrások betöltési sorrendjének vizualizálásához.
   • Elemezze az összefoglalót az oldal alján a teljes betöltési időről és a kérések számáról.

2. Online szolgáltatások a sebesség mérésére:

   • Google PageSpeed Insights: Elemzi a mobil- és asztali eszközökön nyújtott teljesítményt, javaslatokat ad az optimalizálásra.
   • GTmetrix: Megmutatja a PageSpeed és YSlow metrikákat, részletes jelentést a betöltésről, teljesítményről és ajánlásokról.
   • Pingdom Website Speed Test: Különböző helyszínekről méri a sebességet, részletes elemzést nyújt a teljesítményről.
   • WebPageTest: Különböző helyszínekről és böngészőkből tesztelhető, sok metrikát és vizualizációt kínál.

3. Figyelembe veendő metrikák:

   • Time to First Byte (TTFB): Idő az első bájt fogadásáig a szervertől.
   • Largest Contentful Paint (LCP): A legnagyobb tartalmi elem megjelenésének ideje.
   • First Input Delay (FID): Az első felhasználói interakció és a böngésző válasza közötti idő.
   • Cumulative Layout Shift (CLS): Az oldal elrendezésének összesített elmozdulása a betöltés során.
   • DOMContentLoaded: Az időpont, amikor a böngésző teljesen betöltötte és parse-olta a HTML-t.
   • Load: Az idő, amikor az oldal összes erőforrása teljesen betöltődött.

4. Automatizálás keretrendszerekkel:

   • Lighthouse (Google eszköz): Parancssori eszközként vagy CI/CD pipeline-ba integrálva használható.

   # Lighthouse CLI példája
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: A betöltési idő mérésére JavaScript Performance API segítségével.

   # Betöltési idő mérés Selenium és Performance API segítségével
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # vagy más böngésző
   driver.get("https://www.example.com")
   
   # Várjon, amíg az oldal teljesen betöltődik
   time.sleep(5) # megbízhatóbb várakozási módszerek is alkalmazhatók
   
   # PerformanceTiming objektum lekérése
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Betöltési idő kiszámítása
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Betöltési idő: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Szintén hozzáférést biztosít a Performance API-hoz.

5. Valós felhasználói monitorozó (RUM) rendszerek:

   • Olyan eszközök, amelyek közvetlenül a valódi felhasználóktól gyűjtenek teljesítményadatokat. Példák: Sentry, New Relic Browser.

A módszer kiválasztása a céltól függ: gyors értékeléshez online szolgáltatások, részletes elemzéshez fejlesztői eszközök, rendszeres monitorozáshoz és fejlesztési folyamatokba való integrációhoz automatizálás és RUM rendszerek.