+0 votes
in Webmasters by (1.5m points)

How to use async and defer in WordPress to improve Javascript scripting

1 Answer

+1 votes
by (725k points)
Best answer

For some time now we have among us the Google PageSpeed ​​Insights application , which gives us recommendations on how to optimize our web pages to load faster and to offer a better user experience , both on mobile and desktop devices. In this article we will talk about how to use async and defer in WordPress to improve the loading of Javascript scripts .


It is true that optimizing the load of our website or blog WordPress is something fundamental, but it is also true that you do not have to get obsessed with obtaining a 100/100 score in the Google PageSpeed ​​Insights test , in my opinion, a note from 85 can be considered correct. The objective of optimization should not be to obtain a better grade in the test, remember that it is an automated test and may not always give us successful results.

I am going to divide the article into two parts, a first part dedicated to talk about the async and defer attributes, so that we have a clear idea of ​​what they are for, what their differences are and if one is better than another. In the second part we will see how to implement async and defer in WordPress to improve the loading of Javascript scripts (extension .js) .

What are the async and defer attributes defined in the <script> tag?

The <script> tag can define an external resource, so when parsing the HTML code, the process stops to make the corresponding HTTP request to the external resource. This has as an immediate consequence an increase in the loading time of the website.

To avoid this blocking during the period of time in which the HTTP request is made to the external resource, the async and defer attributes that are used with the <script> tag appeared. The function of these two attributes is to force the external resource load asynchronously, that is, it will not block the HTML parsing.

Here are some examples of how we are going to find the <script> tag on the web pages:

Differences between async and defer. Which is better?

Surely you will be wondering what differences exist between async and defer or if one of the two attributes is better than the other. To answer this question, we must first understand how each of the attributes works.

The defer attribute was introduced by Microsoft in Internet Explorer 4 and ended up being adopted as an HTML 4 standard. When we use defer the download of the external resource is done during the parsing of the HTML code, but the resource will only be executed when the parsing is over.

The async attribute was introduced in the HTML5 standard to load external resources asynchronously. In the case of async , the external resource runs just after its download is complete.


It can also be the case that both attributes are present, in this case async has priority over defer . In case the browser is not compatible with async , defer will be used.
For all the above, the best option is to use both attributes, so we ensure that we maintain compatibility with older browsers.

Now that we have this clear, we can move on to the second section to see how we can implement async and defer in WordPress Javascript files .

How to use async and defer in WordPress to improve the loading of Javascript scripts.

Since the version of WordPress 4.1 has a new filter that allows you to add the attributes async and defer with little effort. When adding a script in WordPress, code similar to:

function wpdocs_theme_name_scripts() {
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
	wp_enqueue_script( 'script-name2', get_template_directory_uri() . '/js/example2.js', array(), '1.0.0', true );
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

This code is found in the functions.php file of the WordPress theme, but the problem is that in this way we are adding it synchronously and it blocks the parsing. The solution is to use the script_loader_tag filter whose official documentation can be seen in this link .

To do this we must add the following code to the functions.php file:

function add_async_attribute($tag, $handle) {
   // agregar los handles de los scripts en el array
   $scripts_to_async = array('script-name', 'script-name2');
   foreach($scripts_to_async as $async_script) {
      if ($async_script === $handle) {
         return str_replace(' src', ' async defer src', $tag);
   return $tag;
add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

When adding the handlers we must look at the names used when adding the scripts and then add them to our function (in the previous example code we see that the handlers are script-name and script-name2 ).

Sometimes Javascript files are added by plugins and it may be necessary to find the name of their handlers to add them to the code.

Now we just have to clear the cache and reload the page to see how the scripts now incorporate the async and defer tags. With this little tutorial on how to use async and defer we will have optimized the loading of our website or WordPress blog a little more.

Most popular questions within the last 20 days