15 Ways To Minimize Main-Thread Work In WordPress

15 Ways To Minimize Main-Thread Work In WordPress

Minimizing main-thread work is highly correlated with heavy CSS and JavaScript.

Chances are you also have errors for one or more of the following: remove unused CSS and JavaScript, reduce third-party code, reduce JavaScript execution time, and total blocking time.

In WordPress, you can minimize main-thread work by using an asset unloading plugin to remove unused CSS and JavaScript. You can also use defer attributes, host fonts locally, delay JavaScript, and avoid heavy CSS and JavaScript caused by plugins, themes, and page builders.

There are a few other optimizations that can minimize main-thread work in WordPress, but those are by far the most important. I recommend starting at the source by learning whether plugins, themes, page builders, or third-party code is adding to your main-thread blocking time.

 

1. Find Long Main-Thread Tasks

To find out the source of long main-thread tasks, there are a few reports you should be looking at in PageSpeed Insights. These can tell you which specific files are contributing to the main-thread, time spent delivering types of code (JavaScript, CSS, etc), as well as third-party sources.

Avoid long main-thread tasks report – shows you which specific files are the worst contributors to the main-thread and their source (files from your site or third-party code).

Minimize main-thread work report  – shows you how much time the browser spent downloading JavaScript and CSS (often the longest), parsing, rendering, and garbage collection.

Minimize Main-Thread Work WordPress

Third-party code – see the main-thread blocking time and transfer size of third-party sites.

Main-Thread Blocking Time

 

2. Remove Unused CSS And JavaScript

Asset CleanUp and Perfmatters are popular plugins for removing unused CSS and JavaScript.

They let you view individual CSS and JavaScript files loaded on each page/post and disable the ones not being used on specific content. I wrote a comparison on Asset CleanUp vs. Perfmatters (Perfmatters has  better UI/UX and more bloat removal settings while Asset CleanUp is free, has a test mode, and the pro version lets you disable custom CSS). I use Perfmatters on my site.

Once you select a plugin, edit a page/post on your site, then view the CSS and JavaScript files being loaded. Finally, disable CSS and JavaScript files that are being loaded but not being used. You can disable them on current URLs or everywhere except current URLs, pages, posts, or use regex

[…]

 



This article was written by Tom Dupuis and originally published on Tom Dupuis.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

You have to agree to the comment policy.

Scroll to Top