project awesome

PageSpeed Metrics

Metrics to help understand page speed and user experience.

Collection 688 stars GitHub

Contents

Field Data (Real User Monitoring - RUM)
User-centric metrics

Rendering metrics

Largest Contentful Paint (LCP)
Cumulative Layout Shift (CLS)
(Hero) Element Timing

Interactivity metrics

First Input Delay (FID)
Time to Interactive (TTI)

Network metrics

Concepts

Field Data (Real User Monitoring - RUM)

Web Vitals 8.5k updated yesterday

Open Source Library to collect Field Data.

Open Source Library to collect Field Data.

User-centric metrics

Total Blocking Time (TBT) 688 updated 2y ago

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

Rendering metrics

Largest Contentful Paint (LCP)

Spec - LCP - W3C 99 updated 2d ago

https://github.com/WICG/largest-contentful-paint#readme

Cumulative Layout Shift (CLS)

Spec - Layout Instability API - W3C 165 updated 3mo ago

https://github.com/WICG/layout-instability

(Hero) Element Timing

Docs - Last Painted Hero - WPT 3.2k updated 6mo ago

https://github.com/WPO-Foundation/webpagetest/blob/master/docs/Metrics/HeroElements.md

Interactivity metrics

First Input Delay (FID)

Polyfill - FID 347 (archived)

https://github.com/GoogleChromeLabs/first-input-delay

Time to Interactive (TTI)

Spec - TTI - Lighthouse

https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit

Network metrics

Which third party scripts are most excessive 1.1k updated 3mo ago

You can measure the byte weight of your assets with a number of tools. You would normally track these Lab only as the numbers are usually the same in the Field (but be mindful of device type or geographical location specific pages). Measuring own (and third-party) JavaScript bytes is crucial as JavaScript is the main cause of high TTI or FID values.