HTML 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.
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..
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;
Hm thanks, I was really confused about it, I am going on your forum for later discussions.
Ok, you can start a thread about it and I will be able to answer your questions in more detail.
Matthew I am a new blogger and would like to connect with you.
Sure thing, send me an email via the contact form and I will get back to you.
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.
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.
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.
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.
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….
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.
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.