Skip to content

Instantly share code, notes, and snippets.

@tvararu
Last active July 27, 2024 15:40
Show Gist options
  • Save tvararu/d5f59c691350481f9baa798132f06b68 to your computer and use it in GitHub Desktop.
Save tvararu/d5f59c691350481f9baa798132f06b68 to your computer and use it in GitHub Desktop.

Notes about tools for measuring and learning about performance.

Tools that can be used

Name + Link Usecase
Google Pagespeed Insights (PSI) Measuring load and render performance, highlighting basic responsive design issues
What does my site cost Measuring how much the payload of a website costs in different countries
Webpagetest Measuring load and render performance, with comprehensive video and waterfall charts, on a choice of devices and connection speeds
Google Lighthouse ("Audits" tab in Chrome Devtools) Measuring load and render performance, and some basic best practice, PWA, and accessibility criteria
browser-perf Measuring rendering and run-time performance with Selenium automation for simulating user behaviour
Big rig Helps perform trace analysis from Chrome Devtools trace.json
sitespeed.io Measuring load and render performance, outputting to Grafana
bundlephobia.com Finding the cost of adding a npm package to your bundle

External sources and articles

Name + Link Description
CSSTriggers A list of all the CSS properties and what type of operations changing them results in
"FLIP" by Paul Lewis An animation technique for performing animations that modify the layout in a way that minimizes user impact and jank
Avoiding layout thrashing A set of techniques that can be used to prevent layout thrashing
PRPL An explanation of the PRPL pattern for structuring applications and its benefits for load and runtime performance
What forces layout on Blink A list of every CSS property and JavaScript call that will force a synchronous style recalculation in Blink-based browsers (Chrome et al)
Runtime Performance Checklist By Paul Lewis, "seven runtime performance problems that I see most often, and that your projects may suffer from."

Popular metrics and their explanations

Acronym Explanation "Fast" if
TTFB Time To First Byte - when the user first receives any data at all from the server / network roundtrip <200ms
TTFR Time To First Render - when the user first sees any change at all from the initial blank page <1000ms
FCP First Contentful Paint - when the user first sees some text or meaningful content <1000ms
DCL DOM Content Loaded - when user can access the entire server-side rendered page's HTML, and application logic can start executing <1500ms
TTFI Time To First Interaction - when the user can first interact with the application <1500ms
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment