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
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
@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