Small optimizations to JS loading #190
Conversation
There was a problem hiding this comment.
LGTM. One thing I noticed, maybe that can be tweaked here if needed is for the asset loading on the featured-collection section. We're loading all assets with a defer but when using a slow collection it makes it pretty weird. We could most likely at least have template-collection.css loaded right away as when I test on the collection page I don't get the same pricing issue.
video
It should be for sure. It's a large file but it contains a lot of things that will cause layout shift if it's excluded. We'll need to make another pass over the theme to fix layout shift at some point. It crops back up occasionally as things change and move around. |
|
I thought in today's world of http/2 bundling too much was discouraged. Were there any specific problems with having |
Why are these changes introduced?
Bundling + changing the positions of a few JS files to be picked up earlier by the browser.
What approach did you take?
Since the JS is deferred, we can put them higher up in the document without them negatively affecting the loading of other files. We can also bundle the JS a bit tighter - removing
variants.jsandslider.jsand putting them, instead, intoglobal.jsto remove some network requests.JS that has the
deferattribute will download when it's found in the DOM at low priority, so it won't block the loading of more critical resources, and it will only run after the critical render path is done. By putting the references to these files higher up, we can benefit from them being picked up sooner by the browser and ensure they're ready to go when the rest of the critical path is done downloading.https://blog.bluetriangle.com/js-delivery-optimization-for-web-performance
Checklist