How to Defer Parsing of Javascript in WordPress Using Defer and Async

by

7-layers of Security for Your WordPress Site

Your website needs the most comprehensive security to protect it from the constant attacks it faces everyday.

defer parsing of javascript in WordPress

Fast-loading WordPress sites deliver serious benefits when it comes to enhancing the user experience for visitors, improving your website visibility on search engines, and increasing your site’s organic traffic.

A web page contains HTML, CSS, Javascript, and images, and each of these has to be optimized in order to reduce the page load time. Images have one of the greatest effects on page size so it is important to reduce image file sizes using a WordPress image optimization plugin.

Type of CodeUsage
HTMLUsed for content and the structure of the page
CSSUsed for fonts, colours, spacing and other styling
JavascriptUsed for buttons, forms, videos, sliders and more
The building blocks of a web page.

To improve page performance further, you can defer parsing of javascript in WordPress which means you can advise browsers to load page content and images before Javascript is loaded. Taking this measure means that Javascript elements such as forms and sliders may take a few seconds extra to load, but this is a small price to pay as page loading times are improved significantly.

defer parsing of javascript in WordPress
In the early 1990s, websites only displayed static information such as text and images. That all changed in 1995 when Netscape’s popular browser Netscape Navigator added support for a new scripting language called Javascript.

Javascript code can be executed later using two techniques called Defer and Async. Both methods are supported by popular WordPress caching plugins, though dedicated solutions will give you a little more control over which Javascript files are loaded later.

In this article, I will explain what are the benefits to defer loading of Javascript files and show you five useful WordPress plugins that will simplify the process for you.

I encourage you to read the whole article to get a full understanding of the subject, but if you’re a beginner, the one thing that you should take away from this article is that Defer and Async can significantly improve your website’s page loading times.

Different Ways to Defer Javascript Parsing in WordPress (With Defer & Async)

Javascript has established itself as an important building block of WordPress websites, being used to display buttons, forms, media galleries, audio, video, countdown timers, social media timelines, and more.

Unfortunately, Javascript is also one of the main reasons that web pages load slowly as the browser has to stop, download and execute each script before it can continue parsing the HTML markup of the page.

Parsing is the process in which the browser analyses and converts the page’s code to a format it can execute. Any code that stops this process is called “Render-Blocking” as it is delaying the process of rendering the page for visitors.

Render-blocking resources are a common reason that a WordPress website is loading slowly. Critical CSS can be displayed inline to prevent render-blocking, but it is better to defer Javascript loading later using Defer or Async to prevent Javascript code from blocking page rendering.

It is also good practice to remove unused Javascript code and reduce Javascript execution time. One way you can do this is by reducing the size of large Javascript files through a process called Minification, which removes whitespace and unnecessary code from each Javascript file.

Javascript Code
Javascript is used on websites to display buttons, forms, sliders and more.

One of the most important metrics that website benchmarking services such as Google PageSpeed Insights and GTmetrix consider is First Contentful Paint, which is the time it takes for the first content to be displayed to visitors. Google states that an FCP time of 0 to 1.8 seconds to be good and 1.8 to 3 seconds to be moderate. Anything above 3 seconds is considered slow.

All you have to do is enter the URL of a page into a website benchmarking service to see the Javascript and CSS files that are blocking the render of the page. As you can see from the screenshot below, render-blocking CSS and Javascript files can take seconds to download so if you can eliminate these resources, your pages will load significantly faster.

Render-Blocking Resources
Analyse your pages to see what Javascript and CSS files are blocking rendering.

The most effective way of eliminating render-blocking Javascript files is to use the defer and async attributes. These boolean attributes can only be used with the script HTML element when the SRC attribute is used to call external files.

<script src="javascript.js"></script>

Javascript File

<script defer src="javascript.js"></script>

Javascript File With Defer

<script async src="javascript.js"></script>

Javascript File With Async

When you add the defer or async attribute to the HTML script element, you are advising the browser to download the file at the same time the page is parsed. With defer, the file is executed once the page has been fully parsed.

