Sapper: Reducing size of JS request chain
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Frealworld.svelte.dev%2F
It looks to me like the request chain gets deeper each time a component imports another component. I wonder how scalable this is. On the one hand, it means downloads for subsequent page navigations will be smaller because those components may have been downloaded on previous pages. But on the other hand, I imagine you could easily end up with some pretty long download chains. E.g. client.js only has a few lines in it and does very little except request two other files, which adds latency for little benefit
benmccann
All 3 comments
I found out that the biggest part of the problem is the Rollup configuration used in the Realworld example. I sent a PR to fix that by making it match the sapper template, which makes it quite a bit better: https://github.com/sveltejs/realworld/pull/55. I'll try to take a look to see if there's more we can or should do on top of that
benmccann
on 10 Jun 2020
This was automatically closed when I merged the above PR, but reopening in case there's more that ought to happen here.
Conduitry
on 10 Jun 2020
Unfortunately we're still not at a 100 on the Lighthouse Page Speed score after merging https://github.com/sveltejs/realworld/pull/55. Though 95 is still better than the vast majority of JS frameworks :smile:
The JS request chain is improved and is now three deep: client.js -> index.js -> components
I found rollup-plugin-hoist-import-deps which looks like it should further improve things by requesting index.js (or whatever page you're on) its components in parallel, which would reduce the request chain to two.
However, I think that we could do better still and request everything in parallel. Right now, client.js is loaded by the client and then figures out on the client side what js resources to load next based on the page you're on. However, that work could be done server-side instead and then those resources could all be preloaded https://github.com/sveltejs/sapper/issues/408. For many CDNs that would mean those resources would get pushed with the initial request and there would be basically no additional requests.
benmccann
on 10 Jun 2020
Related issues
Rich-Harris
路
4Comments
keyvan-m-sadeghi
路
4Comments
nolanlawson
路
4Comments
antony
路
3Comments
jhuettinger
路
3Comments
Most helpful comment
Unfortunately we're still not at a 100 on the Lighthouse Page Speed score after merging https://github.com/sveltejs/realworld/pull/55. Though 95 is still better than the vast majority of JS frameworks :smile:
The JS request chain is improved and is now three deep:
client.js->index.js-> componentsI found rollup-plugin-hoist-import-deps which looks like it should further improve things by requesting
index.js(or whatever page you're on) its components in parallel, which would reduce the request chain to two.However, I think that we could do better still and request everything in parallel. Right now,
client.jsis loaded by the client and then figures out on the client side what js resources to load next based on the page you're on. However, that work could be done server-side instead and then those resources could all be preloaded https://github.com/sveltejs/sapper/issues/408. For many CDNs that would mean those resources would get pushed with the initial request and there would be basically no additional requests.