Improve Site Performance with Lazy Loading and WEBP Images

[shivamgupta2020]

Describe the change you'd like to see
Implement two changes to enhance site performance:

1. Add loading="lazy" to image tags to improve Cumulative Layout Shift (CLS).
2. Convert PNG/JPG/JPEG images to WEBP format for faster loading times.

Additional context
These optimizations will reduce initial page load time and bandwidth usage, improving user experience and SEO.

[aliok]

Hey @shivamgupta2020

Thanks a lot for the suggestions.

I will have some comments...

Add loading="lazy" to image tags to improve Cumulative Layout Shift (CLS).

Sounds good.

Convert PNG/JPG/JPEG images to WEBP format for faster loading times.

We will need a bash script that iterates over the website content and converts images to webp. We can't do this manuallly.
This also means, we need another script that checks if images are converted to webp as a GitHub+Prow check and blocks merging the PR if there are images not converted.

However, let's talk about specifics later. We would need some data first, to see how much improvement there is.

We would need 4 data:

• What's the page size and page load time currently?
• Same metrics, but with loading=lazy
• Same metrics, but with webp
• Same metrics, but with both loading=lazy and webp

I don't expect to see these numbers for the entire website. Only the homepage is enough.

[shivamgupta2020]

@aliok
Here are the metrics for all four of you requested.

Metrics without loading=lazy and webp:-

Metrics wtth webp:-

Metrics with loading=lazy:-

Metrics with loading=lazy and webp:-

[aliok]

@shivamgupta2020 what's the tool you've used to collect these numbers? I am curious.

[shivamgupta2020]

@shivamgupta2020 what's the tool you've used to collect these numbers? I am curious.

I used Google Lighthouse.

[shivansh-bhatnagar18]

/assign

[shivamgupta2020]

Hi @shivansh-bhatnagar18 , I've completed most of the work on this issue and am waiting for the maintainer's approval to raise a PR. You can contribute to other issues, so I'm unassigning you for now.
/unassign @shivansh-bhatnagar18

[aliok]

@shivamgupta2020
I see there's not much improvement with webp. Let's not go that route.

Can you create a small POC for using loading=lazy? I wonder how we can do that with Markdown and MkDocs

[aliok]

/assign shivamgupta2020

[shivamgupta2020]

@aliok
So, I looked into it online. You can make images load lazily by adding {: loading=lazy } to the image tag.
Reference:-

1. Native Lazy Loading of Images squidfunk/mkdocs-material#1867
2. https://squidfunk.github.io/mkdocs-material/reference/images/#image-alignment

[aliok]

Thanks @shivamgupta2020

I think I would go this route...

I would create a PR with 2 things:

• Homepage images converted to lazy
• A script (in Python) that checks that page for any images without lazy loading and fails --> add a new GitHub action for this

[rohitsrma]

Hello @aliok, @shivamgupta2020!

I followed the discussion, and this enhancement looks really interesting to me. If there's any way I can help, especially with the Python scripting part, I'm more than willing to do so.

One aspect we need to consider is its impact on users with slower internet speeds, as it could cause layout shifting issues. For example, when I tested lazy loading on the first two images with a slow internet connection, there were noticeable layout shifts. While it's not a major issue, it's worth thinking about possible ways to mitigate it. What are your thoughts on this?

[shivamgupta2020]

Hello @aliok, @shivamgupta2020!

I followed the discussion, and this enhancement looks really interesting to me. If there's any way I can help, especially with the Python scripting part, I'm more than willing to do so.

One aspect we need to consider is its impact on users with slower internet speeds, as it could cause layout shifting issues. For example, when I tested lazy loading on the first two images with a slow internet connection, there were noticeable layout shifts. While it's not a major issue, it's worth thinking about possible ways to mitigate it. What are your thoughts on this?

Hi Rohit,
I want to try the scripting part first. If I encounter any issues, I'll look for your help.
Regarding CLS on slower internet speeds, I suggested using WebP format, but as @aliok mentioned, it's making little difference. Can you recommend any alternative ways to improve CLS?

[rohitsrma]

@shivamgupta2020 I'll do some research regarding alternative ways to improve CLS and update you.

[github-actions]

This issue is stale because it has been open for 90 days with no
activity. It will automatically close after 30 more days of
inactivity. Reopen the issue with /reopen. Mark the issue as
fresh by adding the comment /remove-lifecycle stale.