Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf(gatsby-plugin-image): Handle disabled js, and add preload link #28669

Merged
merged 2 commits into from
Dec 17, 2020

Conversation

ascorbic
Copy link
Contributor

Shows an image if JS is disabled. Adds a preload link for loading=eager images.

@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Dec 17, 2020
@wardpeet wardpeet added topic: media Related to gatsby-plugin-image, or general image/media processing topics and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer labels Dec 17, 2020
Co-authored-by: Ward Peeters <ward@coding-tech.com>
@ascorbic ascorbic added the bot: merge on green Gatsbot will merge these PRs automatically when all tests passes label Dec 17, 2020
@gatsbybot gatsbybot merged commit 8300236 into master Dec 17, 2020
@gatsbybot gatsbybot deleted the perf/image-noscript branch December 17, 2020 11:54
return (
<>
{props.loading === `eager` && (
<link
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this actually speed things up? preload helps by a) upping the loading priority within the browser and b) letting the browser discover the resource earlier than it would otherwise.

Since images are already loaded at the highest priority & this is rendered right before the image — it wouldn't change much perhaps?

Might be wrong somewhere in there. But curious if you tested and saw a diff?

pragmaticpat pushed a commit to pragmaticpat/gatsby that referenced this pull request Apr 28, 2022
…atsbyjs#28669)

* perf(gatsby-plugin-image): Handle disabled js, and add preload link

* Update packages/gatsby-plugin-image/src/components/main-image.tsx

Co-authored-by: Ward Peeters <ward@coding-tech.com>

Co-authored-by: Ward Peeters <ward@coding-tech.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bot: merge on green Gatsbot will merge these PRs automatically when all tests passes topic: media Related to gatsby-plugin-image, or general image/media processing topics
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants