Track Awesome Pagespeed Metrics Updates Daily

⚡Metrics to help understand page speed and user experience

🏠 Home · 🔍 Search · 🔥 Feed · 📮 Subscribe · ❤️ Sponsor · 😺 csabapalfi/awesome-pagespeed-metrics · ⭐ 656 · 🏷️ Front-End Development

[ Daily / Weekly / Overview ]

Feb 02, 2021

Concepts / Lab Data (Synthetic Measurements)

• AwesomeTechStack - Website awesomeness monitoring Tool.

Nov 23, 2020

Concepts / Field Data (Real User Monitoring - RUM)

• Vercel Analytics - Real User Monitoring based on Web Vitals.

Jun 23, 2020

Concepts / User-centric metrics

• Docs - User-centric Performance Metrics - web.dev

• Is it useful/meaningful? - Has enough content rendered that users can engage with it? (e.g. LCP (⭐656))

• Is it usable - Can users interact with the page, or is it still busy loading? (e.g TBT (⭐656))

Rendering metrics / First Contentful Paint (FCP)

• Field: Chrome 60+, CrUX

• Docs - FCP - web.dev

• Spec - Paint Timing - W3C

Rendering metrics / Cumulative Layout Shift (CLS)

• Lab: Lighthouse/WPT

• Docs - CLS - web.dev

• Spec - Layout Instability API - W3C (⭐155)

Rendering metrics / (Hero) Element Timing

• Field: Chrome 77+

• Lab: WPT

• Docs - Last Painted Hero - WPT (⭐3k)

• Spec - Element Timing API

• Blogpost - Hero Element Timing - SpeedCurve

Rendering metrics / Largest Contentful Paint (LCP)

• Docs - LCP - web.dev

• Spec - LCP - W3C (⭐87)

Rendering metrics / Speed Index

• Lab: Lighthouse, WPT (but slightly different spec)

• Docs - Speed Index - web.dev

• Docs - Speed Index - WPT

• Talk - Speed Perception and Lighthouse

Interactivity metrics / Time to Interactive (TTI)

• Docs - TTI - web.dev

Interactivity metrics / Total Blocking Time (TBT)

• Docs - TBT - web.dev

Interactivity metrics / First Input Delay (FID)

• Docs - FID - web.dev

Interactivity metrics / Max Potential First Input Delay

• Docs - Max Potential FID - web.dev

Jun 22, 2020

Concepts / Field Data (Real User Monitoring - RUM)

• Perfume.js - Open Source Library to collect Field Data.

• Web Vitals (⭐6.7k) - Open Source Library to collect Field Data.

Sep 26, 2019

Concepts / Lab Data (Synthetic Measurements)

• 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.

Concepts / Field Data (Real User Monitoring - RUM)

• SpeedCurve LUX - Real User Monitoring SaaS.

• Akamai mPulse - Real User Monitoring SaaS.

• Sematext Experience - Real User Monitoring SaaS.

Sep 06, 2019

Concepts / Critical rendering path

• Critical rendering path

Concepts / Long tasks

• Spec - Long Tasks

• Blogpost - Tracking CPU with Long Tasks API

Concepts / User-centric metrics

• Is it happening? - Did the navigation start successfully? Has the server responded? (e.g FCP (⭐656))

• Is it delightful/smooth? - Are the interactions smooth and natural, free of lag and jank?

Interactivity metrics / Max Potential First Input Delay

• Lab: Lighthouse

• Field: N/A

Rendering metrics / Visually Complete

• Docs - Visually Complete - WPT

Interactivity metrics / Time to Interactive (TTI)

• Field: Not recommended as users interacting with your page can skew field measurements of TTI

Network metrics / DNS latency

• Lab: DNS performance testing tools

Network metrics / Time to First Byte (TTFB)

• Field: IE9+, Safari 9+

• Lab: most server load testing tools report this

Network metrics / TCP and SSL/TLS latency

• Lab: See Qualys SSL Labs for an audit

Network metrics / Transferred bytes

• Lab: Lighthouse (budgets), Sitespeed.io, custom tools

• Field: N/A - but numbers usually the same as in Lab

• Sitespeed.io PageXray

• Lighthouse Performance Budgets

• Can You Afford It?: Real-world Web Performance Budgets

• Which third party scripts are most excessive (⭐1k)

Other metrics / Google PageSpeed Insights score

• About PageSpeed Insights

• What's in the Google PageSpeed score

• How Google Pagespeed works

Other metrics / Server Timing

• Docs - Server Timing

Other metrics / DOMContentLoaded

• Docs - DOMContentLoaded

Other metrics / window.load

• Docs - window.load

Sep 02, 2019

Concepts / Lab Data (Synthetic Measurements)

• 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).

Concepts / Field Data (Real User Monitoring - RUM)

• Performance tracking with Google Analytics (GA)

• Chrome User Experience Report (CrUX)

• Load abandonment - Track visibilitychange to account for survivorship bias.

Other metrics / User Timing

• Lab: Lighthouse, WPT

Interactivity metrics / Time to Interactive (TTI)

• Spec - TTI - Lighthouse

Sep 01, 2019

Interactivity metrics / Time to Interactive (TTI)

• Blogpost - TTI

Interactivity metrics / First Input Delay (FID)

• Lab: N/A (as it requires the user to interact with the page)

• Field: IE9+ (and Safari, Chrome, Firefox) (with polyfill - 0.4KB)

• Polyfill - FID (⭐349)

Network metrics / Max Potential First Input Delay

• Blogpost - Navigation and Resource Timing

• Spec - Navigation Timing

• Spec - Resource Timing

Other metrics / User Timing

• Field: IE 10+, Safari 11+ (and Chrome, Firefox of course)

• Spec - User Timing

Other metrics / Frame rate

• Lab: Chrome and FF Devtools

• Field: No browser implements the Frame Timing API yet but you can roll your own fps meter using requestAnimationFrame

• Docs - Frame Timing API

• Docs - Chrome Devtools - FPS

• Docs - Firefox Developer Tools - Frame rate