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 the src

The async 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 the async attribute is only for external scripts, and should only be used if the src attribute is present. Even if the async 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 the wp_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 the script_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 the str_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.