In contrast, the async attribute is an asynchronous operation that executes the file as soon as it has been downloaded. As such, the total time to parse a page with async will be slightly higher as the browser will briefly stop parsing HTML to execute the file.

If you were to specify both defer and async, browsers will use async.

DeferAsync
Download the file the same time the page is parsedDownload the file the same time the page is parsed
Execute the file once the page has finished parsingExecute the file as soon as it is available
Files are executed in sequential orderPauses HTML parsing to execute files
The difference between Defer and Async.

An important standard to understand is the Document Object Model, which is frequently referred to as the DOM. The DOM represents a whole document, such as an XML file or HTML page, as a single object. Important elements such as the head, body and headers, can be considered as branches of the DOM.

If a Javascript file does not require information from another file or from the DOM itself, it may be worthwhile using the async method as important elements of your page will be displayed quicker. Just be aware that async can cause errors with your website if the file is requesting information that has not yet been loaded.

If a Javascript file does require information, defer is the preferred option as it ensures all content is retrieved correctly before the file is executed.

The goal of defer and async is to reduce blocking of page rendering and you will see a major improvement in page loading times whichever method you use.

I recommend reading Zell Liew’s article “How and when to use Async and Defer attributes” for a more comprehensive explanation of when to use defer and async.

How to Defer Parsing of Javascript Using a WordPress Plugin

The majority of Javascript calls on your website will come from your WordPress theme and activated WordPress plugins, therefore it is impractical to manually add the defer and async attributes to script elements.

It is better to use a performance WordPress plugin to defer parsing of javascript in WordPress and simplify the process of applying defer or async throughout your website.

Be mindful of the fact that the wrong configuration setting will cause problems with your website design. For example, contact forms may not display correctly unless you choose the right configuration settings or exclude the contact form’s files from optimization.

Trial and error is, therefore, necessary to find the right configuration settings and the best performance for your website.

  • Website Backups – Backup your website before you activate an optimisation WordPress plugin
  • Test Performance – Test the performance of key pages on your website and each time you change an optimisation configuration setting
  • Review Your Website – Check that no part of your website is broken after changing your configuration

If you run into any major problems when deferring parsing of javascript, revert to the plugin’s default settings. The plugin can also be uninstalled if it isn’t working in harmony with your website.

1. Autoptimize

Autoptimize
Autoptimize is active on over one million WordPress websites.

Autoptimize is a versatile WordPress optimization solution that allows you to aggregate and minify Javascript, CSS, and HTML. The optimized content is cached to improve performance. This cache can quickly become too large, so I encourage you to use Autoclear Autoptimize Cache to automatically clear the cache.

Although Autoptimize is known for file aggregation, it can also be used to defer parsing of Javascript files so that they are not render-blocking. Javascript and CSS code can also be displayed inline and there are additional optimization options for images, Google Fonts, emojis, and more.

defer parsing of javascript in WordPress using Autoptimize
Autoptimize works in harmony with WordPress caching plugins.

2. Async JavaScript Plugin

defer loading of Javascript using Async JavaScript
Async JavaScript gives you full control over scripts.

Developed by the creator of Autoptimize, Async JavaScript allows you to apply async and defer to Javascript files throughout your website. It gives you full control over every Javascript file, allowing you to exclude jQuery, specific Javascript files, WordPress plugins and WordPress themes. If you prefer, you can specify exactly which Javascript files to async and which to defer.

One of the coolest features of Async Javascript is the setup wizard which runs performance tests on GTmetrix for all possible configuration settings for your website. This is a great time-saver as the results show exactly how fast your website will be with each configuration, but be sure to check your website each time to ensure no aspect of your website is broken.

Async JavaScript Settings
Async JavaScript’s wizard helps you determine the best configuration settings.

3. Perfmatters

Perfmatters
Perfmatters has many useful performance tools and features.

Perfmatters is a premium WordPress performance toolbox that boasts dozens of unique performance features. Retailing from $24.95 per year, the plugin lets you defer parsing of Javascript files (all JS files) on your website. jQuery files can be included in deferrals and you can exclude specific Javascript files too. Another cool option it gives you is Javascript Delay, which will only load Javascript files when there is user interaction.

