Add a <link preload rel="image"> for each "critical" image (when using gatsby-image) #29877
Unanswered
KyleAMathews
asked this question in
Ideas / Feature Requests
Replies: 3 comments
-
|
Oh https://twitter.com/domfarolino/status/1129591317410045954 https://www.chromestatus.com/feature/5164259990306816 Ok, that makes this a lot easier :-D |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
Hi, |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
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 :) |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
@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.
Beta Was this translation helpful? Give feedback.
All reactions