Web Performance, Explained
React and Core Web Vitals writing from 
Backed by 8 years of doing performance work with Google, Framer, Toggl, Restream, and many more companies.
Case Studies
Analyzing Notion app performance
★How to make a React app load ~30% faster – just by tuning some configs and delaying some scripts
Making React interactions in Causal 4× faster
A dive into Spotify performance at 1 am
Analyzing the Walmart site performance
A deep-dive into improving Walmart's site speed and conversion
Improving a popular library's size for webpack users
Webpack bundles, large and small
Performance Archaeology: Packer.js, a JS Minifier from 2004
NewGuides
React Concurrency, Explained
★Web Performance 101
★A comprehencive guide into modern loading performance
How to optimize images in webpack
Quick apps in 3 steps
Want to get faster with a minimal effort? Do this.
How PerfPerfPerf's site got to 100 in PageSpeed Insights
Spoiler alert: no client-side JavaScript
How to optimize resizing or scrolling
Short basics of caching
How to monitor React render performance
★So you just made your app fast. Now, how do you ensure it doesn't get slow again?
Optimizing web performance in webpack
Guide for Google's Web Fundamentals, together with Addy Osmani
How to remove bundle duplicates
How to find and fix unnecessary React rerenders
How to load polyfills only when needed
Tips to improve Cumulative Layout Shift
6 ways to optimize third parties
References
Preload, prefetch and other <link> tags
★
webpack-libs-optimizations
Performance tips & tricks for popular JS libraries. Created in collaboration with the Google Chrome team
awesome-webpack-perf
A curated list of webpack tools for web performance
devtools-perf-features
Chrome DevTools' little known features for performance debugging
PerfPerfPerf's favorite tools
Non-webpack tools for web performance
Trivia
Why reexports are bad for performance
1 💟 = 1 web perf tip
/*#__PURE__*/What it is and why it's in every JS bundle – even though you likely never heard of it
Antipattern:
<link rel="preload"> and fontsAntipattern: objects in React contexts
Tools
Google Fonts optimizer
A 550-byte script to make your Google Fonts render 1-3 seconds faster
moment-locales-webpack-plugin
A webpack plugin that removes unused Moment locales and makes the bundle hundreds of KBs smaller
Performance articles, case studies, and more. Subscribe: