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

feat: lazy load images and heavy resources #5876

Open
wants to merge 60 commits into
base: master
Choose a base branch
from

Conversation

VriaA
Copy link

@VriaA VriaA commented Sep 10, 2024

This PR fixes #5853

This pull request implements lazy loading for images and other heavy resources, allowing content above the fold to load first and deferring the rest until necessary.

Before:

before_lazy_loading.mp4

After:

after_lazy_loading.mp4

The optimization process is a bit complex due to:

  1. Many images with their src values passed as props.

  2. The presence of SVGs, which are not supported by the StaticImage or GatsbyImage components.

I explored using Low-Quality Image Placeholders (LQIP) or blurry placeholders, a technique offered by Gatsby for image loading. However, since SVGs and images passed via props are not supported, manually generating LQIP for all images does not seem practical given the large number of images across the site.

Please I’m open to suggestions.

Signed commits

  • Yes, I signed my commits.

@l5io
Copy link
Contributor

l5io commented Sep 10, 2024

🚀 Preview for commit 75bb0f2 at: https://66dfe5f9ac854a0f31eeb0c0--layer5.netlify.app

@github-actions github-actions bot added project/meshery area/blog New posts or new blog functionality labels Sep 10, 2024
@l5io
Copy link
Contributor

l5io commented Sep 10, 2024

🚀 Preview for commit 46909dd at: https://66e011707c45f247862fe736--layer5.netlify.app

VriaA and others added 21 commits September 10, 2024 09:39
Signed-off-by: Oyelola Victoria <[email protected]>
@l5io
Copy link
Contributor

l5io commented Sep 10, 2024

🚀 Preview for commit 141efed at: https://66e01730a883ce4b6af75a38--layer5.netlify.app

@Ashparshp
Copy link
Contributor

@VriaA, Thank you for your contribution!
Let's discuss this during the website call on Monday at 5:30 PM IST (7:00 AM CT).

Please consider adding it as an agenda item to the meeting minutes || meeting link.

@VriaA
Copy link
Author

VriaA commented Sep 14, 2024

@Ashparshp Okay, noted.

@sudhanshutech
Copy link
Member

sudhanshutech commented Sep 25, 2024

@VriaA are you working in the feedback provided in the meet that you can do this in parts instead adding at once since it will hard for you analyze the difference of result .

@VriaA
Copy link
Author

VriaA commented Sep 26, 2024

@sudhanshutech Yes, I am.

I noticed a minor issue and I've been trying to find a solution. Since I used the native browser lazy loading attribute, there are often empty spaces when images take time to load, especially when the network speed is throttled to a slower setting.

Screenshot 2024-09-24 at 21-43-45 Layer5

When the images eventually load, they appear suddenly and cause layout shifts, instead of having placeholders that are gradually replaced.
Would it be possible to use a basic placeholder with a subtle loading animation for images passed as props that are not supported by Gatsby’s image components?

placeholder.mp4

The images would gradually replace the placeholders as they load.

slow.network.mp4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/blog New posts or new blog functionality area/careers area/handbook area/landscape The service mesh landscape project/meshery
Development

Successfully merging this pull request may close these issues.

Implement lazy loading for images.
5 participants