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.