Awesome Page Speed Metrics

Metrics to help understand page speed and user experience.

If you're just getting started check out web.dev/metrics first.

Contents

• Concepts
• Lab Data (Synthetic Measurements)
• Field Data (Real User Monitoring - RUM)
• Critical rendering path
• Long tasks
• User-centric metrics
• Rendering metrics
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• Cumulative Layout Shift (CLS)
• Visually Complete
• Speed Index
• (Hero) Element Timing
• Interactivity metrics
• Time to Interactive (TTI)
• Total Blocking Time (TBT)
• First Input Delay (FID)
• Max Potential First Input Delay
• Network metrics
• DNS latency
• TCP and SSL/TLS latency
• Time to First Byte (TTFB)
• Transferred bytes
• Other metrics
• Google PageSpeed Insights score
• User Timing
• Server Timing
• Frame rate
• DOMContentLoaded
• window.load

Concepts

Lab Data (Synthetic Measurements)

Make a request to your page with a tool and evaluate performance. Be sure to make it realistic (e.g. by throttling network and CPU) and reduce noise (e.g. by running multiple times).

• Lighthouse - A tool built on Google Chrome to audit web pages. You can run it from Chrome DevTools, a Chrome Extension or from the command line (even with headless Chrome).
• Google PageSpeed Insights - Free and hosted Lighthouse reporting (and more) by Google.
• WebpageTest - Free and hosted web performance testing (also an open source project).
• Sitespeed.io - A set of open source performance monitoring tools.
• Calibre - Web performance monitoring SaaS.
• treo.sh - Web performance monitoring SaaS.
• SpeedCurve - Web performance monitoring SaaS.
• AwesomeTechStack - Website awesomeness monitoring Tool.

---

Field Data (Real User Monitoring - RUM)

Collect performance data from real users visiting your page. Be mindful of the actual overhead, as it runs in your user's browser and watch out for browser support of more recent metrics (e.g. compared to your user-base).

• Performance tracking with Google Analytics (GA)
• Chrome User Experience Report (CrUX)
• Load abandonment - Track visibilitychange to account for survivorship bias.
• SpeedCurve LUX - Real User Monitoring SaaS.
• Akamai mPulse - Real User Monitoring SaaS.
• Sematext Experience - Real User Monitoring SaaS.
• Perfume.js - Open Source Library to collect Field Data.
• Web Vitals - Open Source Library to collect Field Data.
• Vercel Analytics - Real User Monitoring based on Web Vitals.

Critical rendering path

The critical rendering path is everything that happens between receiving network bytes and rendering something on the screen. To optimize any rendering metrics like First Contentful Paint (FCP) or Speed Index you have to understand how the critical rendering path works.

• Critical rendering path

Long tasks

The browser Main Thread that handles user input is also the one executing JavaScript (among many other things). Blocking the Main Thread for too long can make your page unresponsive.

A user perceives any visual change within 100ms as instant. Any task blocking the Main Thread by taking longer than 50ms is considered a long task (as it might make the browser unresponsive to user input).