Open shivamgupta2020 opened 1 month ago
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:
loading=lazy
webp
loading=lazy
and webp
I don't expect to see these numbers for the entire website. Only the homepage is enough.
@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
:-
@shivamgupta2020 what's the tool you've used to collect these numbers? I am curious.
@shivamgupta2020 what's the tool you've used to collect these numbers? I am curious.
I used Google Lighthouse.
/assign
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
@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
/assign shivamgupta2020
@aliok
So, I looked into it online. You can make images load lazily by adding{: loading=lazy }
to the image tag.
Reference:-
Thanks @shivamgupta2020
I think I would go this route...
I would create a PR with 2 things:
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?
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?
@shivamgupta2020 I'll do some research regarding alternative ways to improve CLS and update you.
Describe the change you'd like to see Implement two changes to enhance site performance:
Additional context These optimizations will reduce initial page load time and bandwidth usage, improving user experience and SEO.