 |
| Defer parsing Javascript files and codes for Faster sites |
Whether you are a Web developer or a normal Blogger or a owner of a highly popular eCommerce site everyone wants their site to look awesome to attract more visitors and push in the user engagement by using Javascript to add in the necessary interaction to their site but in the process they make their sites super slow, as sites now are full of interactions and the user has to wait for the full site to load which is just a signal that your site's ranking is going to be very poor as your are not following the Google page speed guidelines which clearly ranks websites based on the starting load time a webpage takes to load, the faster it is the higher it is ranked. Now you don't have to remove all the Javascript based interactions from your website to make your site's Google Page speed score better but you can have both interaction and page speed at the same time by correctly deferring Javascript files and scripts on your website or blog. The key here is to defer the loading of external Javascript files and scripts and show the actual content first, that is faster initial load time while deferred Javascript files load at their own pace getting them ready by the time user scrolls down the content, that is user doesn't have to wait for the interactions to load first and can have amazing user experience at the same time. Now let's get started with defer loading your Javascript files on your site or blog.
What does Defer Loading of Javascript mean
By defer loading of Javascript it means to render the javascript files only after the whole document has loaded. Well the basic render process is HTML → CSS → Javascript where you should load above the fold and readily needed content first in order to display the document properly and with faster load times and then later load the remaining styles and scripts, usually below the fold content especially footer parts which can be loaded later.-
Now in order to make your site load faster first a fall we have to find all the Javascript files which are affecting your site's page speed and for that we will need a good page speed analyzer to find all the culprits. It's recommended to use tools.pingdom.com or gtmetrix.com or Google's own page speed insights to test your site's speed. Let's use tools.pingdom.com to analyze our webpage. Just enter the site or page's url and take a note of all the Javascript files which are delaying your page speed.
 |
| Test Your Site's speed using Tools.pingdom.com |
Deferring Internal and Inline Javascript codes (Raw Scripts)
Before we move on to external Javascript files let's defer the interactions made with the internal Javascript files. To defer your internal Javascript files simply add an defer attribute to your script tag like the one done in the code below.
<script src="yoursite.com/js/javascript file.js" defer></script>
In the above code replace the green part with your site's internal Javascript file ending with js extension and add the defer attribute as shown in red. For some sites consisting of XML or XHTML platforms like Blogger you need to provide a key to the defer attribute like this defer='true' or defer='on' or defer="defer" which you can also use inside the inline scripts that is simple Javascript inside your posts and served with codes in between script tags.
 |
| Analyze all the external scripts slowing down your site via tools.pingdom.com |
Deferring external Javascript files (Google Page Speed Recommendation)
Now coming to the most important Javascript files that is the external Javascript files which can be loaded later and the user need not wait for it. These external Javascript files delay your site as your site stops loading only after it has downloaded the whole external js file. Now in order to defer load these Javascript files add in the script URL (green marked line)in the code below.
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "your external javascript file.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
After adding your Javascript file URL to the code add the whole code before the </body> tag in your html file or the template you are using.Use CTRL+F to find the body tag in our template. For example you wish to defer the Google plus one social button script then you can target it in the above code by adding the https://apis.google.com/js/plusone.js in the green section of the above code which will now load the plus one button only after the whole document has loaded and the user need not wait for it to load while it loads after the whole html document has loaded. Similarly target other scripts as well and add them before the body tag using the above script.
Deferring Multiple Number of Javascript Files
Now to defer multiple number of Javascript files you can either use the above script in step 4 multiple number of times or use the following script to defer target multiple number of scripts one by one.
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
if(success && getScript.call(success) == '[object Function]') { success(); }
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js');
getScript('your script');
});
})();
The above example showcases the most used jquery and Jquery UI scripts while chained inside the getscript("",function(){}) that is one is loaded only after the other is loaded, which can be used to add in more Jquery dependent files that needs to be loaded after Jquery is loaded or use an array ['script1','script2','script3'] instead of the single script to load them. Similarly add more scripts using the getScript tag (as shown in blue) to defer load them on your website or blog.
What scripts to defer and what not to ?
This is a common question asked on what scripts should be targeted with the defer attribute and what should not. Well that's simple use defer for those which are unnecessary and can load after the whole document (user need not wait for these to load) has loaded like the advertisements, social buttons, related posts, Jquery scripts(provided no functioning is used in above the fold content which is required readily) etc which need not be loaded as whole along with the document and avoid those which are readily required by the html document like a script in the above the fold content, lazy load scripts for images, etc to load the site faster. You can test for these scripts one by one using the alert function of Javascript and using tools.pingdom.com to check every time you target a script with defer attribute.
<script type="text/javascript" id="script1" defer="true">
alert ("Hey this is script1 I loaded after the document!");
</script>
<script type="text/javascript" id="script2">
alert ("Hey this is script2 I loaded along with your document dynamically!");
</script>
In case load time increases remove the defer attribute for that particular script targeted and keep deferring other scripts until you defer parse all the page speed enemies.Also avoid deferring depended Javascript files.
Note for Developers: Those worried about inline scripts delaying their page load times can create an array and push functions to it and at the end of the body tag loop this array and execute them one by one especially after loading Jquery functionality. And those using Google Pagespeed modules can overcome the deferring of all Javascript functions by using pagespeed_no_defer attribute to selectively no defer functions which are required readily by the document.
Just follow the above Steps to get your site or blog ranked higher in Google with incredible fast load times by defer parsing Javascript files without having to lose a single functionality increasing both productivity and functionality for the users and readers thereby helping your sites SEO as well in the search results, faster site ranks first just like the way how faster Google renders a search query..