Low Lighthouse score of Meshery.io

[Udit-takkar]

Description

meshery.io is failing the Core Web Vitals Assessment

Mobile performance score is between 20-40

Check here:- https://pagespeed.web.dev/report?url=https%3A%2F%2Fmeshery.io%2F&form_factor=mobile

Expected Behavior

The landing page should pass the Core Web Vitals Assessment

Screenshots

Enviroment:

• OS: Mac Linux Windows
• Browser: Chrome Safari Firefox
• Version:
• Device: Desktop Mobile

---

Contributor Guides and Handbook

The meshery.io website uses Jekyll and GitHub Pages. Site content is found under the master branch.

• 📚 See the Contributing to Meshery.io Website section of the readme.md and other contributing instructions, too.
• 🎨 Wireframes and designs for Meshery UI in Figma
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[welcome[bot]]

Thanks for opening this issue. A contributor will be by to give feedback soon. In the meantime, please review the Meshery Contributors' Welcome Guide and sure to join the community Slack.

[Yashsharma1911]

Hey @Udit-takkar, do you have any suggestions on how we can improve it

[Udit-takkar]

@Yashsharma1911 will have to test a lot of things with lighthouse report and use some concepts learned from here https://github.com/layer5io/layer5/pull/3572#event-8239131553. Some things like lazy loading below the fold images, using images of webp quality, properly loading the third party code, preloading fonts ... etc.

[Yashsharma1911]

Hey, @Udit-takkar are you still working on this?

[Udit-takkar]

@Yashsharma1911 yeah will start after 17 when my exams end

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[saisuvanth]

Hey @Yashsharma1911 , I have some ideas on how to make it better by reducing render blocking time. Can I work on this issue?

[Udit-takkar]

@saisuvanth yeah go ahead

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[iArchitSharma]

@Udit-takkar are you still working on this issue?

[iArchitSharma]

Reanalyzed the assessments; improvements have been made.

[Savio629]

Is it possible to increase the performance more? @iArchitSharma

[iArchitSharma]

@Savio629, yes, it can be, check the recommendations in the Opportunities section of the results

[Akshun-01]

Hello, I would like to give this one a try!

[Yashsharma1911]

Please go ahead, also try sharing your progress as you go so that others can help you if needed ^^

[Akshun-01]

Hey, Just dropping the update on this.

Changed the .gif files to .webp format.

( I tried webm and mpeg4 as it suggested but they were not working so I used webp instead)

This is the before and after change :

Before

After (best practice is low because of using local host instead of https)

Should I start a draft PR, or make a PR after making considerable changes? @Yashsharma1911

[Yashsharma1911]

Hey this is good 👏, yes please raise a draft PR so that others can provide a review as you go.

[tayyab-ilyas]

Hi does this issue still needs to be addressed ? I ran a lighthouse test and the performance metric is currently at 53. I'd like to give this a go and target to touch 80-ish.

[Yashsharma1911]

Hey yes this is still an area for help, and target sounds good too, you can work on it, also as you go and explore ways to increase lighthouse score I'll suggest to create draft PR so that maintainers can provide you feedback along the way

[tayyab-ilyas]

Hi @Yashsharma1911 I tried a bunch of stuff like deferring scripts, preloading CSS, and even tested out WebP format for assets but still no significant improvements in performance. I'll try to work on some other issue now. I hope that I didn't waste your time here. thanks!

[shubhusion]

@Yashsharma1911 @sudhanshutech please assign this issue to me , I would like to give it a try

[akshansh-modi]

checked it out, i would like to work on this

[sudhanshutech]

Hey @shubhusion thanks for jumping in. Yes please go ahead just to be ensure it would be thing to discuss also while you will fixing this issue that what are the best practices so please regularly share your progress if you would. And @akshansh-modi please you also chime in with @shubhusion to help if you would.

[shubhusion]

Lighthouse Audit Results

---

Desktop

Lighthouse Score for Desktop

---

Mobile

Lighthouse Score for Mobile

---

Next Steps

I will start with Improving the accessibility score to enhance the overall user experience.

@sudhanshutech

[shubhusion]

Results After Improving the Accessibility of the Website

The accessibility score has improved from 74 to 95.

@sudhanshutech

[shubhusion]

@Sudhanshutech @VishalVivekm

To enhance performance, I plan to:

1. Convert GIFs to WebM video format.
2. Convert select PNG images to WebP format.

Additionally, to further improve website accessibility, I plan to add captions to the main video on the Meshery homepage, making it easier for hearing-impaired users to access the content. Please provide me with the caption file for the video.

let me know your thoughts on my plan.