meshery.io
meshery.io copied to clipboard
meshery
Low Lighthouse score of Meshery.io
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
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.
![welcome[bot] avatar](https://avatars.githubusercontent.com/in/4141?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hey @Udit-takkar, do you have any suggestions on how we can improve it
@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.
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] avatar](https://avatars.githubusercontent.com/in/1724?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
Hey @Yashsharma1911 , I have some ideas on how to make it better by reducing render blocking time. Can I work on this issue?
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.
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.
@Savio629, yes, it can be, check the recommendations in the Opportunities section of the results
Please go ahead, also try sharing your progress as you go so that others can help you if needed ^^
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
Hey this is good 👏, yes please raise a draft PR so that others can provide a review as you go.
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.
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
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!
@Yashsharma1911 @sudhanshutech please assign this issue to me , I would like to give it a try
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.
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
Results After Improving the Accessibility of the Website
The accessibility score has improved from 74 to 95.
@sudhanshutech
@Sudhanshutech @VishalVivekm
To enhance performance, I plan to:
- Convert GIFs to WebM video format.
- 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.