Ivan Akulov
@iamakulov
Followers
7K
Following
25K
Media
1K
Statuses
6K
Web perf engineer @ Framer. Prev. web perf consultant (Google, Appsmith, Toggl, etc). Getting React interactions 2-4x faster. GDE. He/him 🏳️🌈
Amsterdam
Joined January 2015
How I typically test performance (a thread for a client who asked about this):.
8
91
433
Okay, let’s talk about reexports – and why they’re bad for loading and runtime performance. Thread ⬇️
26
278
1K
🎉 Super glad to announce that I & @addyosmani made a web performance guide for webpack!. — Making front-end smaller.— Improving caching.— Monitoring it to stay fast. Live at Web Fundamentals:
13
426
1K
🔥 TIL Chrome can measure the percentage of unused JS and CSS on the page!. DevTools → Top-right menu → More tools → Coverage
10
372
1K
Oh look, my favorite app Spotify being slow!. Also it’s 1 am meaning it’s the best time to do some performance profiling. Thread ⬇️.
8
237
892
Ever read an article that says “setTimeout(. , 0) fires not in 0 ms but in 4”? This is no longer true – at least not in Chrome and Safari, and not since a few months ago. But getting there was a bit of a bumpy road.
20
182
856
Okay, let’s do a thing!. One like of this tweet = one web perf tip. Loading perf, runtime perf, whatever ⬇.
10
141
724
This weekend’s project: debugging a performance issue where running. div.style.transform = 'translateX(100px)'. was triggering a style recalculation for 15K nodes 😨. (Guess why)
9
49
596
Favorite hobby: rewriting third-party React libraries in pure CSS to avoid forced style recalcs. Today’s example: react-slick (a 15kB image gallery) was causing multiple style recalcs for a client. Replaced with a 20-line almost-pure-CSS implementation with scroll snapping:
8
27
499
Got a question in DMs: “How do I grow my JavaScript skills?”. My favorite trick:
7
83
493
If you ever looked inside a non-minified bundle, you might’ve seen a lot of automatically generated comments that look like this:. /*#__PURE__*/ . Even wondered what they are for? Here’s a short thread 🧵
5
95
375
⚛️ React hydration is one of the first things I look at whenever I’m optimizing loading speed of a React app. It’s super expensive – because it has to render every single component on the page. But how do you measure how long it takes? And why is it so expensive? ↓
5
54
371
🔥 We’ve updated the WebFundamentals’ “Web performance with webpack” guide for webpack 4!. ✂ Now mentioning the production mode, the new code splitting approach, and replacing some plugins to work with the new webpack. ➡ Check it out →
6
127
363
You might’ve seen this picture in the past. It shows the steps that happen in the browser whenever it needs to update the page:. JavaScript → Style → Layout → Paint → Composite. But what’s actually happening there is not that simple (and is pretty fascinating). Let’s dive in!
6
73
287
Finally 100 🎉. A thread on how – a mostly static React/Gatsby site – reached the perfect PageSpeed Insights score, and how you can do that as well ⬇
6
49
245
Life update: after ~6 years of doing web perf consulting, I turned the page and joined @framer. I’ll be leading site performance efforts there, together with a team of amazing engineers 🖤
26
2
240
TIL Safari DevTools have a “Type Profiler”, which shows types the engine inferred for each JS variable ↓. Not sure why or when this can be useful in practice, but looks like a cool gimmick!
7
39
211
A new post! Improved the size of a popular library in webpack and explained it step-by-step:
5
74
203
Finally published the article I’ve been working on for the past 3 weeks!. 📝 Case study: Analyzing Notion app performance . Or how to make a React app load ~30% faster – just by tuning some configs and delaying some scripts. →
12
70
196
My favorite HTTP/2 feature is Connection Coalescing. In HTTP2, normally, a browser opens a new connection for every new domain it sees. (So if your site loads via www. but serves images from img., that’d be 2 connections.). But new connections are costly! So browsers do a trick.
4
13
194
A superb explainer for the `font-display` CSS attribute by @notwaldorf: (`font-display` allows to display the text while the font for it is still loading)
0
43
177
awesome-webpack-perf just got updated! ✨. Added a bunch of new webpack tools for web perf, including.— esbuild-webpack-plugin.— zero-runtime CSS-in-JS libs.— and more analysis tools.
0
37
168
🎉 The new webpack 4.6 now supports prefetching chunks!. Use this when you have a dynamic import and you know that you’ll need the imported file soon. The browser will prefetch the file in the background!.
0
63
151
Today’s learning: Cloudflare can break React hydration in the most funny way possible :D. 1. Make a React site that renders `<p>My email: ivan@example.com</p>`.2. Put it behind Cloudflare.3. Hydration mismatch!
7
10
148
🚀 Launching. a curated list of webpack tools for web performance!. A whole bunch of plugins and loaders for:.— Compressing JS, CSS, images and fonts.— Service workers & PWA.— Preloading & <script async/defer>.— Bundle analysis.
1
61
130
Okay, let’s talk about bundle duplicates. A common issue in JS bundles is duplicated dependencies. E.g., lodash, core-js, some polyfill libs are frequently bundled multiple times. Here’s how to detect and solve this issue: a thread ⬇
3
28
130
@o_cee @kentcdodds The user has been removed, so, for a reference, here’s the full list of packages that they published:
5
45
92
📝 Did you know HTML has as much as 5 different tags to preload something? Here’s a detailed deep-dive into each of them. 🔬 How they look.⚙ What they do.🤷♀️ And when to use each one.
6
30
101
🌅 <img> and background-image download images differently. — <img> tag fetches an image as soon as HTML arrives. — background-image fetches it much later, only when all CSS files download (even if you specify style="background-image: …" straight in HTML). Why is there a delay?
2
30
97
@samccone Humble brag: I & @kurtextrem made a 500-byte script that adds `font-display: swap` for Google Fonts
2
17
85
@AdamRackis FWIW everyone’s recommending Insomnia or etc but if you want a *native* (not Electron) REST client, I absolutely love
7
4
88
🔖 This is the most complete and detailed guide into how React works under the hood I saw (and written by no one else than @acemarke):
2
15
90
CSS tip: if you use `overflow: scroll`, it’s likely you actually want `overflow: auto`. “overflow: scroll” means “*always* show scrollbars”. You won’t see the difference on a Mac because it autohides all scrollbars. But on Windows, it’d look like this:.
4
18
84
OK, seriously, the Zen of Python is one of the best things created in software development (and it doesn’t apply to Python only, of course). I keep and keep and keep returning to it when I’m deciding which one of a few similar interfaces or implementations to choose.
3
28
82
@rauschma I like having a git-ignored .env file with secret keys in the root of the repo. 1) It’s compatible with 2) There’re common helpers like the dotenv package.3) It’s easy to create a .env.example file which describes the config variables.
3
14
83
A performance check I like to do whenever I work with a server-rendered React site is:. Open DevTools → ⌘⇧P → “Disable JavaScript” → reload the page. If the page looks very different with JS disabled, the site’s got performance issues.
3
10
80
PSA: always set the Cache-Control (or Expires) header on your responses. If you don’t, browsers will cache responses based on their internal heuristics. And this could result in an unexpected behavior.
0
20
76
Drew a flowchart (about how I debug React performance) for today’s React Summit workshop:
1
7
97
It took me several months of using it to finally understand. What webpack’s ContextReplacementPlugin actually does:
3
20
76
🔥 The “Web Performance 101” talk transcript is finally out!. 94 slides about:.👑 Why performance matters.🚀 How to optimize JS, CSS, HTTP stuff, images and fonts.⚒ Tools that help you better understand you app’s perf. →
1
26
78
3) So now, when you’re calling `setTimeout(0)`, what actually happens is:.• if it’s a fresh `setTimeout(0)` call, it will run immediately (in all browsers).• if it’s a nested `setTimeout(0)` call, it will run in 4 ms after 5 (Firefox), 10 (Safari), or 15 (Chrome) nested calls
4
14
76
TIL about `patch-package`: an utility that prepares a Git patch after you change something directly in node_modules.
1
14
67
Tip: the easiest way to debug your JS performance is the Web Vitals extension, with console logging enabled. • Click around the page.• See console logs for how long every click took + where the browser spent most of the time
1
9
76
⚛️ My “React 18 Concurrency, Explained” talk slides are now fully out with text transcription!. The talk is an under-the-hood look at how startTransition() & new <Suspense> hydration work in React 18, plus their drawbacks. Some of trivia & full slides below ↓
2
10
74
Super glad to announce that I’m now a Google Developer Expert in web technologies!. Hope that would allow me to spread the message about web performance and how it’s important even further.
8
3
69
1) The HTML spec tells that `setTimeout()` calls nested 5+ levels deep must be throttled to 4 ms. This prevents poorly written sites from over-consuming CPU. (Note the word “nested” – unnested `setTimeout()`s were never intended to be throttled! But we’ll get to that in a bit.)
1
2
72
Ever had a case when you type something in a React app, and it reacts super super slowly?. One of the reasons that may happen is unnecessary rerenders. Here’s how to find and fix them (a thread) ⬇️
3
18
67
Shout-out to (by @csswizardry and @RyanTownsend) which is a super easy way to get a “slow” file. It also added support for images and font files recently!
2
16
65
My “React Concurrency, Explained” talk from React Summit is now live: (Explains and shows *how exactly* useTransition works under the hood).
1
9
67
Turns out if you can save 70 Mb of RAM if you launch a Node.js app with `node index.js` (instead of `yarn start`). Useful if you run lots of apps in a memory-sensitive environment. E.g., this is the process tree of my container. Yarn uses almost as much memory as the app itself!
5
16
64
Okay, it’s Friday – let’s have some web perf fun!. 1) Run a webpack build with webpack-bundle-analyzer.2) Take a screenshot and reply to this tweet.3) I’ll dig and see what to improve!.
14
19
65
Hi #ReactSummitUS 👋 Was excited to speak about React Concurrency – hmu if you have any questions! (Also speaking in a planetarium is 🤯)
2
2
63
2) There’s not one but several React renders. This is likely an example of the Cascading Rerenders antipattern (gosh I should write an article on this):.- you await on several promises.- the first promise resolves → you render.- the second promise resolves → you rerender.- …
1
2
58
Hi #perfnow 👋 Excited to be attending my favorite performance event of the year today and tomorrow. Hit me up to chat about anything React perf :)
1
2
59
Tip from @tkadlec, hot off the press:. When you’re profiling a website performance, type `-has-response-header:Content-Encoding` into the network filter. This will find you all resources that are not compressed with gzip/Brotli (= are a good low hanging fruit to optimize)
1
12
56
Ever had cases in webpack where. import { Grid, Row } from 'react-bootstrap';. creates a bundle larger than. import Grid from 'react-bootstrap/es/Grid.js';.import Row from 'react-bootstrap/es/Row.js';. ?. I explained why this happens:
6
24
58
OK, now a serious question. Why is there no <link rel="stylesheet" async> for non-blocking stylesheets?. Having this would help to load critical CSS first, and then fetch the remaining styles without blocking the rendering. Right now, you have to use JS hacks to achieve this.
8
10
58
Woah, Chrome 85 will start marking fast sites with the “Fast” badge: The badge will be based on Core Web Vitals metrics. (The metrics data will, apparently, come from the Chrome UX report.)
3
18
59
Spotify is an Electron app, meaning we can use Chrome DevTools to profile it. To enable Chrome DevTools in Spotify, I install `spicetify` and run `spicetify enable-devtools`. Yay!
2
5
52
🎉 The latest alpha of webpack 4 now minifies everything by default in the production mode! This means that for simple projects, you won’t need to configure anything – just run `webpack --mode production`, and you’ll have a production-ready bundle!
2
21
52
React Profiler > console.log(). Here’s how to use React Profiler to find out why a specific component rerenders:. 1) Go to DevTools Settings and enable this setting:
1
10
55
Fun fact: if your webpack bundle has 1K modules, `__webpack_require__()` alone would take 25% of its initial execution time. (`s` is the minified `__webpack_require__`. Trust me)
2
11
52
Tip: If you’re writing a piece of code that’s logging an error, *always* log the error as a separate `console.log` argument. ✅ This is good:.console.log('Error:', e). ❌ This is not:.console.log(`Error: ${e.message}`). Here’s a bunch of common patterns & why they’re wrong ⬇
4
10
53
Gah I’m really excited about <Suspense> and hydration in React 18. With React 16-17, `.hydrate()` is often the most expensive JS call in the whole app. You start hydrating the app – and the page freezes for, like, a second:
1
8
50
One of the reasons your Lighthouse score might be bad is third parties. Many (not all, though!) third parties execute a lot of JavaScript. This blocks the main thread & worsens your JS-related Lighthouse metrics (TTI/TBT). Here’re several ways to optimize them – a thread ⬇️.
3
10
51
A few months ago, I had to build a full-stack app having only front-end experience. So now, I’m writing a high-level backend intro to help you if you appear in the same situation. Here’s part 1 covering Node.js and popular backend libraries →
1
9
51
Have an issue with Cumulative Layout Shift? Here’re a few tips on how to find and fix it:.
1
8
50
Just discovered Fontsource by @vercel – and woah it’s an amazing project: Fontsource makes self-hosting Google Fonts much easier. You just `npm install` a font and import is as a regular module:. import "@fontsource/open-sans";. This is so great.
3
15
45
@addyosmani Plus:. 💻 A training app to optimize everything: 📝 Hints for optimizing a specific library (you can contribute too!):
1
9
49
And this adds up. For one of clients I worked with, replacing the `./components/index.js` file with direct imports dropped around 200 KBs off the main bundle (~10% of its size).
1
0
51
1) It makes code splitting ineffective. When you do. import { Button } from './components'. you’re importing not only Button but the whole ‘./components’ file. Which means you’re *bundling* the whole file – with all the components it exports.
5
1
50
“But shouldn’t tree shaking help?”. Tree shaking still works as expected here – it still drops all unused components (“unused” as in “unused in the application”). Tree shaking just doesn’t apply to components that are used in the app but are unused in the current chunk.
10
0
49
How Chrome handles.— <script> in <head>, vs. — <script async>, vs. — <script defer>, vs. — <script> in <body>:
0
7
48
2) Have a static site? Serving fonts from your own server?. Subset these fonts to characters that are actually used on your pages. This will help to load fonts faster. You can easily do this at the build time using.— or.—
1
2
50
2) How I find what to preload:. — Go to DevTools and run a performance recording of how the page loads.— Scroll through the Network section and find stuff that blocks page rendering but gets downloaded too late (= too much down in Network section). That’s usually CSS or JS. 1/2
3
15
49
@kentcdodds — There’s also a 307 redirect. It works like 302 but preserves the request method. E.g. if you do POST /url, and /url returns “302, go to /url2”, the browser will do GET /url2 next. But if you do POST /url, and it returns “307, go to /url2”, the browser will do POST /url2.
1
2
47
TIL Netlify sends all its responses with. Cache-Control: max-age=0, must-revalidate. (which, effectively, disables caching). And it’s a feature, not a bug:
3
8
48
This is a thread with all links from my today’s HolyJS talk:.
2
12
48
Probably the best article I’ve read this month. “Prefer duplicat. over the wrong abstract.”:
6
20
44
TIL about webpack’s AgressiveSplittingPlugin which splits your app so it loads faster with HTTP/2:
0
12
47
@o_cee @kentcdodds And here’s a one-liner to check if your dependency tree has one of these packages:
2
11
46
🔥 A new case study!. Analyzed the performance of a section on the Walmart site and wrote what to improve:
1
14
48
That’s seriously one of the best practical articles about design I’ve read in a while:
0
11
46
I’ve been experimenting with tracking app responsiveness and talking to product teams, on and off, over the last couple years. So here’s a guide on how to set up your own React runtime perf monitoring:
5
5
44
1) Spotify uses React. This `t.unstable_runWithPriority` function in the flamechart is a key sign of React. Whenever you see it, it’s React running. Which means it’s not surprising that switching playlists is slow! With all my love for React, it defaults into slow performance.
1
3
41
✨ Published a webpack plugin to strip unused locales from Moment.js:
4
19
45
Hey FutureConf 👋 Slides for my React Concurrency, Explained talk:
1
5
45
(“Everything” = “all descendants of the changed node”. Although in this case, this was pretty much the whole page.). 6) And that’s how you get a 15K-node recalc from changing a single inline CSS `transform` rule.
3
0
43
🧊 How to do partial hydration in React, 2021 edition ↓. “How to do what?” Partial hydration (also “lazy hydration”) lets you skip hydrating components that don’t have any logic. This helps Next.js/Gatsby/SSR sites to initialise faster – and improves Total Blocking Time.
3
8
43
A pattern I see pretty often is when a single file re-exports stuff from lots of other files. If your project has a `components/index.js` file which re-exports all your components (and does nothing else), that’s one example. This is bad for performance – for two reasons.
2
1
42
TIL that browsers won’t execute any script until all stylesheets have been downloaded ↓. (Via
1
5
42
I have two favorite absurdist programming talks. They’re funny and not that serious but have made me think for quite a while:.— The Birth and Death of JavaScript.— The Future of Programming.
1
5
42
Hint: when disabling rules in ESLint, comment why you do this. See how easier it is to understand the config:
1
9
41