I'm curious where the majority of the win came from? Do you have a before & after trace handy to compare what changed?
Looks like you opted not to use SSR, which I think is a good choice for smaller teams. CSS changes are unlikely to account for a large performance win. Did you use a CDN before? Perhaps the biggest win was moving to a better CDN + built-in preloading/prefetching provided by NextJS?
I'm curious where the majority of the win came from?
Great question! The boost can be explained by JS vs. raw HTML+CSS performance.
In the past, we sent a dummy loading screen but we then had to download tons of JS + run that to even show a "real" loading screen (i.e. page-specific loading screen).
Now, the HTML response (which you can inspect yourself, `curl https://my.causal.app`) already has a skeleton of the page, which doesn't need any JS to download and run before showing the "real" loading screen.
The UX is better because users spend noticeably less time staring at a blank screen and there's much less layout shift too!
Which metric improved by 70%? Time to show the skeleton? I agree the skeleton is quite good. I see it takes about 350ms to show the skeleton and about 1s to show my content.
Comments
I'm curious where the majority of the win came from? Do you have a before & after trace handy to compare what changed?
Looks like you opted not to use SSR, which I think is a good choice for smaller teams. CSS changes are unlikely to account for a large performance win. Did you use a CDN before? Perhaps the biggest win was moving to a better CDN + built-in preloading/prefetching provided by NextJS?
Great question! The boost can be explained by JS vs. raw HTML+CSS performance.
In the past, we sent a dummy loading screen but we then had to download tons of JS + run that to even show a "real" loading screen (i.e. page-specific loading screen).
Now, the HTML response (which you can inspect yourself, `curl https://my.causal.app`) already has a skeleton of the page, which doesn't need any JS to download and run before showing the "real" loading screen.
The UX is better because users spend noticeably less time staring at a blank screen and there's much less layout shift too!
Which metric improved by 70%? Time to show the skeleton? I agree the skeleton is quite good. I see it takes about 350ms to show the skeleton and about 1s to show my content.
Yep - the metric was First Contentful Paint, which is basically the time-to-skeleton in our case :)