This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
Add a <link preload rel="image"> for each "critical" image (when using gatsby-image) #14043
Comments
|
Oh https://twitter.com/domfarolino/status/1129591317410045954 https://www.chromestatus.com/feature/5164259990306816 Ok, that makes this a lot easier :-D |
|
Hi, |
|
I would also like this being solved and would contribute. However I have no idea where in the code to look, so any hint would be great :) |
This issue was moved to a discussion.
You can continue the conversation there. Go to discussion →
@baobabKoodaa noticed that critical images can be blocked on slower connections by loading JavaScript. We should prioritize loading critical images (and fonts) over loading JS as the above-the-fold content needs to be loaded before we worry about making it interactive.
One way to do that is when SSRing
gatsby-imagecapture this and add some code to the<head>which can trigger the preloading.The tricky part here is that the browser doesn't natively handle preloading/prefetching images that use
srcsetlike gatsby-image does.So we'd need to embed some code (as outlined in my RFC gatsbyjs/rfcs#35) that would take a srcset and pick the right image based on the browser screen size / resolution to preload.
The text was updated successfully, but these errors were encountered: