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.
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.
There goes my dream of making all Framer sites use navigation.navigate() instead of history.pushState()
There goes my dream of making all Framer sites use navigation.navigate() instead of history.pushState()
3perf.com/blog/chrome-...
3perf.com/blog/chrome-...
Chrome DevTools throttling: [proceeds to not be real]
Chrome DevTools throttling: [proceeds to not be real]
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.
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.
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
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
Here’s a case when this breaks:
1) Add a random dependency in Redux that’s used in some random function:
Here’s a case when this breaks:
1) Add a random dependency in Redux that’s used in some random function:
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)
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)
gist.github.com/iamakulov/85...
gist.github.com/iamakulov/85...
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.
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.
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
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
Story time!
Story time!
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)
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)
(my lil non-performance side project)
(my lil non-performance side project)