[Website] : Improve Lighthouse Score

[Akshun-01]

Description
Change video format from .gif to .webp
This PR fixes #973

Notes for Reviewers
I would delete the original .gif files during final push, for now I have left them as it is!

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	de2396d
🔍 Latest deploy log	https://app.netlify.com/sites/mesheryio-preview/deploys/658ca1483c8df80008391c34
😎 Deploy Preview	https://deploy-preview-1564--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[abhijeetgauravm]

Hey @Akshun-01 Let's discuss this on website call today at 6:30 PM IST / 7 AM Central time. Please add this as an agenda item in the meeting minutes.

[Yashsharma1911]

@Akshun-01 Thankyou for raising a draft PR, can you share the progress here?

[Akshun-01]

2nd Update :

Changed the images (only among the ones pointed by analysis) from .png to .webp format

Before

After

[Akshun-01]

Hey @Yashsharma1911, I was confused about this one.
Do I need to change the size(dimensions) of the original image?
Won't it be troublesome, could you please explain this point!

[Yashsharma1911]

There can be a couple of solutions you might like to read this blog https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images, I guess it's about serving image that is appropriate to screen it can differ based on resolution

I'll recommend to not hander the original image but rather creating a different size version of original images and you can use srcset attribute to pass multiple images img tag for resolution. Lemme know your findings

[Yashsharma1911]

2nd Update :

Changed the images (only among the ones pointed by analysis) from .png to .webp format

Before

After

This is Good 👏

[Akshun-01]

Helo!

[UPDATE] : Performance is at 72 (slight decrease idky)

- Changed some other heavy images from png to webp

- Resized the main meshmap gif and added responsive alternative for it

Now, these are the main problem points being highlighted:

So, I think next we can focus on

• text compression
• prioritising what to ship first (will need to look into it in detail)

[Akshun-01]

@Yashsharma1911, I don't think we can improve it much now, as it is already touching 70 now. It would need lot of optimizations to reach to 80. So, how should we proceed with the issue?

[Yashsharma1911]

@Yashsharma1911, I don't think we can improve it much now, as it is already touching 70 now. It would need lot of optimizations to reach to 80. So, how should we proceed with the issue?

Thankyou @Akshun-01 it would be nice if you can present this in tomorrows website meeting

[Yashsharma1911]

@Akshun-01 any update here?

[Yashsharma1911]

@Raj100679 would you like to review this PR

[Raj100679]

@Yashsharma1911 I don't have much experience at reviewing , but I will need to check what the issue is, then I will review it at night, Thanks

[Akshun-01]

Hey @Yashsharma1911 , I tried some other suggestions given by the report. But now rather than increasing it is rather going the opposite way.
Also the average performance was way better after the second commit ( ie after changing only the formats)
After I changed the image sizes and added multiple images for responsive image feedback it is giving inconsistent reading everytime I check. (ranging from 50 - 75 ).
So, I doubt making that change was a wise choice. It is my first time making these optimizations, so I also don't know if we should consider all feedback or do the relevant ones only.
Could you please check and see how should I proceed with this now.
Thanks!^^

@Raj100679 would appreciate your feedback and insight on this!

[Raj100679]

@Akshun-01 Sorry I am stuck with some other work, @Yashsharma1911 Can you check it

[leecalcote]

Thanks for working through this, @Akshun-01.

[sudhanshutech]

@Akshun-01 still working on this?

[sudhanshutech]

@Akshun-01 still working on this?

Got any solution?

[sudhanshutech]

following up again, @Akshun-01 are you still working on this?

[Akshun-01]

Hi @sudhanshutech, sorry for the late reply.

Actually, I was waiting for someone to review the already-made changes.
Also as I mentioned earlier, after a certain point changing a lot of things was also not helpful that much. The thing is it is asking to resize and change the format of images and we have used a lot of images. So, I worked on the ones that were really heavy and were affecting the performance greatly.

So, I think pointlessly making any more image compressions or putting a lot of time into scaling images is fruitful only if we believe that would make a great difference.
That's why I believe some review would be really helpful before proceeding.

[Akshun-01]

@Yashsharma1911
What needs to be done here? I have already discussed this in the weekly meet twice now.
And someone was required to review this and update with anything that needs to be done.

If you or anyone else could take out some time. It would be great!
I have given in depth report for every change I made, so anyone can refer to it to decide what needs to be done.

[Yashsharma1911]

Great thanks then, I'll look in the evening, till I'll suggest you to parallel work on others issues too if you want as this seems to block you.

Message from mobile

[Akshun-01]

Great thanks then, I'll look in the evening, till I'll suggest you to parallel work on others issues too if you want as this seems to block you.

Message from mobile

Yeah, I was stuck with a lot lately. So didn't get time. I will start with other issues as well now.
Do you have any in mind, I would love to help!

Also, I wanted to help in the backend part too, so if you know any beginner-friendly ones, I would appreciate it!
Thanks ^^

[Yashsharma1911]

@Akshun-01 quality of this homepage GIF becomes too poor

[Akshun-01]

@Akshun-01 quality of this homepage GIF becomes too poor

Yeah, it's not good.
One thing I can do is. I now know what things help the most in performance, so I can close this one and work on the latest branch and improve it there.
I will only make the necessary changes in that rather than optimizing and resizing every image.
What's your say?

[sudhanshutech]

sounds helpful @Akshun-01 , before creating a pr it would be good if you have documented the changes first like what is the issues and what is the solution and series them according them to priority. So in this way it will not take that much time and will easy to review.