Kako izmeriti brzinu učitavanja sajta?

Brzina učitavanja veb sajta može se meriti na nekoliko načina:

1. Alati za razvoj u pregledaču:

   • Otvorite karticu "Network" (Mreža) u alatima za razvoj (F12).
   • Osvežite stranicu.
   • Analizirajte vremenske pokazatelje za svaki resurs (HTML, CSS, JS, slike):
     • Waiting (TTFB): Vreme do primanja prvog bajta od servera.
     • Content Download: Vreme preuzimanja sadržaja.
     • Total: Ukupno vreme učitavanja resursa.
   • Obratite pažnju na Waterfall (vodopad) dijagram za vizualizaciju sekvence učitavanja resursa.
   • Analizirajte sažetak na dnu za ukupno vreme učitavanja i broj zahteva.

2. Online servisi za merenje brzine:

   • Google PageSpeed Insights: Analizira performanse za mobilne i desktop uređaje, pruža preporuke za optimizaciju.
   • GTmetrix: Pruža metrike PageSpeed i YSlow, detaljan izveštaj o učitavanju, performansama i preporukama.
   • Pingdom Website Speed Test: Mjeri brzinu sa različitih lokacija, pruža detaljnu analizu performansi.
   • WebPageTest: Omogućava testiranje sa različitih lokacija i pretraživača, pruža mnogo metrika i vizualizacija.

3. Metrike na koje treba obratiti pažnju:

   • Time to First Byte (TTFB): Vreme do primanja prvog bajta od servera.
   • Largest Contentful Paint (LCP): Vreme pojavljivanja najvećeg elementa sadržaja na ekranu.
   • First Input Delay (FID): Vreme od prve interakcije korisnika sa sajtom do odgovora pretraživača.
   • Cumulative Layout Shift (CLS): Ukupni pomak rasporeda stranice tokom učitavanja.
   • DOMContentLoaded: Vreme kada je pretraživač u potpunosti učitao i parsirao HTML dokument.
   • Load: Vreme potpunog učitavanja svih resursa stranice.

4. Automatizacija pomoću okvira:

   • Lighthouse (Google alat): Može se koristiti kao CLI ili integrisati u CI/CD pipeline.

   # Primer korišćenja Lighthouse CLI
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: Može se koristiti za učitavanje stranice i dobijanje vremena učitavanja putem Performance API-ja u JavaScript-u.

   # Primer dobijanja vremena učitavanja pomoću Selenium i Performance API-ja
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Ili drugi pretraživač
   driver.get("https://www.example.com")
   
   # Čekanje da se stranica u potpunosti učita
   time.sleep(5) # Mogu se koristiti pouzdanije metode čekanja
   
   # Dobijanje PerformanceTiming objekta
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Računanje vremena učitavanja
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Vreme učitavanja: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Takođe omogućava pristup Performance API-ju.

5. Sistemi za praćenje u realnom vremenu (RUM):

   • Alati koji prikupljaju podatke o performansama direktno od stvarnih korisnika na sajtu. Primeri: Sentry, New Relic Browser.

Izbor metode zavisi od ciljeva: za brzu procenu odgovaraju online servisi, za detaljnu analizu i otklanjanje problema – alati za razvoj, za redovan monitoring i integraciju u razvojne procese – automatizacija i RUM sistemi.