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.