Awesome Page Speed Metrics

⚡Metrics to help understand page speed and user experience

693 stars28 forks57 entriesLast push Feb 17, 2024 (2 years ago)License Other

This page lists names, links and short descriptions. The original list on GitHub is the source and belongs to its authors.

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.

In 7 listsDetails

WebpageTest

Free and hosted web performance testing (also an open source project).

In 6 listsDetails

Sitespeed.io

A set of open source performance monitoring tools.

In 3 lists

Calibre

Web performance monitoring SaaS.

treo.sh

Web performance monitoring SaaS.

SpeedCurve

Web performance monitoring SaaS.

In 2 lists

AwesomeTechStack

Website awesomeness monitoring Tool.

In 4 listsDetails

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.

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.

In 2 lists

Web Vitals

Open Source Library to collect Field Data.

In 3 lists

Vercel Analytics

Real User Monitoring based on Web Vitals.

Concepts >Critical rendering path

Critical rendering path

Concepts >Long tasks

Spec - Long Tasks

Blogpost - Tracking CPU with Long Tasks API

Concepts >User-centric metrics

Docs - User-centric Performance Metrics - web.dev

Rendering metrics >First Contentful Paint (FCP)

Docs - FCP - web.dev

Spec - Paint Timing - W3C

Rendering metrics >Largest Contentful Paint (LCP)

Docs - LCP - web.dev

Spec - LCP - W3C

Rendering metrics >Cumulative Layout Shift (CLS)

Docs - CLS - web.dev

Spec - Layout Instability API - W3C

Rendering metrics >Visually Complete

Docs - Visually Complete - WPT

Rendering metrics >Speed Index

Docs - Speed Index - web.dev

Docs - Visually Complete - WPT

Talk - Speed Perception and Lighthouse

Rendering metrics >(Hero) Element Timing

Docs - Last Painted Hero - WPT

Spec - Element Timing API

Blogpost - Hero Element Timing - SpeedCurve

Interactivity metrics >Time to Interactive (TTI)

Docs - TTI - web.dev

Spec - TTI - Lighthouse

Blogpost - TTI

Interactivity metrics >Total Blocking Time (TBT)

Docs - TBT - web.dev

Interactivity metrics >First Input Delay (FID)

Docs - FID - web.dev

Polyfill - FID

Interactivity metrics >Max Potential First Input Delay

Docs - Max Potential FID - web.dev

Network metrics

Blogpost - Navigation and Resource Timing

Spec - Navigation Timing

Use responseStart and requestStart to derive Time to First Byte (TTFB).

In 2 lists

Spec - Resource Timing

Network metrics >Transferred bytes

Sitespeed.io PageXray

Lighthouse Performance Budgets

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

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

In 2 lists

Which third party scripts are most excessive

Other metrics >Google PageSpeed Insights score

About PageSpeed Insights

What's in the Google PageSpeed score

How Google Pagespeed works

Other metrics >User Timing

Spec - User Timing

This specification defines an interface to help web developers measure the performance of their applications by giving them access to high-precision timestamps.

In 2 lists