QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Prioritising Downloading Of Webpage Resources

Prioritising Downloading Of Webpage Resources

resource-priority

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:

<!doctype html>
<html>
    <head>
        <title>Lazy Load Attribute</title>
    </head>
    <body>
        <img src="1.png" />
        <img src="2.png" lazyload />
        <img src="3.png" lazyload />
        <img src="4.png" />
    </body>
</html>

Two things to note here:

  1. 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.
  2. 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.

window.onlazyloaded = function(){
    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:

<!doctype html>
<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.

Aug 28, 2014Narayan Prusty
Check if CSS property is supported using CSS and JavaScriptIntroduction to Subresource Integrity

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • HTML5 lazyload attribute
  • HTML elements supporting lazyload attribute
  • lazyloaded event
  • HTML postpone attribute
  • HTML5 elements supporting postpone attribute
  • Applying lazyload and postpone using CSS
  • Compatibility
Related Articles
  • Pre-rendering In Browser using rel=”prerender”
  • Preloading Resources In Browser using rel=”prefetch”
  • Page Visibility API Tutorial with Example
  • Creating Offline Applications using HTML5 Tutorial
  • Making HTML Underlying Elements Clickable Using pointer-events CSS Property
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license