Notes about tools for measuring and learning about performance.
| 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 |
| 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." |
| 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 |