Defer Parsing of Javascript in WordPress to Increase PageSpeed Score, with Snippets, You can Customize For Your Own WordPress Installation. Most of us have various Javascript which are necessary plugins for our specific WordPress domains, and we know where in the php file it is taking the origin. We are talking about a measure which we can take to speed up page loading times, and pass every speed test on the web that says to defer Javascripts if possible. We are not using W3 Total Cache but we are using Redis for WordPress.
Update on 14th Oct, 2016.
Quick info on Defer Parsing of Javascript in WordPress:
This is non-blocking way for individual CSS :
1 | <link rel="stylesheet" href="https://cdn.domain.com/my.css" media="none" onload="if(media!='all')media='all'"> |
Why, that is explained in How to Load CSS Without Blocking Rendering.
This is non-blocking way for individual Js :
1 | <script type='text/javascript' src='https://cdn.domain.com/my.js' async defer>execOnReady(function(){execOnReady(function(){});});</script> |
Defer Parsing of Javascript in WordPress : Basics
Probably you have read about the defer=’defer’ and the async functions in javascript and but most don’t understand how defer parsing of Javascript in WordPress can be realized.
Those who are looking for some plugins to solve the issue; we will suggest to read our previous guide – Eliminate Render-blocking Javascript and CSS WordPress Reloaded and Older version of the article on the same topic – Eliminate Render-blocking Javascript and CSS. This will cover over 80% of the nomad users with a custom theme with or without much complexity. So, Plugins part is done; you can read the older articles and install the Plugin. Now we will come towards the snippet part.
---
Defer Parsing of Javascript in WordPress : Snippets
Defer parsing of Javascript in WordPress via plugin, in many cases is not possible to actualize because of various reasons.wp_print_scripts() calls WP_Scripts->do_items() ; WP_Scripts->do_item() uses esc_url()which does offer a filter named clean_url.
So, we can actually write a small Plugin only for one (or multiple) known other Plugin which is inserting the Javascript from Theme’s functions.php (or whatever) file :
1 2 3 4 5 6 7 8 9 | add_filter( 'clean_url', function( $url ) { if ( FALSE === strpos( $url, '.js' ) ) { // not our file return $url; } // Must be a ', not "! return "$url' defer='defer"; }, 15, 5 ); |
This is one way, specially useful if you target one Javascript. Here is a kind of Plugin out of this method.
An universal way from Theme’s functions.php will be :
1 2 3 4 5 6 7 8 9 10 | function add_async_forscript($url) { if (strpos($url, '#asyncload')===false) return $url; else if (is_admin()) return str_replace('#asyncload', '', $url); else return str_replace('#asyncload', '', $url)."' async='async"; } add_filter('clean_url', 'add_async_forscript', 11, 1); |
We actually can async with wp_enqueue_script ( read here for reference and here for using with Rackspace Cloud Files ) too :
1 | wp_enqueue_script('dcsnt', '/path/to/go/javascript-name.min.js#asyncload' ) |
Let us clean it to full working thing :
1 2 3 4 5 6 7 8 9 10 11 | wp_register_script( 'menu', get_template_directory_uri() . '/js/script.js?defer', array('query'), '1.0', true ); if ( FALSE === strpos( $url, '.js?defer' )) add_filter( 'clean_url', function( $url ) { if ( FALSE === strpos( $url, '.js?defer' ) ) { // not our file return $url; } // Must be a ', not "! return "$url' defer='defer"; }, 11, 1 ); |
Another method is by using Javascript function, which is already written by Brian :
1 | http://www.designerzblog.com/2013/12/speedup-wordpressite-load-javascript-asynchronisely.html |
