feat: lazy load images and heavy resources

[VriaA]

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:

https://github.com/user-attachments/assets/cb79fc79-b355-4e39-8464-a5cb1b978c82

After:

https://github.com/user-attachments/assets/d81a7606-0571-4709-98b1-d5c679c053d1

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

• [x] Yes, I signed my commits.

[l5io]

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

[l5io]

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

[l5io]

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

[ashparshp]

@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]

@Ashparshp Okay, noted.

[sudhanshutech]

@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]

@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.

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?

https://github.com/user-attachments/assets/89defeb2-0e2c-49f3-a94e-0286264b5e37

The images would gradually replace the placeholders as they load.

https://github.com/user-attachments/assets/2502d87f-7830-4dda-893f-76d08a0e4437

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue is being automatically closed due to inactivity. However, you may choose to reopen this issue.