Ivan Akulov

@iamakulov.com

Web perf engineer @ Framer. Prev. web perf consultant (Google, Appsmith, Toggl, etc). Getting React interactions 2-4x faster. GDE. He/him 🏳️‍🌈

Possibly one of the most impressive Safari bugs I’ve run into lately: Going back (with a swipe) in *any* React app that uses Navigation API freezes the page for three seconds. What’s fun is the main thread is not frozen, only the rendered page is.

TIL GTM has a History Change trigger, but this trigger doesn’t fire when you navigate via the new Navigation API :( There goes my dream of making all Framer sites use navigation.navigate() instead of history.pushState()

Bild

My Replay time-travel-based React+Redux perf reports experiments are coming together! Just nailed sourcemapped component + selector identities, and I've got accurate timing details on dispatches + renders from a Replay DevTools E2E recording! Early perf report example attached.

BildBild
Mark Erikson@acemarke.dev · 6mo ago

A week-ish later - it's working! Rebuilt my React+Redux dispatch+render perf POC on top of Replay's current infra. Currently extracting dispatch+render timings and selector calls . Just raw data atm, but now I can build meaningful visualizations / perf analysis with this! time travel's awesome!

the chart that I feel perhaps the proudest of is this framer’s lcp (aka page loading time), across all sites, going lower and lower day by day, free for all framer customers lots of work by our infra/canvas teams, @kurtextrem.de, and yours truly <3

Bild

ah yes it’s my favorite “iphone safari wraps every phone number with <a> → react has a hydration mismatch → it remounts the full dom → all images on the page flash, but only on iphone” type of day

Bild

Welp, turns out it’s not real. Just opening DevTools makes all timers 5-100× slower, due to the overhead of capturing stack traces. Even if you do nothing else (don’t record performance, etc)! Guess who accidentally spent a weekend optimizing this 😅 (h/t @paul.irish for explaining why)

Bild
Ivan Akulov@iamakulov.com · 9mo ago

Why are native setTimeout and clearTimeout calls so expensive? Like, here it takes 1.5 ms. What’s the technical reason it’s so slow? Just 100-200 of those in a row (trivial if you’re mounting a bunch of React components that set timers) will easily block the page.

Why are native setTimeout and clearTimeout calls so expensive? Like, here it takes 1.5 ms. What’s the technical reason it’s so slow? Just 100-200 of those in a row (trivial if you’re mounting a bunch of React components that set timers) will easily block the page.

Bild

Neat lil learning from today’s @perfnow.nl (via Umar Hansa): You can now throttle individual requests in Chrome! Neat for experimenting with stuff like - lazy-loading: does the UI look okay if this chunk takes MUCH longer to arrive - resilience: what happens if this specific CDN is extremely slow

Bild

something very cool to see: Chrome recently shipped automatic <link rel="prefetch"> for all links in viewport you could do it previously with libs like Quicklink, but it’s super cool to see this implemented natively (it’s off by default, enabled with one html tag)

Screenshot of a table titled “Proposed plan”, showing some updates to speculative rules, from the doc linked in the next post

⚡ Lighthouse (incorrectly) punishes preloading If you’re like me, you probably struggled with Lighthouse scores at least once. “I already optimized everything; why is my score still yellow?” Often, the cause is there’s more to optimize. But sometimes, it’s Lighthouse itself.

Bild

Introducing @Framer.com Code Boundaries. No more optimization errors, no more blank pages, and no more searching for broken Components. (Or: how we went down the rabbit hole of React error handling for a month 🧵)

Bild