After publishing a quick article about Leverage Browser Caching to Improve Site Speed of WordPress Sites, we have been getting queries about the How To Defer Parsing of JavaScript in WordPress both of these topics are important and necessary tweak for the SEO and website performance point of view.
In this post, I am going to guide you to Defer Parsing of JavaScript in WordPress for Faster Initial Loading, I have drafted this post considering that most of the readers for this post will be beginner WordPress users, webmasters, and bloggers.
This exercise is very important for the UI and UX point of view, this can directly increase your page website’s loading speed, performance, user experience, and ultimately it will help your site rank better on the search results.
Basic Tools Needed: Firebug and Google Page Speed
Use the latest version of the Firefox web browser, download and install Firebug.
Once you get Firebug working, you need to download and install Google Page Speed add-on for Firebug. Make sure to select the “Page Speed Extension for Firefox”.
Restart your Firefox browser and go to your WordPress blog. Perform the following steps below:
- Select any of your WordPress posts and let load it completely.
- In your Firefox browser, go to “Developer Option > Firebug > Go to “Page Speed” tab and click “Analyze Performance”. Google Page Speed will start analyzing the current page.
- You should see an issue reported as “Defer Parsing of JavaScript”. Expand that one; it should look similar to this:
The data shows that 863Kb of javascript parsed during initial page loading which means browser needs to download that much JavaScript every time user request for that page. This will increase page size and loading time as well. Examples of JavaScript as reported in the Page Speed report are Facebook Like Widget, Facebook like button javascript, etc.
Here we will have to use a combination of Firebug and Google Page Speed to assess the improvement after you have deferred the parsing of JavaScript. The goal is to optimize the javascript to the minimum possible volume/size.
How to Enable jQuery in WordPress?
We are going to use the jQuery library to defer the parsing of JavaScript on WordPress blog/site. So take a backup of entire WordPress site data and database and then update the WordPress core, plugin templates etc; recent WordPress versions have inbuilt jQuery libraries hence update is necessary.
This will be used by your themes and your plug-ins. The path to the jQuery library in WordPress is (as of WordPress 3.3): /wp-includes/js/jquery/jquery.js?ver=1.7.1
To check if your WordPress blog already loaded jQuery, follow the steps below:
- Go to any of your WordPress posts and load them completely in the browser.
- View the page source code of that post.
- If your themes already loaded the jQuery library, you should see the path to the library:
/js/jquery/jquery.js?ver=1.7.1
In most cases, it will show in the head section if you are logged in as administrator or it will show somewhere in the footer if you are not logged in. Also, it will be loaded by some of the plug-ins and currently used themes.
If you do not see the path, you need to enable jQuery by following the steps below:
- Login as administrator to your WordPress blog. Access website backend using some FTP or SSH client or from the cPanel’s file manager.
- Find the header.php file of your theme and add the following PHP source code just before </head>
<?php wp_enqueue_script('jquery'); ?>
- Save the changes.
- If you are using any cache solutions such as WP Super Cache or Quick Cache then clear the cache and load the page again.
- Load any of your WordPress posts again and view the page source; you should now be able to see the path to your jQuery library in wp-includes.
Defer Parsing of Facebook Like Widget and Like Button
Facebook Like Widget and Like Button is one of the most common culprits so let’s take of an example of Facebook Widget/Button and fix this. These widgets depend on the JavaScript hosted on Facebook. It actually slows down the loading of the page because these elements can be heavy at times.
Please do not forget to take backup of the entire website and its database before moving any further.
- Get the actual code of Facebook Like box widget and Like Button used by your WordPress blog, for example,
Facebook Like Box example code:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like-box href="https://www.facebook.com/techinfoBiT/" width="278" show_faces="true" stream="false" header="true"></fb:like-box>
Facebook Like Button example code: <iframe src="http://www.facebook.com/plugins/like.php?href=<?php urlencode(the_permalink());?>&layout=standard&show_faces=false&width=385&action=recommend&font=verdana&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:385px; height:35px;" allowTransparency="true"></iframe>
- Define a new JavaScript global object that can be used for jQuery exclusively for your deferred applications. This will avoid any conflicts with the use of jQuery for your other plugins and themes. Also since this deferred element would now be placed outside the WordPress loop, you need to define a variable for retrieving the permalink URLs.
<?php //Retrieve post ID for retrieving permalink URL global $wp_query; $thePostID = $wp_query->post->ID; ?> <script type="text/javascript"> $myjQueryvariable = jQuery.noConflict(); </script>
- Place the code after:
<?php wp_footer(); ?>
In your templates.
- Define the jQuery syntax for deferring the Facebook like box and button. This is the complete working jQuery code:
<script type="text/javascript"> $myjQueryvariable(document).ready(function() { $myjQueryvariable(‘#deferfacebooklikebox’).append(‘<fb:like-box href=”http://www.facebook.com/pages/php-developerorg/148874655176387/” width=”278″ show_faces=”true” stream=”false” header=”true”></fb:like-box>’); $myjQueryvariable(‘#deferfacebooklikebutton’).append(‘<iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($thePostID));?>&layout=standard&show_faces=false&width=385&action=recommend&font=verdana&colorscheme=light&height=35″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:385px; height:35px;” allowTransparency=”true”></iframe>’); jQuery.getScript(‘http://connect.facebook.net/en_US/all.js#xfbml=1′, function() {FB.init({status: true, cookie: true, xfbml:true});});}); </script>
- Place above jQuery code just after:
<?php //Retrieve post ID for retrieving permalink URL global $wp_query; $thePostID = $wp_query->post->ID; ?> <script type="text/javascript"> $myjQueryvariable = jQuery.noConflict(); </script>
- Screenshot of the above code implemented:
- Replace the old Facebook like box code and button with a div id referencing to your jQuery code. For example:
<div id="fb-root"></div> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <fb:like-box href="https://www.facebook.com/techinfoBiT/" width="278" show_faces="true" stream="false" header="true"></fb:like-box>
- Replace the above code simply with:
<div id="fb-root"></div> <div id="deferfacebooklikebox"></div>
- “deferfacebooklikebox” is the div id used by your jQuery code to identify with the Facebook Like Widget.
- Then for the Facebook like button, replace:
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php urlencode(the_permalink());?>&layout=standard&show_faces=false&width=385&action=recommend&font=verdana&colorscheme=light&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:385px; height:35px;" allowTransparency="true"></iframe>
With,
<div id="deferfacebooklikebutton"></div>
- Where “deferfacebooklikebutton” is the div id used by your jQuery code to identify with the Facebook like button.
- Save all changes then clear the cache of your WordPress blog (in case you are using any cache solutions).
- Now go to your website and reload or open the same page which was showing 862KB of javascript data and run Google Page Speed again. Take note how much improvement was made.
Based on the results, the amount of JavaScript during the initial page load was reduced from 862.3kB to 281.7kB after deferring Facebook Like widget and Like button. This could be reduced further if other JavaScript elements are deferred also.
But if you are using the Google Ad Sense the do not try to do this for that because doing so is against the terms and conditions of Google Ad Sense.
