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:

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]

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

[l5io]

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

[l5io]

🚀 Preview for commit 141efed 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?

placeholder.mp4

The images would gradually replace the placeholders as they load.

slow.network.mp4