feat: lazy load images and heavy resources #5870

VriaA · 2024-09-08T22:50:50Z

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:

Many images with their src values passed as props.
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.

…tructure page

… page

VriaA and others added 30 commits September 7, 2024 14:46

implement lazy loading for feature images

ddb9aa1

implement lazy loading for hompage playground section images

7a62efb

implement lazing loading in caseStudyBanner

1b2c8da

implement lazy loading in footer

99d1be9

implement lazy loading for meshmode images

9e3c428

implement lazy loading in meshmap section & Inline-quotes component

8d3dd18

implement lazy loading for images in meshmap-catalog

6220263

implement lazy loading for the iframe in sign-up section

a987a49

implement lazy loading for meshmap platform images

e80ea31

implement lazy loading for Customers component user picture

3cb6181

implement lazy loading for social icon images

0cccd91

Implement lazy loading for feature images on Developer-defined Infras…

3a3eb1c

…tructure page

implement lazy loading for feature images on Cloud Native Deployments…

a767468

… page

Implement lazy loading for feature images on Kubernetes Multi-cluster…

127e494

… page

implement lazy loading for feature images on GitOps page

929b8cf

implement lazy loading in comparison section of pricing page

fbb39ed

implement lazy loading in collaborative gitops page

6d8b057

implement lazy loading for images on products page

71b178f

implement lazy loading for images on meshery page

0c0e6ff

implement lazy loading for images in the meshery catalog section

fb9b5e4

implement lazy loading for images on cloud native catalog section

772d2e3

implement lazy loading for images in meshmap cta section

547da25

implement lazy loading for images in playground features section

cf9e720

implement lazy loading for svg image in Image component

f9ed110

implement lazy loading for icons on connect with us page

4dd00e7

implement lazy loading for images in the community handbook

411191b

implement lazy loading for member page social link images

78e9ea2

Implement lazy loading for arrow image in newcomers page

c1e4b6c

Implement lazy loading for images on meshmates page

d820dd3

implement lazy loading for sistent project images

fafaf33

VriaA and others added 25 commits September 7, 2024 14:46

implement lazy loading for images on meshery operator page

d7cbfa3

implement lazy loading for images on architecture diagram page

ea78574

implement lazy loading for CTA_Bottom image

6677a95

implement lazy loading for images on snapshot page

c2ffabd

implement lazy loading for images on Cloud Native Workshops page

d739224

implement lazy loading for images on brand kits page

e30a7eb

implement lazy loading for icon on how to apply section

4adb549

implement lazy loading for images on who are we section

215f030

implement lazy loading for images in partners page

7d73d71

implement lazy loading for logo on contact form

1698b42

Implement lazy loading for images on individual integrations page

e0533ea

implement lazy loading for image in RelatedPicks

8e944b4

implement lazy loading for images on service mesh interface page

7840dd9

implement lazy loading for images in TwoColLayout

0d407dc

implement lazy loading to images in MeshmapMobileSwiper section

05c611e

Merge branch 'layer5io:master' into feat/lazy-load-images

6ddac3b

implement lazy loading to images in CTA_FullWidth

7890528

implement lazy loading for images in Press section

5ef154f

implement lazy loading for images on service mesh patterns page table

6a8402d

implement lazy loading for images in SocialLinks

d6bd1d6

implement lazy loading for images on performance management page

caa3be5

implement lazy loading for images on landscape page

19706eb

implement lazy loading for images on learn page

cf34d61

implement lazy loading for images on workshops page

6716f03

implement lazy loading for images on integration page cards

90909e5

github-actions bot added area/landscape The service mesh landscape area/careers area/handbook project/kanvas labels Sep 8, 2024

VriaA closed this Sep 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: lazy load images and heavy resources #5870

feat: lazy load images and heavy resources #5870

VriaA commented Sep 8, 2024

feat: lazy load images and heavy resources #5870

feat: lazy load images and heavy resources #5870

Conversation

VriaA commented Sep 8, 2024

Before:

After: