Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve Page Load Performance by Deferring Scripts and Lazy Loading Images ✈️ #1177

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Improve Page Load Performance by Deferring Scripts and Lazy Loading Images ✈️ #1177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 5 additions & 7 deletions templates/footer.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,11 @@
<div class="four columns mt3 mt0-l">
<h4>Social</h4>
<div class="flex flex-row flex-wrap">
<a rel="me" href="https://social.rust-lang.org/@rust" target="_blank" rel="noopener" alt="mastodon link"><img src="{{root}}images/mastodon.svg" alt="mastodon logo" title="Mastodon"/></a>
<a href="https://twitter.com/rustlang" target="_blank" rel="noopener" alt="twitter link"><img src="{{root}}images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
<a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA" target="_blank" rel="noopener" alt="youtube link"><img style="padding-top: 6px; padding-bottom:6px" src="{{root}}images/youtube.svg" alt="youtube logo" title="YouTube"/></a>
<a href="https://discord.gg/rust-lang" target="_blank" rel="noopener" alt="discord link"><img src="{{root}}images/discord.svg" alt="discord logo" title="Discord"/></a>
<a href="https://github.com/rust-lang" target="_blank" rel="noopener" alt="github link"><img src="{{root}}images/github.svg" alt="github logo" title="GitHub"/></a>
<a rel="me" href="https://social.rust-lang.org/@rust" target="_blank" rel="noopener" alt="mastodon link"><img decoding="async" loading="lazy" src="{{root}}images/mastodon.svg" alt="mastodon logo" title="Mastodon"/></a>
<a href="https://twitter.com/rustlang" target="_blank" rel="noopener" alt="twitter link"><img decoding="async" loading="lazy" src="{{root}}images/twitter.svg" alt="twitter logo" title="Twitter"/></a>
<a href="https://www.youtube.com/channel/UCaYhcUwRBNscFNUKTjgPFiA" target="_blank" rel="noopener" alt="youtube link"><img decoding="async" loading="lazy" style="padding-top: 6px; padding-bottom:6px" src="{{root}}images/youtube.svg" alt="youtube logo" title="YouTube"/></a>
<a href="https://discord.gg/rust-lang" target="_blank" rel="noopener" alt="discord link"><img decoding="async" loading="lazy" src="{{root}}images/discord.svg" alt="discord logo" title="Discord"/></a>
<a href="https://github.com/rust-lang" target="_blank" rel="noopener" alt="github link"><img decoding="async" loading="lazy" src="{{root}}images/github.svg" alt="github logo" title="GitHub"/></a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From MDN:

Note: Images with loading set to lazy will never be loaded if they do not intersect a visible part of an element, even if loading them would change that as unloaded images have a width and height of 0. Putting width and height on lazyloaded images fixes this issue [...]

This wording is for me a bit confusing so I'm not completely sure about what this exactly implies for a website like the Rust blog. Just wanted to bring this here in case it's useful.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought setting the image under the user viewport not to be fetched until it's visible, which can improve network usage on the client and lead to faster website loading. Users won't download unnecessary images at the bottom unless they scroll to that section, saving network usage and ensuring the website loads faster. Here's the Google article: Browser-level image lazy loading.

</div>
<h4 class="mt4 mb3">RSS</h4>
<ul>
Expand All @@ -42,5 +42,3 @@
</div>
</footer>

<!-- scripts -->
<script src="{{root}}scripts/highlight.js"></script>
5 changes: 4 additions & 1 deletion templates/headers.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,7 @@
<meta name="theme-color" content="#ffffff">

<!-- atom -->
<link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
<link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />

<!-- scripts -->
<script defer src="{{root}}scripts/highlight.js"></script>
sanjaiyan-dev marked this conversation as resolved.
Show resolved Hide resolved