This PR optimizes the page size a bit, to the point where I don't think there are any show stoppers, but I have a list of additional things we could do if necessary.
The main additions:
Lazy loading video, so video components only fetch assets once they are actually in a users viewport
Lazy loads the details-illustration component. This one was the bulkiest (because of the SVGs; see additional optimizations), so at least on the initial request we won't hit it.
The production build of the JS is now ~2MB, which is about the maximum I'm okay to ship. A single load of the page will transfer about 8MB, which is bigger that I would like, but I don't think completely out of the question. If we want to make things more efficient we could consider:
applying the same lazy loading logic to all the images in addition to the videos
compressing the images, right now they are quite big
compressing the SVGs used in the details-illustration, i believe they embed large images
making more of the components load lazily (copy the pattern used by details-illustration)
This PR optimizes the page size a bit, to the point where I don't think there are any show stoppers, but I have a list of additional things we could do if necessary.
The main additions:
details-illustrationcomponent. This one was the bulkiest (because of the SVGs; see additional optimizations), so at least on the initial request we won't hit it.The production build of the JS is now ~2MB, which is about the maximum I'm okay to ship. A single load of the page will transfer about 8MB, which is bigger that I would like, but I don't think completely out of the question. If we want to make things more efficient we could consider:
details-illustration, i believe they embed large imagesdetails-illustration)