How to measure website loading speed?

The website loading speed can be measured in several ways:

1. Browser Developer Tools:

   • Open the "Network" tab in developer tools (F12).
   • Refresh the page.
   • Analyze timing metrics for each resource (HTML, CSS, JS, images):
     • Waiting (TTFB): Time until the first byte is received from the server.
     • Content Download: Time to download the content.
     • Total: Total loading time of the resource.
   • Pay attention to the Waterfall diagram for visualizing the sequence of resource loading.
   • Review the Summary at the bottom of the tab for overall load time and request count.

2. Online speed testing services:

   • Google PageSpeed Insights: Analyzes performance for mobile and desktop, provides optimization recommendations.
   • GTmetrix: Offers PageSpeed and YSlow metrics, detailed load, performance report, and suggestions.
   • Pingdom Website Speed Test: Measures speed from different locations, provides detailed performance analysis.
   • WebPageTest: Allows testing from various locations and browsers, offers numerous metrics and visualizations.

3. Metrics to focus on:

   • Time to First Byte (TTFB): Time until the first byte is received from the server.
   • Largest Contentful Paint (LCP): Time when the largest visible content element appears.
   • First Input Delay (FID): Time from the first user interaction to the browser response.
   • Cumulative Layout Shift (CLS): Total layout shift during loading.
   • DOMContentLoaded: Time when the HTML document is fully loaded and parsed.
   • Load: Time when all page resources are fully loaded.

4. Automation with frameworks:

   • Lighthouse (Google tool): Can be used as a CLI tool or integrated into CI/CD pipelines.

   # Example of using Lighthouse CLI
   lighthouse https://www.example.com --output json,html --output-path ./report.json
   

   • Selenium/WebDriver: Can be used to load the page and get load time via the JavaScript Performance API.

   # Example of getting load time with Selenium and Performance API
   from selenium import webdriver
   import time
   
   driver = webdriver.Chrome() # Or another browser
   driver.get("https://www.example.com")
   
   # Wait for full page load
   time.sleep(5) # More reliable waits can be used
   
   # Get PerformanceTiming object
   performance_timing = driver.execute_script("return window.performance.timing")
   
   # Calculate load time
   load_time = performance_timing['loadEventEnd'] - performance_timing['navigationStart']
   print(f"Load time: {load_time} ms")
   
   driver.quit()
   

   • Cypress: Also provides access to the Performance API.

5. Real User Monitoring (RUM) systems:

   • Tools that collect performance data directly from real users on the site. Examples: Sentry, New Relic Browser.

The choice of method depends on your goals: online services are suitable for quick assessments, developer tools for detailed analysis and debugging, and automation or RUM systems for regular monitoring and integration into development processes.