Loading of website truly depends on JavaScript. Cause if your js is not organized or not deferred you will see a very slower website. Speed is nowadays undoubtedly most important thing. There are a several reasons why you should defer parsing of JavaScript.
If you go to google and search how to defer or async javascript. You will get a lot of advice, suggestions or blog posts about this. Frankly saying none of these are working. That’s why I thought I should write the true methods for this.
What is Defer Loading or Parsing Javascript?
Defer loading or parsing JavaScript means loading the javascripts after loading content of your website. It means it won’t take a part to load the page or the critical rendering path.
By deferred parsing of javascript website won’t wait till javascript loads then content loads. At first it will show contents with css then javascript.
How To Defer Parsing Javascript in WordPress?
To do defer parsing javascript we need to ensure how many javascript we have in our themes and plugins. Then open your theme’s function.php and paste these lines of codes:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
This is the best solution for defer parsing javascript in wordpress. It works for me. Also it works for most of the sites what I did.
Other Solution to parse Javascript
There is no guarantee that the code above will work for your website. So that’s why I am providing another solution to you. Here is some few steps:
- Create a file named defer.js
- Now add your javascripts into your defer.js
- Save and upload to your theme folder.
- Now open your header.php and copy the codes from below and paste it before the closing header tag ( </head> )
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.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>
Make sure the correct path for defer.js. For example :
/wp-content/themes/theme_name/defer.js
Defer Parsing Javascript Using Plugin
There is several plugins to defer parsing javascript. Such as:
WP Deferred JavaScript
This is a very good plugin to defer javascript on wordpress. All you have to do is just install and activate this plugin. It will automatically deferred javascript.
Async JavaScript
Async Javasript defers or async javascript to wordpress what loads via wp_enqueue_script function. You don’t need to anything to configure to use this. All you have to do just install and activate this plugin. Rest of the things it will take care.
Conclusion
Hope this tutorial about defer parsing javascript helps you.
If you need any further help about wordpress speed fix service please use our contact form.
