Webpages contain many resources which are not needed until a certain amount of time or else not needed until user actually wants to see it. Delaying the loading of these resources will decrease the page load time. In this post I will show you latest HTML and CSS specification to achieve this desired functionality.
HTML5 lazyload attribute
HTML5 lazyload attribute makes the webpage load event fired sooner(actually when enough resources are loaded to run our scripts) and also optimizes the webpage for network contention.
Network resource contention is defined as when the User Agent(or browser) determines there is a conflict over access to network resources. An example of network resource contention is when a User Agent is unable to start downloading a resource because the User Agent has exhausted all available TCP connections.
Lazyload resources are always downloaded asynchronously.
Let’s understand lazy load attribute by an example:
Two things to note here:
- Images are always downloaded asynchronously by the browser and same for lazyload resources. If there is no network contention problem then those 4 images are download as it is but document’s onload event is fired as soon as 1.png and 4.png is downloaded. onload event will not wait for 2.png and 3.png be to downloaded.
- When browser faces network contention it will pause the download of 2.png and 3.png until network problem is solved. During network contention also document onload event is fired afyer 1.png and 4.png is downloaded.
Therefore lazyload can be used to download resources which we don’t need suddenly but in later time.
HTML elements supporting lazyload attribute
There are various HTML elements supporting this attribute. Let’s see them:
img, audio, video, embed, iframe, object, svg feImage, svg image, svg use, svg script, and svg tref tags
Lazyload attribute of all these tags have the same effect. As we saw one feature of lazyload is that it downloads the resources asynchronously but noting new here because all resources attached to these tags are by default downloaded asynchronously.
script
There are four different scenarios when applying lazyload to script tags.
- If the lazyload and async attributes are present, then lazyload behaviour is the same.
- If the lazyload and defer attributes are present, the defer attribute behavior takes precedence and the lazyload attribute will have no effect.
- If only the lazyload attribute is present, then lazyload behaviour is the same.
- If the async IDL attribute of the script element is set to false, the lazyload attribute will have no effect.
link
If lazyload attribute is applied on link element then the stylesheet(or other resource) attached is downloaded asynchronous and lazyload has the same effect on it.
lazyloaded event
lazyloaded event is fired on the window object as soon as all resources attached to lazyload element are downloaded. If there is no lazyload resources to be downloaded then this event is triggered soon after onload event.
console.log("All lazy resources are loaded");
}
HTML postpone attribute
When postpone attribute is applied on an HTML element the resource attached to is not downloaded until the element is inside the browser viewport or styled in such a way that display CSS property is no longer “none”. In simple words we can say it download it when user sees it.
Resource is downloaded asynchronously.
Document’s onload event doesn’t wait for postponed elements to be downloaded. It is triggered as soon as other resources are downloaded.
We can also apply both lazyload and postpone attribute to elements.
HTML5 elements supporting postpone attribute
These HTML tags supporting postpone attribute: img, audio, video, embed, iframe, object, svg feImage, svg image, svg use, svg script, and svg tref.
As we saw one feature of postpone is that it downloads the resources asynchronously but noting new here because all resources attached to these tags are by default downloaded asynchronously.
Applying lazyload and postpone using CSS
We have being applying lazyload and/or postpone attribute to HTML tags to enable these functionality. We can apply this attribute to HTML elements using CSS by using the CSS resource-priorities property.
resource-priorities can be assigned to “lazyload” or “postpone”.
An example of resource-priorities:
<html>
<head>
<title>Lazy Load Attribute</title>
<style type="text/css">
.class1
{
resource-priorities: lazyload;
}
.class2
{
resource-priorities: postpone;
}
</style>
</head>
<body>
<img src="1.png" class="class1" />
<img src="2.png" class="class2" />
<img src="3.png" class="class1" />
<img src="4.png" class="class2" />
</body>
</html>
Compatibility
These attributes are still very new and few latest browsers support them. Meanwhile there is polyfill available for postpone attribute. You can learn more about their compatibility from official documentation.
@narayanprusty
Leave a Reply