Defer Parsing of Javascript with HTML 5

HTML 5 defer and async attributeHTML 5 introduced new methods of deferring JavaScript which aids in optimizing websites. It comes with two specific attributes that help to improve load times by either loading the JavaScript Asynchronously or Deferring it. But first how do we know if our site is HTML 5 or not.

HTML 5 Declaration

If you right click and select view source on any website, the first thing you should see at the very top is the Doctype.

This declaration comes in a variety of forms but there is only one form that tells us this website is HTML 5.

<!DOCTYPE html>

So now we know how to identify a website that is HTML 5, we can take  a look at the attributes that form just a small part of what it can do.

Internal and External JavaScript

These attributes only work for external scripts which would look like this.

<script type='text/javascript' src='http://sitename.com/path-to-the-script.js'></script>

If you see a script that looks like this

<script type='text/javascript'>

//script args

</script>

then these attributes will not work as the above JavaScript is internal.

The HTML 5 Attributes

The two attributes that HTML 5 offers for the <script> tag are both Boolean attributes which means it has just two values, think about a light switch, it can either be on or off in most cases.

The Defer Attribute

Although the defer attribute is not specifically HTML 5 it is still important to know how to use it. The defer attribute informs the browser to execute the script after the page has loaded.

We add the defer attribute to our script like so.

<script type="text/javascript" src="http://sitename.com/path-to-the-script.js" defer></script>

 The Async Attribute

The Async Attribute is new to HTML 5 and I can say for sure that it does work. I have been using it on all HTML 5 websites that I have been working on with excellent results.

A few points to consider when using this HTML 5 attribute.

  • This should not be used on important scripts such as the main Jquery library as some scripts are required to load and execute before other scripts load.
  • You should test out your site with tools such as GTmetrix and google pagespeed to ensure that it is working.
  • Test out all functions dependant on the script to make sure they work as expected.

From my own experience the async attribute has worked for almost all scripts as long as it is an external script

You simply have to add the async attribute to your scripts like so.

<script async type="text/javascript" src="http://sitename.com/path-to-the-script.js" ></script>

You can add the defer and async attribute before or after as seen in both these examples.

HTML 5 is set to include other new methods of optimizing your websites and I for one am looking forward to the first full and stable release of HTML 5 in 2014.

Note –  the type attribute has also been removed from HTML 5.

type="text/javascript"

Most people will still add this attribute but it will steadly disappear.

HTML 5

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

18 comments… add one

  • vishal2072 January 7, 2013, 7:12 am

    So how should I add it to Google Analytics Scripts and Disqus Comment System jscripts, I am using Thesis 2.0 software. I am a newbie so tell me in easy language Thanks..

    • Matthew Horne January 7, 2013, 7:17 am

      Google analytics script is already asynchronous. As seen by this in the script

      ga.async = true;

      Disquss is also already asynchronous as it contains this within the script
      dsq.async = true;

      • vishal2072 January 8, 2013, 3:15 am

        Hm thanks, I was really confused about it, I am going on your forum for later discussions.

        • Matthew Horne January 8, 2013, 5:11 am

          Ok, you can start a thread about it and I will be able to answer your questions in more detail.

  • Jeremy Poland January 15, 2013, 2:46 pm

    Matthew I am a new blogger and would like to connect with you.

    • Matthew Horne January 15, 2013, 3:01 pm

      Sure thing, send me an email via the contact form and I will get back to you.

  • Ratanak Ou January 19, 2013, 3:53 pm

    Hello friend,

    As I have read so many webpage about how to defer parsing the java script, I just feel that your trick is so helpful. I also added the word (defer) into my script but I did not see anything change. I also deleted the type=”text/javascript” to find out if it is ok or not. Then I check my webpage again with gtmetrix but defer parsing is still the same. Could you check my script and give me a bit advice. http://www.oublogs.com. Thank you so much for your help.

    • Matthew Horne January 19, 2013, 4:05 pm

      If you switch your dotctype to the HTML 5 one you can make use of the async attribute, look at header.php and change it to HTML 5 doctype.

      • Ratanak Ou January 19, 2013, 4:56 pm

        I seem don’t understand. Could you write the switch for me for more detail? I saw that it is so it should be HTML 5 already.

        • Matthew Horne January 20, 2013, 5:03 am

          See this post please. http://diywpblog.com/forum/topic/108-switching-doctype-to-html-5/

          I didn’t realize I couldn’t post code here, so that’s why it didn’t make sense to you.

          • Ratanak Ou January 20, 2013, 7:01 am

            Hello friend, Thank you so much for helping me. Now I replaced its to what you wrote for me. Could you check my oublogs on GtMetrix and give me more advices of how to improve my blog speed. I tried to edit and learn more from many IT learners like you but I could not improve my blog better….

  • Jay Wren February 16, 2013, 4:29 pm

    Google speed 96; Yslow B Grade 82. Header full of js. I am not sure that moving the javascript is worth the trouble relative to the 500 error risks. I think I might be smart to consider removing some plugins or combining the style.css sheets of the plugins where possible and just leave the js alone. One of the plugins uses a basic Wordpress theme stylesheet that is different from my website theme. I might try to single up some style sheets. If anyone has any experience with that method please let me know. Great forum Matthew. I posted this page on LinkedIn Wordpress Experts.

    • Matthew Horne February 18, 2013, 4:24 am

      Thank you, in order to remove the plugin CSS you would need to de-register and de-queue them via functons.php from there you can copy the CSS to a master style sheet.

  • Aernout June 5, 2013, 2:21 pm

    I first tried your technique described here: http://diywpblog.com/defer-parsing-of-javascript-wordpress-optimization-101/ and added the code to my custom.php of my Thesis-2-skin.
    No effect.

    My question here is, in Thesis 2, how do I add either the defer or async attribute to the script tag of js that is added through a plugin?

    • Matthew Horne June 5, 2013, 2:29 pm

      For plugins, you would have to modify the plugin itself, or you can dequeue the script or remove it, it sort of depends how the script is added. If they added it correctly, it can be dequeued via custom.php and then you can manually add it.

  • Geoffrey Allan Plauché July 10, 2013, 5:57 am

    Thank you for this tip, Matthew. How do we decide which attribute to use though? Or can we use both?

    Here’s one use case:

    http://prometheus-unbound.org/2013/06/29/tv-series-review-orphan-black-season-one/

    I just added the Google+ comments system after the WordPress comments. Without “defer” or “async” the javascript was significantly delaying the appearance of my sidebar. I have “async” applied right now. It helps a lot. But would “defer” be better?

  • ray October 15, 2013, 2:52 pm

    hay Matthew. iam a newbie. where i have placed the code ?

    • Matthew Horne October 15, 2013, 5:04 pm

      You would have to have access to the scripts themselves, it could also be done via php however adding attributes to all scripts could cause issues. As scripts also rely on priorities in some cases.

Leave a Comment