Book a consultation
Back to blog
June 14th, 2022

How To Defer Parsing Of Javascript

by Rhys Adams
cropped-Rhys.png

Optimising your WordPress site’s speed can make a world of difference for your SEO and User Experience. When it comes to boosting performance, deferring your JavaScript parsing is a quick and simple trick to shave those valuable seconds off your loading times. 

In this guide, we’ll go over everything you need to know about deferring Javascript parsing in WordPress, including:

  • What does deferring mean? 
  • Defer vs Async
  • How to defer parsing of Javascript with WordPress plugins
  • How to manually defer parsing in WordPress

What Does It Mean To Defer Parsing Of Javascript? 

Ok, let’s start by looking at the terminology and explaining a few of the key terms we’ll be talking about here. 

Parsing means to analyse a text and arrange it into logical components. In the case of a website, this means your browser reads the lines of code that make up your site and arranges them into the components that appear on the screen. 

JavaScript is a programming language that can be used to add interactive elements to websites. Basically, anything on a page that isn’t static is probably using JavaScript.

Javascript files are more hefty than other elements like HTML so they take longer to parse. While they are being downloaded and executed, the rest of the site rendering is halted. This is known as render blocking. This results in slower loading times that can be a deterrent to visitors. 

Now, these load time issues are more than just a minor annoyance. They can actually have a negative impact on your SEO. As Google continues to update its ranking system, page speed is now factored into your rank, with slower sites being ranked lower.

To find out if your site is suffering from render blocking resources, you can use a variety of performance-testing tools like Google’s PageSpeed Tools or GTMetrix. These tools will identify elements that are hindering your site’s performance and tell you if deferring javascript will help.

Ok, So How Do We Fix This? 

The way we fix this issue is by deferring these Javascript files so that they don’t interrupt the site’s rendering. There are 3 main ways to defer Javascript.

The first method is to just move the offending script lower down in the code. HTML is parsed top to bottom so if the script is near the end it won’t be read until everything else has been parsed. 

The other methods involve adding attributes in the code to tell the browser how to parse the scripts. These commands are defer and async. Fundamentally they do the same thing: tell the browser to parse the script without blocking the rest of the HTML. However, the two have some slight differences.

Defer vs Async

Essentially, when a page is being parsed, the browser reaches an external script and pauses its parsing to download and execute it. Async and Defer both allow the browser to download the script while still parsing, however the render still has to stop for the script to be executed. This is where the difference lies.

Async: The script is loaded parallel to the HTML and then parsing is paused as soon as the script is ready to be executed.

Defer: Downloads script alongside the rest of the HTML and waits for everything else to be parsed before executing. 

Generally speaking, defer is used more often. The reason being that scripts will often be dependent on other elements on the page or on a fully parsed Document Object Model. In this case, the rest of the HTML will need to be loaded for the script to work correctly.

Async would be used in scenarios where your script is independent of other elements and/or it doesn’t matter when it is executed.

Defer Parsing Of Javascript With WordPress Plugins 

WordPress users will know that one of the blessings of the platform is the multitude of plugins at your disposal that make site customisation easy and accessible. So, if you don’t fancy manually altering any code, these plugins have got you covered. 

  1. Async Javascript

This plugin is lightweight, simple, and best of all: free. Once installed, you can choose which scripts to apply defer or async to and it can all be done from your dashboard. 

  1. Litespeed Cache

This site acceleration plugin is designed to make your site run as fast as possible, so obviously it includes the option to defer javascript. Simply go to “Page Optimisation” then “JS Settings” and turn on the “Load JS Deferred” option and you’re good to go!

  1. WP Rocket

In the WP Rocket menu, navigate to the File Optimisation tab, check the box marked “Load JS Deferred” and let the plugin work its magic.

Defer Manually 

Alternatively, you can manually edit the functions.php file of your WordPress site to assign the defer attribute. 

It’s important to note that before editing site files like this you should make a backup in case anything goes wrong. To access your functions.php, go to the Theme Editor in your WordPress dashboard. You’ll find the functions.php file under Theme Files.

Then, simply add the following code into the file

function defer_parsing_of_js( $url ) {

    if ( is_user_logged_in() ) return $url; //don’t break WP Admin

    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;

    if ( strpos( $url, ‘jquery.js’ ) ) return $url;

    return str_replace( ‘ src’, ‘ defer src’, $url );

}

add_filter( ‘script_loader_tag’, ‘defer_parsing_of_js’, 10 );

Parsing Status: Deferred.

And there you have it, you’ve deferred your parsing! Nifty little trick isn’t it? Now that you’ve got that sorted, you can check your performance metrics to see how big of a speed boost your WordPress site is getting.

Category:
cropped-Rhys.png
Rhys Adams
Managing Director
About the author
Rhys is the specialist. He’s a lover of all things tech-related from video games to machine learning. He’s worked as a professional tech wizard for over 8 years with high-profile companies like Sky, BP, and Google.

Our newsletter

Our links

Our Work

Our Content

Social

Copyright © 2022 Drewl. All rights reserved