You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The critical prop does not currently raise priority of an image asset above others such as JS or fonts. This can effectively delay an image from loading before several hundred KB of JS/JSON is loaded in the HTTP/2 stream.
Currently for Chrome users, this may be possible to resolve by using the new-ish Priority Hint attribute support.
There are a variety of ways Gatsby could potentially assist here, but mostly it's up to the browser to define what assets should be prioritized and the server streaming the response back with what order it decides to prioritize the responses on it's end.
Priority Hints could also be used to lower the importance of preload tags in the head, via gatsby-config.js option? Or for additional browser support, prefetch might also work for users that'd prefer a working/rendered page loaded ASAP with JS progressively enhancing afterwards once it loads in. Currently Gatsby doesn't have support for this use-case as it's assumed the user either has JS disabled or expects hydration into a React app to be a priority.
The browsers NetworkInformation Web API for saveData could potentially be queried, so that mobile devices could likewise load the site visually faster as it progressively loads into a React app?
This discussion was converted from issue #13858 on October 16, 2020 10:14.
Heading
Bold
Italic
Quote
Code
Link
Numbered list
Unordered list
Task list
Attach files
Mention
Reference
Menu
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Summary
The
critical
prop does not currently raise priority of an image asset above others such as JS or fonts. This can effectively delay an image from loading before several hundred KB of JS/JSON is loaded in the HTTP/2 stream.Currently for Chrome users, this may be possible to resolve by using the new-ish Priority Hint attribute support.
Motivation
Developers have expressed difficulty in prioritizing image assets to load ASAP due to the JS payload of Gatsby causing up to 5x or more load time before an image would otherwise load when JS is disabled.
There are a variety of ways Gatsby could potentially assist here, but mostly it's up to the browser to define what assets should be prioritized and the server streaming the response back with what order it decides to prioritize the responses on it's end.
Priority Hints could also be used to lower the importance of
preload
tags in the head, via gatsby-config.js option? Or for additional browser support,prefetch
might also work for users that'd prefer a working/rendered page loaded ASAP with JS progressively enhancing afterwards once it loads in. Currently Gatsby doesn't have support for this use-case as it's assumed the user either has JS disabled or expects hydration into a React app to be a priority.The browsers NetworkInformation Web API for saveData could potentially be queried, so that mobile devices could likewise load the site visually faster as it progressively loads into a React app?
Related issues
gatsbyjs/rfcs#35
#14043
Beta Was this translation helpful? Give feedback.
All reactions