Improve Page Load Performance by Deferring Scripts and Lazy Loading Images ✈️ #1177
Conversation
| <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> |
There was a problem hiding this comment.
From MDN:
Note: Images with
loadingset tolazywill 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 awidthandheightof 0. Puttingwidthandheighton 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.
There was a problem hiding this comment.
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.
Hi, I believe this pull request implements small but valuable performance improvements and follows best web practices.
The script tag is now run with the defer attribute, which improves performance. For more information, please see https://web.dev/articles/efficiently-load-third-party-javascript#defer.
We've added the loading attribute to images below the viewport, enabling lazy loading and optimizing network usage. For more information, please refer to https://web.dev/articles/browser-level-image-lazy-loading#the_loading_attribute.