updated images and videos for better browser loading #1158
Conversation
…tter loading in browser. Signed-off-by: Sai Suvanth <[email protected]>
|
Yay, your first pull request! 👍 A contributor will be by to give feedback soon. In the meantime, please review the Newcomers' Guide and sure to join the community Slack. |
✅ Deploy Preview for mesheryio-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
github-actions
bot
added
area/blog
area/catalog
area/ci
|
@saisuvanth let's discuss this on websites call, add this as an agenda item in the meeting minutes , if you would :) |
|
Woah! Great work @saisuvanth This is something really impactful that you have worked on here. Thanks for this. |
|
merge conflicts... |
|
@ayushthe1 please help move this PR forward. |
Signed-off-by: Sai Suvanth <[email protected]>
There was a problem hiding this comment.
Thanks for the changes @saisuvanth .Could you also add loading = lazy to img tags where it's not been used. Also did you manually converted all the images to webp or used some sort of script ?
|
Yeah okay will do that, and yeah I wrote a bash script for image conversion. |
any update @saisuvanth ? |
|
@vishalvivekm yep updated all images to load lazily. You can merge the branch safely. |
|
@saisuvanth, thank you for working on this, due to the scope of the changes, reviewing got delayed, kindly resolve the merge conflicts, so that we can move further. |
Signed-off-by: V Sai Suvanth <[email protected]>
|
@thisiskaransgit Hey, can you check once I have merged and pushed into the same branch. |
|
@saisuvanth Still merge conflicts.... |
Signed-off-by: V Sai Suvanth <[email protected]>
| @@ -29,11 +29,11 @@ | |||
| {% for sublink in link.subitems %} | |||
| <li > | |||
| <div {% if sublink.link == page.url %} class="sub-nav-li sub-nav-li--active" {% else %} class="sub-nav-li" {% endif %}> | |||
| <img class="nav-img" src="{{sublink.img_src}}"> | |||
| <img class="nav-img" loading="lazy" src="{{sublink.img_src}}"> | |||
There was a problem hiding this comment.
I don't think we should not lazy load navigation because it is directly visible to user when the page loads
There was a problem hiding this comment.
Okay I'll change that into normal loading
any fixes other than that?
There was a problem hiding this comment.
@saisuvanth, resolve the conflicts please
|
@saisuvanth Any update here? Let's close this PR, given the unaddressed feedback and the number of merge conflicts. Feel free to open new PR. |
Description
Regarding the lighthouse issue, I have updated all images to webp and some videos to webm which are blocking the page rendering. Also achieved a significant improvement in lighthouse score ( The overall score is low because of not following best practices such as https in localhost). Score will increase in production build, because of caching and HTTPS usage.
This PR fixes #973
Before
After
Notes for Reviewers
Can you please let me know how the website is deploying at production build. The overhead here is because of size of CSS and JS files which need browser caching configuration from serving side.
Signed commits