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.