Delay Javascript Execution

New Feature

Delay Javascript Execution

Give your pages an additional speed boost with our new Delay Javascript Execution feature.  This new optimization option can help cut page load speeds if you're using any kind of external scripts such as tracking, chat tools or page widgets.

By James Dyson

September 2, 2021

Our OptimizePress optimization ninjas have been at it again!  I'm proud to announce that we've added another groundbreaking feature to the optimizations options inside OptimizePress - Delay Javascript Execution.

Watch the video below and read on to find out what this feature is and how it works...

What does Delay Javascript Execution do?

This new optimization feature will help you get a further boost to your page load speeds - particularly if you're using any kind of external scripts or widgets on your pages (and let's face it - who isn't?!)...

In short - this feature is like lazy loading for your javascripts.  It allows you to delay the loading of any javascript codes until after your visitor has interacted with the page.

This means that pages load faster even if you've got external scripts on the page - meaning better user experience, and a boost to those all-important PageSpeed insights scores.

Here's an example page created with OptimizePress with 3 external scripts added (HelpScout widget, Google Analytics & Improvely tracking):

The page still performs well overall (A grade in GTMetrix), but with the Delay Javascript Execution, we can further improve this score...

Here's an example of the same page when the Delay Javascript Execution is activated:

With the new optimization enabled, we've cut the load time in half - a significant improvement on an already well performing page.

This feature will help with any pages struggling with the following PageSpeed recommendations:

Remove unused JavaScript
Minimize Main thread work
Reduce JavaScript Execution time
Total blocking time
Time to Interactive
First contentful paint

How does it work?

When activated, the Delay Javascript Execution option will automatically stop any javascripts you have added to your pages from being loaded on page load.

This includes scripts you may include in the "Page Scripts" on-page section of the OptimizeBuilder, or any scripts added through external plugins or "header/footer" codes plugins.

Instead of loading these scripts initially, we wait until your visitor interacts with the page (even just moving your cursor over the page) and then the scripts are loaded.

This has two main benefits

1. By not loading the scripts initially - this speeds up initial page load dramatically - meaning a better user experience.

2. Because page speed testing tools do not interact with the page - this means these speed tests will report better scores.

As you can see - this feature is incredibly powerful and can dramatically improve PageSpeed scores as well as overall page load times. 

Before you activate Delay Javascript Execution across your site - we do urge caution as there are a few things you need to be aware of:

Impact on Tracking & Analytics Scripts

If you enable Delay Javascript on your tracking and analytics scripts (for example Google Analytics or Google Tag Manager) you should be aware that any visitors that do not interact with your page will not be tracked.

This is because the script is not rendered to the page which logs them as a visitor.  This can have an impact on your tracked visitor figures and may result in a drop in your analytics.  It may also limit your ability to track visitors from paid traffic sources.

In most cases we find that visitors will interact with the page in some way, but if a visitor immediately clicks back on their browser it's possible they may not be tracked.

External Scripts No Longer Working

Although we've done everything we can to ensure that this feature works with different scripts you might use on your site - it's possible this feature could stop certain scripts from working or features on your website that require codes to be rendered upon page load.

We always urge you test your pages after activating the feature - or activate it on one page first using the on-page optimization options panel before activating it sitewide.

If you find a script is not working - you can use our exclude feature to stop that script being affected by the Delay JS feature...

How to exclude a script

To help you customize your use of the Delay Javascript feature, we provide an exclusion list so you can exclude any files you don't want to be optimized by this feature

All you need to do is add id="scriptname" in the your external script code and add the name you specify to the exclusions list, and our system will stop any optimization of that script from your page (the script will not be delayed).

How to activate Delay Javascript Execution

The Delay Javascript options are available inside the Optimizations panel inside OptimizePress.

To activate this feature across all of your OptimizeBuilder built pages - go to OptimizePress > Optimizations on your sidebar to access our optimizations control panel. 

From here, ensure that you select the "Assets" tab and you'll find the Delay JS (Javascript) Execution option ready for you to activate.

If you prefer to use the feature on specific pages, you can activate or deactivate it inside the OptimizeBuilder.

From the settings sidebar, go to Page Optimizations and you'll find the option "Delay JS Execution" ready for you to activate.  If you have this activated sitewide, you can turn it off on certain pages using this feature also.

Start optimizing your javascripts now...

The Delay Javascript Execution feature is already live in the latest versions of OptimizePress (just ensure you update to the latest versions of the Dashboard and Builder plugins).  We'd love to hear how this feature has improved your scores - let us know in the comments below!

Leave a Reply

Your email address will not be published.