Perfmatters can be used to disable core WordPress features to improve security and performance. It also lets you define a custom login URL, preload content, lazy load images, integrate Google Analytics, optimize Google Fonts, and more.

My favorite feature is the script manager as it allows you to enable and disable Javascript and CSS files for every page on your website. This will reduce the size of pages considerably as WordPress developers have a bad habit of loading Javascript and CSS files throughout your website, even when they are only being necessary on a few pages.

Perfmatters Javascript Settings to defer Javascript parsing
Perfmatters lets you defer and delay Javascript files.

4. Asset CleanUp

Asset CleanUp
Asset CleanUp provides a host of tools to reduce the size of pages.

Asset CleanUp is a feature-rich optimization WordPress plugin that lets you minify, combine and defer parsing of Javascript and CSS files. Its CSS and JS manager works in a similar way to Perfmatter’s script manager, allowing you to specify whether a file is loaded on a particular page. You can also disable core WordPress settings, clean up HTML code, optimize Google Fonts, and more.

A single license for Asset CleanUp Pro retails at €42.36 per year. Upgrading allows you to place code inline and specify async and defer for Javascript files on a page-by-page basis. It also unlocks a plugin manager and gives you greater control over how assets are loaded across your website.

Asset Cleanup Theme Files
Each Javascript file can be configured individually.

5. HTTP/2 Push Preload

HTTP/2 Push Preload
Content can be preloaded with HTTP/2 Push Preload too.

HTTP/2 Push Preload lets you push and preload Javascript and CSS files across your HTTP2 supported server using the enqueue loading function. This can be applied to all files or you can choose to configure each resource separately. Resource types include script, style, audio, embed, fetch, font, image, object and video.

When you enter the URL of a Javascript file, you can choose to async, defer or remove. HTTP/2 Push Preload allows you to define rules as to when this setting will apply. You can define Javascript rules for a resource for all pages, for mobiles or desktops, for specific posts and pages, for categories, search pages, WooCommerce pages and more.

HTTP/2 Push Preload
Specific Javascript files can be removed or be set to defer or async.

Final Thoughts

Javascript continues to be the preferred method of adding dynamic content and interactive elements to websites. As many WordPress themes and plugins use Javascript, it is important to defer parsing of javascript in WordPress and use defer and async to ensure pages render quickly and reduce blocking of page rendering.

You’ll find functionality to apply defer and async in many WordPress plugins, though the solutions I have referenced in this article give you more control over your Javascript files.

On my own website, I use Autoptimize for file aggregation and Async JavaScript for Javascript deferrals. I’ve been happy with Async Javascript, though HTTP/2 Push Preload may be a better option for many website owners as it gives you better control over where optimization settings are applied.

Asset CleanUp and Perfmatters offer similar features and functionality so I do not recommend using them together. Asset CleanUp Pro undoubtedly offers better control and more advanced features, though I continue to use Perfmatters on my own website for cleaning up WordPress as it’s easier to use. Both solutions will enhance any WordPress optimization setup, even if you are using a different WordPress plugin to defer parsing of javascript to reduce blocking of page rendering.

I encourage you to test all of these WordPress plugins to defer javascript parsing and perform multiple tests to ensure you have the best configuration.

Good luck.

Kevin

Category:

You may also like


ManageWP vs MainWP: A Head-To-Head Comparison
ManageWP vs MainWP: A Head-To-Head Comparison

When it comes to website maintenance, efficiency isn’t just an option; it’s an essential. Without diligent management, your website is exposed to numerous risks.  The user experience could degrade, you…

How can we help you?

If you’re worried that your website has been hacked, MalCare can help you quickly fix the issue and secure your site to prevent future hacks.

My site is hacked – Help me clean it

Clean your site with MalCare’s AntiVirus solution within minutes. It will remove all malware from your complete site. Guaranteed.

Secure my WordPress Site from hackers

MalCare’s 7-Layer Security Offers Complete Protection for Your Website. 300,000+ Websites Trust MalCare for Total Defence from Attacks.