Async JavaScript

This is part 1 in a series of posts that are intended to accompany my talk from WordCamp US 2015.

MDN defines theasync attribute as:

Set this Boolean attribute to indicate that the browser should, if possible, execute the script asynchronously. It has no effect on inline scripts (i.e., scripts that don’t have thesrc

Theasync attribute helps prevent parser blocking, which effectively prevents the browser from stopping to download the script before it continues to parse a page. Keep in mind that theasync attribute is only for external scripts, and should only be used if thesrc attribute is present. Even if theasync attribute is present in an inline script, the browser will ignore the attribute and execute script immediately.

Ilya Grigorik, in an article from his website, says the following about synchronous scripts:

Synchronous scripts are bad because they force the browser to block DOM construction, fetch the script, and execute it before the browser can continue processing the rest of the page.

Scripts without theasync attribute, are fetched, parsed, and executed immediately, before the browser continues to parse the page. When taking this into account, in addition to the amount and size of the scripts included on a site, the result could be dramatically greater. When the browser can quickly and effortlessly parse a page, the result is a lean, and highly performant site that will result in a great user experience.

In financial terms, the ROI (Return On Investment) outweighs the effort it takes to add theasync attribute. Let’s look at how this can be done.

Standard Implementation

Theasync attribute is a simple addition to the<script> tag. Here’s an example:

WordPress Implementation

If you are like myself, you work with WordPress on a daily basis. The preferred and standard way to add a script is to use thewp_enqueue_script function:

Notice that in the above example that we don’t have a place to add theasync attribute. Thewp_enqueue_script function includes the following parameters:

As of WordPress 4.1, we can easily add theasync attribute to an enqueued script using thescript_loader_tag filter. Here’s an example of how this can be done when using the enqueued script above:

The first thing you may notice is that the$handle and$src parameters that were declared when the script was enqueued, are being called as parameters of the function that we are adding above. These$handle parameter helps to identify the correct enqueue script, while the$src parameter is the URL of the script. You may also notice a third parameter called$tag . The$tag parameter is the<script> tag for the enqueued script.

In the above example, we are initially checking if the$handle parameter does not match the handle of the enqueued script that we want to filter. If the$handle parameter does not match, we return the$tag . The check is included to ensure that only the intended enqueue script is filtered, while all others are untouched.

After we have verified that we are filtering the correct enqueued script, we return the new$tag using thestr_replace function. The first parameter, in this case<script , is the search parameter. The search parameter is the value being searched for. The second parameter, known as the replace parameter, is the replacement value that replaces the searched values. In the above example, the search parameter of<script will be replaced with<script async . The last parameter, known as the subject, is the string or array being searched and replaced on. In this case, the$tag is the subject.

The result of the above function would be:

<script async src="path/to/script.js"></script>

As you can see, with the help of a few lines of PHP, we can easily async an enqueued script in WordPress.

If you would like to read more about leveraging thescript_loader_tag filter, read my post titled Filtering HTML Script Tags With script_loader_tag.

I would love to hear your comments or answer an questions you may have. Use the comments section below to do so.