How to Defer or Asynchronously Load JavaScript in WordPress Without a Plugin

WpFASTER Code 4 Comments

Have a WordPress site with some render blocking JavaScript? Are you using a plugin like Autoptimize that can’t aggregate/concatenate and therefore cannot defer external, 3rd-party JavaScript? Eliminate it with this code snippet for better real world performance and better grades on tools like PageSpeed Insights! Copy and paste this code snippet — in plain text — to your functions.php file, or, add it with a plugin like Code Snippets and adjust accordingly. NOTE: defer=”defer” can also be async=”async”, test both with WebPageTest.org to see which results in the best real-world performance. This code will work for all properly enqueued JavaScript files.

/*Function to defer or asynchronously load scripts*/
function js_async_attr($tag){

# Do not add defer or async attribute to these scripts
$scripts_to_exclude = array('script1.js', 'script2.js', 'script3.js');

foreach($scripts_to_exclude as $exclude_script){
 if(true == strpos($tag, $exclude_script ) )
 return $tag; 

# Defer or async all remaining scripts not excluded above
return str_replace( ' src', ' defer="defer" src', $tag );
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Comments 4

Leave a Reply

Your email address will not be published. Required fields are marked *