Delay JavaScript

Delaying the loading of JavaScript until the user interacts with the website (e.g., click, scroll) is a technique used to improve website performance. Loading all JavaScript files at once can slow down the initial loading of a webpage. By deferring the loading of non-critical JavaScript files until after the initial page load, your website can load faster and provide a better user experience.

Boost Your PageSpeed Insights Score

The Delay JavaScript feature in RapidLoad addresses two key PageSpeed Insights recommendations:

Eliminate Render-Blocking Resources
Reduce Unused JavaScript
Minimize Main thread work
Reduce JavaScript Execution time
Total blocking time
First contentful paint

By enabling this feature, your website’s Core Web Vitals metrics improve, delivering a more user-friendly experience and higher performance scores.

How to Enable JavaScript Delay in RapidLoad

Navigate to the Optimize tab in the RapidLoad plugin.
Click on the Customize Settings dropdown.
Locate the JavaScript section.
Check the box to enable the Delay JavaScript option.
Click Save Changes to apply the settings.

How RapidLoad Handles Delayed JavaScript

RapidLoad optimizes the performance of your site by delay. It offers two types of delay methods to suit different use cases:

All Files Delay (Default)

This method delays all inline and external JavaScript files on your site.

Inline Scripts

All inline scripts are processed to ensure only critical scripts are loaded immediately. These include:

Variable declarations: Critical variables (e.g., window.dataLayer = ...) are loaded immediately.
Function declarations: Essential functions (e.g., function gtag() { ... }) are loaded immediately.

Other inline function calls are delayed until user interaction occurs, improving page load times.

Example: Inline Script Transformation

Original Inline Script:

<script type="text/javascript">
      window.dataLayer = window.dataLayer || []; // Variable declaration (excluded).
      function gtag() { dataLayer.push(arguments); } // Function declaration (excluded).
      gtag('js', new Date()); // Function call (delayed).
      gtag('config', 'G-4ZTDF2L9YB'); // Function call (delayed).
</script>

Transformed by RapidLoad:

<script type="text/javascript">
      window.dataLayer = window.dataLayer || []; // Not delayed.
      function gtag() { dataLayer.push(arguments); } // Not delayed.
      // Function calls wrapped in event listener for delayed execution.
      document.addEventListener('RapidLoad:DelayedScriptsLoaded', function() {
        gtag('js', new Date());
      });
      document.addEventListener('RapidLoad:DelayedScriptsLoaded', function() {
        gtag('config', 'G-4ZTDF2L9YB');
      });
</script>

External Scripts

All external JavaScript files are delayed. RapidLoad removes the src attribute from <script> tags and replaces it with a data-rapidload-src attribute. The script is only loaded when the user interacts with the page (e.g., clicking or scrolling).

Example: External Script Transformation

Original Script (before delay):
```
<script src="https://example.com/js/script.js"></script>
```
Transformed by RapidLoad (delayed):
```
<script data-rapidload-src="https://example.com/js/script.js"></script>
```
When User Interaction Occurs:
```
<script src="https://example.com/js/script.js"></script>
```

💡

To learn how to exclude specific files from being delayed in All Files Delay, please refer to the Exclude Files page.

Selected Files Delay

a. Delaying Specific Files: To delay specific files, you only need to input part of the file name. For example, if you want to delay the file slider.js, simply enter the string slider.

b. Delaying Inlined Scripts: To delay an inline script, provide a uniquely identifiable string related to the script, such as an ID, variable name, or similar identifier. For example, you can use strings like gtag or gtm.

c. Delaying using Path: If a folder contains multiple JavaScript files that need to be delayed, you can simply provide the folder path. RapidLoad will automatically delay all the JavaScript files within that path, saving you time and effort.

️📌

When specifying a string to delay files, ensure it is unique to the intended scripts. If the string (e.g., example1) is used in another script or file, both scripts will be delayed. To avoid this, use precise strings that uniquely identify the target scripts or paths.

Exclusions

All Files Delay

In some cases, there may be JavaScript files that should not be delayed to ensure proper functionality of your website. With RapidLoad, you can easily exclude specific files from the Delay JavaScript optimization to prevent delays that could affect essential interactions or critical features.

Examples of Valid Exclusions:

Critical Inline Scripts: gtag, gtm (e.g., analytics, tracking code)
Essential External Scripts: https://example.com/js/important-script.js
Third-Party Integrations: Scripts for services like chat widgets, payment gateways, or forms that should load immediately.
Site Functionality Scripts: Scripts controlling critical features (e.g., navigation, login forms).

How to Exclude Files from Delay JavaScript in RapidLoad:

Navigate to the Optimize tab in the RapidLoad plugin.
Click on the Customize Settings dropdown.
Locate the JavaScript section and find the Delay JavaScript Exclusions option.
Click the Settings next to it.
Enter the file paths, names, or patterns for scripts you want to exclude from delay.
Click Save Changes to apply your exclusions.

Excluding files from the Delay JavaScript feature ensures that critical resources load immediately, maintaining functionality without sacrificing the performance benefits of deferring non-essential scripts.

Defer JS Minify JS