Kā mērīt vietnes ielādes ātrumu?

Sākuma vietnes ielādes ātrumu var mērīt vairākos veidos:

1. Pārlūkprogrammas izstrādātāju rīki:

   • Atveriet "Network" (Tīkls) cilni izstrādātāju rīkos (F12).
   • Atsvaidziniet lapu.
   • Analizējiet laika rādītājus katram resursam (HTML, CSS, JS, attēli):
     • Waiting (TTFB): Laiks līdz pirmajai baitam no servera.
     • Content Download: Satura lejupielādes laiks.
     • Total: Kopējais resursa ielādes laiks.
   • Pievērsiet uzmanību Waterfall (ūdenskrituma) diagrammai, kas vizualizē resursu ielādes secību.
   • Analizējiet Summary (Kopsavilkums) apakšā, lai redzētu kopējo ielādes laiku un pieprasījumu skaitu.

2. Tiešsaistes pakalpojumi ātruma mērīšanai:

   • Google PageSpeed Insights: Analizē veiktspēju mobilajās un galddatoru ierīcēs, sniedz ieteikumus optimizācijai.
   • GTmetrix: Sniedz PageSpeed un YSlow metriku, detalizētu ielādes, veiktspējas un ieteikumu pārskatu.
   • Pingdom Website Speed Test: Mēra ātrumu no dažādām vietām, sniedz detalizētu veiktspējas analīzi.
   • WebPageTest: Ļauj testēt no dažādām vietām un pārlūkprogrammām, sniedz daudz metriku un vizualizāciju.

3. Kādi metriķi ir svarīgi:

   • Time to First Byte (TTFB): Laiks līdz pirmajai baitam no servera.
   • Largest Contentful Paint (LCP): Laiks, kad ekrānā parādās lielākais saturs.
   • First Input Delay (FID): Laiks no pirmās lietotāja mijiedarbības līdz pārlūkprogrammas atbildei.
   • Cumulative Layout Shift (CLS): Kopējais lapas izkārtojuma izmaiņu rādītājs ielādes laikā.
   • DOMContentLoaded: Laiks, kad pārlūkprogramma pilnībā ielādēja un analizēja HTML dokumentu.
   • Load: Pilnas ielādes laiks visiem lapas resursiem.

4. Automatizācija, izmantojot karkasus:

   • Lighthouse (Google rīks): To var izmantot kā CLI rīku vai integrēt CI/CD procesā.

   # Piemērs, izmantojot Lighthouse CLI
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: To var izmantot lapas ielādes laika iegūšanai, izmantojot JavaScript Performance API.

   # Piemērs, izmantojot Selenium un Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Vai cita pārlūkprogramma
   driver.get("https://www.example.com")
   
   # Gaidīt pilnu lapas ielādi
   time.sleep(5) # Var izmantot uzticamākus gaidīšanas veidus
   
   # Iegūt PerformanceTiming objektu
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Laika aprēķins
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Ielādes laiks: {load_time} ms")
   
   driver.quit()
   

   • Cypress: arī nodrošina piekļuvi Performance API.

5. Reālo lietotāju uzraudzības (RUM) sistēmas:

   • Rīki, kas apkopo datus par veiktspēju tieši no reāliem lietotājiem, kas lieto vietni. Piemēri: Sentry, New Relic Browser.

Izvēlētais metode ir atkarīgs no mērķiem: ātrai novērtēšanai noder tiešsaistes pakalpojumi, detalizētai analīzei un kļūdu labojumiem – izstrādātāju rīki, regulārai uzraudzībai un integrācijai – automatizācija un RUM sistēmas.