Hidden Cost of Hydration Mismatches
A single hydration mismatch on a page can tank Largest Contentful Paint from green all the way to red
PerfPerfPerf
We help companies to earn more by making web apps faster
Latest posts
Chrome DevTools Throttling Is Not Accurate
The real network operates on packets. However, Chrome DevTools slows down requests, not packets. This means DevTools throttling is often pretty off where it matters.
Performance Archaeology: Packer.js, a JS Minifier from 2004
Back in 2018, while doing a performance audit for a client, I stumbled upon an unusually-looking piece of code: eval(function(p,a,c,k,e,r){e=function(c){return(c 35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String))... This code was weird. Why an eval() ? What’s with p,a,c,k,e,r which clearly combines into some name? I couldn’t help but dig into that, and the trip took me all…
Case Study: Making React Interactions in Causal 4× Faster
Causal is a React spreadsheet app for creating complex forecasting models: Sometimes, Causal models get huge, which raises challenges in keeping them fast. One of these challenges is UI interactions. For example, in a huge model, if you opened the Categories pane and tried to fill several values in a row, you’d notice how the UI gets pretty laggy: It might be hard to see when the app is laggy in…
How To Measure and Monitor React Render Performance
Say you just finished optimizing your React app and making every button click as fast as possible. Now, you want to keep an eye on the app’s performance – set up measurements around interactions and learn if the app gets slower again. Here’s how to do that. Contents No Ready-To-Go Solutions Step 1: Pick the Most Important Interactions Step 2: Instrument Every Interaction Why use afterFrame ? Why…
A dive into Spotify performance at 1 am
This is a shareable version of an X thread . Oh look, my favorite app Spotify being slow! Not to pick on Spotify in particular, but it's interesting how slow some "desktop apps" to do things like switch between playlists that are already loaded on my machine. Feels more like a "website" than an "app" pic.twitter.com/DiLksaHWTl — Geoffrey Litt (@geoffreylitt) May 4, 2022 Also it’s 1 am meaning it’s…
Case study: Analyzing Notion app performance
Web performance isn’t going to save you in this crisis. But if you’re building a software product – like Notion does – chances are you’re relatively unaffected. And in this case, as the Internet is slowing down, having a quick app is more important than ever. In this case study, let’s take a look at Notion, an advanced note-taking web app, and learn how to make it load 30% faster:
How to load polyfills only when needed
We’ve been asked: “These days, how do you typically serve polyfills only to browsers that need them?” Turns out the answer is large enough for a full article!
Quick apps in 3 steps
Ever been in a situation when you wanted to build a quick app – but didn’t have enough time to invest into the performance? We wrote about the three most significant things that help with web performance and don’t take a lot of time.
Preload, prefetch and other <link> tags
Did you know HTML has as much as 5 different tags to preload something? We wrote a detailed deep-dive into each of them. 🔬 How they look ⚙️ What they do 🤷 And when to use each one