Reduce JavaScript execution time

Overview

Reducing JavaScript execution time, in general, refers to decreasing the amount of time spent parsing, compiling, and executing JavaScript files.

By default, JavaScript executes on the main-thread and when this is happening, the browser cannot execute other tasks.

Depending on the order in which the scripts are executed, this could prevent elements from being painted, delaying page rendering and affecting page interactivity.

Reducing JavaScript execution time essentially reduces the main-thread blocking time – in turn, potentially weakening the effect of cascaded requests.

Improving this audit can result in better Performance metrics, and drive real-world performance gains.

How to reduce JavaScript execution time with Staq

AGGRESIVE OPTIMIZATION

**TRY WITH CAUTION**

This strategy does not work for all websites, however, it is a quick and easy solution to apply and may work for you.

Under Delay JavaScript execution, go to Exclude JavaScript keywords from delay and delete all excluded file names. This will make this list empty:

Then, go to the website in Incognito mode and make sure:

• the Inspect window is open
• it is selected on the Network tab
• the JS tab is selected.

Then, go ahead and refresh your screen with your keyboard.

Under the JS tab, you should notice that no scripts will load until you move your mouse or keyboard as per the screenshot below:

After, go ahead to the testing phase to ensure the site works perfectly. If so, you’re done. If it requires tweaks, refer to the tutorial below.

QUICK TIP: It is recommended that you turn off animation to all elements that appear above the fold only. The animation is powered by JavaScript which will give you a blank section until you move your mouse.





MODERATE OPTIMIZATION

To see the unminified JS files, go to Site Optimizer > JavaScript and turn off both:

• Minify JavaScript tags
• Minify JavaScript files

Continue to have Delay JavaScript execution enabled with the default list of keywords listed under Exclude JavaScript keywords from delay.

Then, in Incognito mode in Chrome, open Inspect and go to Network > JS. Refresh the page with your keyboard (without moving the mouse over the page) and review all javascript files that have loaded. These files have been excluded.

To determine if that particular JS file is required at the initial load, right-click that file and click Block request URL as per the GIF below:

Refresh the page in Incognito mode and see if anything on the website breaks. If it doesn’t, then it is safe to say that this particular JS file can be delayed upon initial load.

Repeat the process.

If a file breaks the look and feel of the website, unblock the file and move to the next one.

Once you’re done, you should have a list of blocked JS files in red like this:

Right-click on each file and copy the URL:

Then, in the backend of WordPress, go to the JavaScript optimization section in Staq Hosting paste the URL and remove the unnecessary information as per the GIF below:

Note, once you’re done, go ahead and unblock the blocked file from your browser by right-clicking it.

Finally, you should delay third party code if not required on initial load.

Using the above techniques and solutions should greatly improve JavaScript execution time.