Lazy loading images will be possible to achieve via native HTML pretty soon! The image tag will have a new “loading” attribute as a part of the HTML standard. Before we dive into this deeper, let’s see some facts about Lazy loading.
What is Lazy Loading image, and why we need this?
The browser’s default behavior is to load all images when we open a web page. That’s not so handy. Lazy loading is a well-known technique for loading images asynchronously. In reality, it means that an image will start loading when it appears in the browser’s viewport only. Otherwise, an image won’t load at all! This powerful feature cannot be ignored, because we are living in an era where a website speed optimization is essential. Let’s list the actual benefits of lazy loading images:
- Reduce the number of HTTP requests
- Reduces network data usage (super important for mobiles)
- Reduces memory usage
- Loaded after the above-the-fold content is fully loaded
If you’ve ever worked on some site optimization task, you already know how priceless it is. To achieve this, you’ll need to add some JavaScript code to your page. Luckily, there are many 3rd-party JavaScript libraries available today, and probably the most popular is Lazy Sizes. There are also many free WordPress plugins as Lazy load, a3 Lazy Load, Crazy Lazy, and othersโฆ It’s worth to mention that the majority of WordPress caching plugins have this feature as an option, too.
Lazy loading in HTML only
Good News! You won’t need JavaScript at all to accomplish Lazy loading soon! As I already stated, it will be possible with pure HTML. Here’s the new image’s attribute in the action:
<img src="apple.jpg" loading="lazy" alt="Apple will be lazy loaded"/>Yup, our favorite tag will have an additional “loading” attribute as an “src” best friend! Setting the “lazy” value to the “loading” attribute will be all the magic you have to do. Lazy loading is going to be so simple, and all above-mentioned JavaScript and jQuery scripts are going straight to the history! “Loading” attribute will have two additional values as “eager” and “auto“. The second one is actually the default browser’s behavior, while the “eager” will load images straight away as it does now. It won’t be so popular and widely used, I guess๐.
<img src="browser-default.jpg" loading="auto" alt="I'll be loaded as browser wishes"/><img src="the-old-way.jpg" loading="eager" alt="I'm not interesting at all"/>Since when can I use this feature?
It’s expected that Chrome will ship support for lazy loading since version 75. Although, it probably won’t be available for all browsers at once. So, as a developer, you always need to care about browser compatibility. In order to detect if a browser currently supports this feature, you can do something like:
<script>
(async () => {
if ('loading' in HTMLImageElement.prototype) {
// Great, browser supports "loading" attribute, apply it!
} else {
// Browser doesn't support "loading" attribute, apply some JavaScript Library...
}
})();
</script>Actually, you can see on this website how lazy loading is powerful and its huge impact on page load speed. Check my home page once again to see that. It’s lightning fast!
We are all excited about the pace of how the web is changing, and we’ll probably miss many cool libraries and plugins that are a must-have at the moment. However, I don’t think that we will stress about that so much, as our developer’s life will be way easier ๐. Looking forward to faster web and better user experience!
