Web Performance Talks, Articles and Tools

2 min read Original article ↗

Talks and Case StudiesWorkshops

perf@3perf.com

Web Performance, Explained

React and Core Web Vitals writing from Ivan Akulov, a web performance engineer and a Google Developer Expert.

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

 

New

Guides

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 fonts

Antipattern: objects in React contexts

 

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:

PerfPerfPerf · 2017–2025🖤

Sole proprietorship (eenmanszaak). Amsterdam, Netherlands. KvK no. 86522469. VAT ID NL004265772B46.

Terms and Conditions.

Privacy Policy