gatsbyjs
Add RFC for adding support for prefetching critical images
Some notes I hope help with the design:
- If a resource in Chrome is prefetched with
<link rel=prefetch>, it will be fetched at a low priority and kept around in the memory cache for 5 minutes. This lasts until the resource has been consumed, at which point the normal cache-control rules for the resource will apply. If Gatsby plans to use prefetch for images in addition to full HTML responses we might want to be careful that these resources will be used in the first few minutes. - Prefetching can also mostly be accomplished using Service Workers (precaching). The difference here is you're persisting resources to the disk/Cache API which means it doesn't matter if the user fails to use the resource in that 5m limit. It does require that SWs are used however.
- SW fetches, unlike with rel=prefetch, are performed at a higher rather than lower network priority so care must be taken with the "when" do you fetch. You don't want to contend with important fetches for other content on the current page. Priority Hints will give you a way to fetch with importance=low, but are in Origin Trials at the moment.
- In the future if Priority Hints do land, we might want to explore Gatsby using importance=high or low on images.
@addyosmani thanks for the notes! I wrote up one possible work around for prefetches lack of persistence at https://github.com/gatsbyjs/gatsby/issues/12800
We can't rely on people having SW available and in any case, we want prefetching to always low priority which is only easily achieved right now with <link prefetch>
Another related optimization this RFC will enable — we use the IntersectionObserver API to lazy load images. Because loading images is a heavy operation (both bandwidth & CPU to render it on the client) we don't start loading the image until the user has scrolled close to the image. But this isn't ideal as it means that on slower connections or if the user is scrolling fast, that images will be delayed in displaying as the browser won't be able to download them fast enough. Prefetching images is a pretty light-weight way to get ahead of things as it won't block anything else. So we could add another IntersectionObserver that watches much further ahead and starts prefetching images ahead of time.
This would again contribute to making Gatsby sites appear quick and smooth.
We'd probably put the image prefetching code into its own package e.g. prefetch-image which takes an object with the src/srcset strings and starts the prefetching.
