TOTAL BLOCKING TIME

Total blocking time is the sum of all of the individual blocking times of long tasks. It is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive.

To better understand total blocking time, we need to define long tasks. Long tasks are caused by JavaScript Code that uses the main thread of your server’s processor when loading. This code causes the UI to become frozen, even if it looks visually ready for the user to access. An example would be a button that has loaded, but cannot be clicked. When your UI is frozen, clicks, taps, drags, or any other user input is typically blocked because the event/click handlers have not yet been attached to the element (this is known as the blocking portion of a long task). If you need a simple explanation: The visual aspect of whatever element you’re loading shows, but the code that makes it work hasn’t loaded yet.

The “long” Part of long tasks is defined as any task that takes over 50 milliseconds to complete. The reason 50 milliseconds is the base mark is because it complies with the RAIL model – a set of performance guidelines to ensure a good user experience. The main takeaway of the rail model is that your website better load fast, or Google will penalize you.

GET A FASTER WEBSITE!
Strip the “fat” first …

START HERE

Optimization for a slow Total Blocking Time

Total blocking time is directly caused by JavaScript, so we should optimize JavaScript sitewide in every possible way. The major things you can do to address this are as follows:

Remove unused JavaScript

If you’re loading scripts that aren’t used, you’re pointlessly loading data and inflating your page speed load time. There’s no point to this, and removing the JavaScript will seriously impact the speed of your website. There are several tools that can help to do this. Our favorite tool is called asset cleanup, which allows you to enable and disable individual scripts on individual pages.
It shows you all the CSS and JavaScript files that are called on an individual page. For example, on your homepage, you could be loading multiple CSS and JavaScript files for plugins, themes, and more. If you know for a fact that you’re not using a JavaScript file on this page, you can easily remove it by simply flipping a switch called “unload”. unloading your script file will ensure that it doesn’t load on a page in which it’s not used. You can also do this for all the CSS on individual pages as well.

Efficiently loading third party JavaScript

This can also be another major cause of a poor score in the total blocking time metric on Google PageSpeed insights. With third party JavaScript, you only want to load essential scripts. If you can choose to remove the script from your website, or serve it locally that’s the best bet. Your website is probably loading third party JavaScript from multiple sources. If you use Google analytics, you’re loading third party JavaScript, if you use stripe or PayPal payment processing, you’re loading third party JavaScript, and the list goes on and on.

Removing these scripts is typically impractical or impossible to do, so efficiently loading third party JavaScript is the best remedy. Unless your script has to run before the page renders, you should always load it asynchronously or defer it. The way you do this is by adding async or defer tags on the script element. However, if you’re a casual WordPress user, this may be difficult as it could be hard coded into your themes or plugins. That means changing it on a code level doesn’t make any sense, as every update to a plugin or theme would overwrite it. This is where our favorite performance optimization comes to work – asset cleanup. For individual JavaScript files, we choose to load it asynchronously or defer it.

Optimizing Long Tasks

If a standard optimization of your website does nothing for your total blocking time, then there are probably a few individual scripts that are causing a poor score in this metric. To fix this, you first need to identify the scripts that are causing the issue, and then remove / optimize them individually.