Enable/disable defer loading of JavaScript

JavaScript is present in almost all modern websites to add interactivity to users and control the webpage dynamically. Though it plays a very important role on any website, it may not be a critical piece in the first place when we talk about resource loading. After all, it’s important for any website owner to engage the visitor as soon as possible to minimize the bounce rate. Once a visitor is hooked on reading the content, the next important feature could be bringing interactivity to the webpage before the visitor makes a gesture.

Page Contents

Why JavaScript should be deferred?

Let’s consider a simple example. When a website visitor is on a fast 3G/slow 4G (standard recommendation for mobile throttling) network speed, navigates to a page they would not like to wait for all resources to load, which could be a few kilobytes to megabytes, and see nothing for a couple of seconds. Rather, the quick way to start engaging visitors is to show what piece of the content can be rendered as fast as possible, and in the background keep loading all other assets. The initial rendering also called First Contentful Paint (FCP) is one of six metrics tracked in the Core Web Vital (CWV) to determine the page experience and PageSpeed score.

Deferring JavaScript can also improve First Input Delay (FID), Total Blocking Time(TBT), and Time To Interactive(TTI) matrices.

When JavaScript should not be deferred?

If above-the-fold or the top part of a web page contains these JS-dependent elements, JavaScript should not be deferred –

Carousel
Slider
Preloader
Parallax animations or similar
Video Backgrounds

As the elements are dependent on deferred assets, it can make the visitor’s experience worse by introducing more delay or even layout reflow (increased CLS) in some cases.

In this case, when above-the-fold elements are dependent on JavaScript and you still want to defer JS loading, please make sure that the first impression of the page remains good for your visitors by following the below suggestions.

Before turning on JavaScript optimization

The best way to ensure that JavaScript optimization will give the best results is to try loading a page with JavaScript disabled in the browser. This can be easily done in popular browsers like Chrome, Safari, etc. Make adjustments in the page structure/HTML if required to ensure the critical page elements like the main product image appear even when JavaScript is disabled on the browser.

Chrome Example-

Open the Console, and hit Ctrl+P. You should see the Run command appearing. Search for JavaScript here and select the Disable JavaScript option. Reload the page with the console open and see the page layout.

This is a good way to simulate optimized page loading behavior. Irrespective of whether you use RabbitLoader or not, these adjustments will improve visitors’ experience coming from a variety of network speeds and device processing power.

Some websites rely entirely on JavaScript frameworks to render even the initial frame. Enabling JavaScript optimization or deferring scripts in such cases can negatively impact both user experience and performance scores.

How to toggle JavaScript optimization?

If you are using RabbitLoader, most probably there are already some page rules set up in advance to control the optimization behavior. If you are not familiar with it, please read about the page rules first.

Head on to Settings->Page Rules on the RabbitLoader account page. Click on the modify button for the page rule you want to modify. If you want this new setting to be effective for the entire website, choose the ‘*’ rule.

Turn on the checkbox for “JS Optimizations” to defer the loading of JS files. Keep it off if you wish not to defer the loading of JavaScript and those files will be served over CDN without any optimizations.

Example of excluding javascript from Home Page.

After saving this rule, and purging the cache, the JavaScript code execution behavior will change as per the new settings.

Once JavaScript optimization is enabled, there are some additional features you should consider enabling-

Delay execution of ads related JavaScript until page has loaded
Minify and compress JavaScript code
Disable the preloader on your theme/website if using one

Excluding specific files and inline script from optimization

Using HTML Markup

Any inline JavaScript or external JavaScript can be excluded from being deferred by RabbitLoader. To achieve this, you need to add a data-rlskip attribute to the SCRIPT element as shown in the below examples-

<!-- Example of excluding external JavaScript -->
<script scr="my-imp-script.js" data-rlskip=1 />

<!-- Example of excluding inline JavaScript -->
<script data-rlskip=1>
   // Your inline JavaScript code here
</script>

Using Page Rule

Using Page Rule, one can also exclude certain JS files from being optimized by RabbitLoader. For example, let’s say your website is using JavaScript that looks like the below-

<script scr="my-imp-script.js" />

Should you wish to exclude only my-imp-script.js from being optimized or deferred loading, please add the JS file name in the Page Rule.

exclude-single-js — Exclude specific JS file

You can add multiple file names separated by a comma.

Note: JS files should be excluded with care. If the excluded file has a dependency on other JS files that are going to be deferred, it can break your website.

What RabbitLoader do internally?

When JavaScript optimization is on, RabbitLoader utilizes the multithreading feature of the web browser to fetch the resources. This helps to keep the main thread of the browser free as the tasks are offloaded to the worker thread. Keeping the main thread free makes the browser receptive to the user’s interaction quickly thereby improving Total Blocking Time(TBT) and Time To Interactive(TTI) matrices. However, the resources pulled by the worker thread may not appear on reports of the PageSpeed Lighthouse test or GTmetrix. The only known way to verify this is by loading the page on the local browser and tracking all fired requests on the ‘network’ tab.