-
Notifications
You must be signed in to change notification settings - Fork 10.3k
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
Lazy load for gatsby-remark-images #15716
Comments
Thank you for opening this @humphreybc We'd love to accept a pull request porting the lazy load implementation over to Marking this as |
@sidharthachatterjee If you could drop a link to the relevant code in |
@humphreybc have a look at gatsby-image, it uses IntersectionObserver to 'defer image loading'. |
Hiya! This issue has gone quiet. Spooky quiet. 👻 We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing! Thanks for being a part of the Gatsby community! 💪💜 |
|
Summary
Out of the box, Gatsby does a good job of lazy loading images below the fold through
gatsby-image
. However,gatsby-remark-images
doesn't appear to do this, which results in “Defer offscreen images” complaints from Lighthouse when testing a Markdown-generated page.It would be nice if
gatsby-remark-images
added lazy loading so that images below the fold are not loaded until the user scrolls down the page. Bonus points if support for the new Chrome native lazy loading API was extended togatsby-remark-images
too.Previous work
There's been an attempt to add lazy-loading to
gatsby-remark-images
in this plugin. However it doesn't seem to work very well, and requires an external dependency inlazysizes
. It would be better if this functionality was built intogatsby-remark-images
like it is withgatsby-image
.Another relevant issue: #2288
Motivation
Improve the performance for Markdown-generated pages.
The text was updated successfully, but these errors were encountered: