How to Minimize Main-Thread Work in WordPress for a Faster Website

Did you know that JavaScript execution is one of the biggest culprits when it comes to a slow WordPress site?

In fact, one study found that over 60% of the main-thread work on most websites comes from JavaScript and CSS files.

And if you’re like me, you’ve probably been frustrated by slow page load times that just won’t go away no matter what you do.

The truth is, to minimize main-thread work wordpress is where most of the magic happens.

The browser uses it to parse, compile, and execute the resources needed to render your page. But too much going on in the main-thread can delay page interactivity, tank your Core Web Vitals scores, and make your visitors bounce before they even see your content.

So, yeah, it’s kinda important to minimize main-thread work.

The best way to do wordpress optimization is to use a plugin. A typical site contains HTML, CSS, JS, image files, font files, ad scripts and many others. Bloating of this code will result in a slow speed of the site. 

In this guide, I’ll take you through exactly what main-thread work is, why it’s essential to reduce it in WordPress, and some practical, real-world tips to help you avoid the most common pitfalls. Let’s dive into the nitty-gritty of making your WordPress site faster, one thread at a time!

What is Main-Thread Work and Why Does It Matter?

Okay, so first things first—what exactly is main-thread work?

Think of it like this: the browser’s primary thread is the one that processes all the tasks needed to make your web page functional. It handles things like JavaScript execution, CSS rendering, and DOM manipulation (basically, everything that makes your page look pretty and interactive). Now, when there’s too much going on in that thread—like a traffic jam—it takes longer for the page to become interactive.

I’ve been there. I spent hours speeding up my site only to realize the real problem was too much JavaScript and CSS being processed during the initial page load. It really sucked. But once I figured out how to reduce the load on the main-thread, my page speed improved drastically, and my Core Web Vitals shot up.

Here’s why it matters: Google’s Core Web Vitals are vital (pun intended) to your site’s SEO. First Input Delay (FID), which measures the time it takes for a user to interact with your site, is directly tied to main-thread performance. If your main-thread is too busy, your FID score plummets, and Google won’t be happy. Trust me, you don’t want that.

Common Causes of Main-Thread Work in WordPress

The biggest mistake I made when trying to speed up my site? Ignoring the elephant in the room: bloated JavaScript and CSS files.

Most of us WordPress users love plugins (who doesn’t?). But here’s the thing—each plugin you install brings along its own baggage, usually in the form of JavaScript and CSS. And these files can be huge! I remember one time I installed a social sharing plugin, thinking, “Oh, this won’t hurt.” Well, turns out it added nearly 300KB of render-blocking JavaScript to every page. Yikes.

Here’s what typically causes main-thread blocking in WordPress:

• Heavy JavaScript Files: Themes and plugins often include unnecessary JavaScript that blocks rendering.
• Unoptimized CSS: Same story with CSS. If your site loads a 500KB CSS file upfront, it’s going to choke the thread.
• Third-Party Scripts: Ads, analytics, and social widgets often add blocking resources that increase main-thread work.
• Inefficient DOM Manipulation: Some themes or plugins manipulate the DOM in ways that slow down page rendering.

The best way to avoid these problems? Start by evaluating your plugins and themes. If you don’t need it, toss it. Less is more when it comes to minimizing the main-thread work.

How to Minimize Main-Thread Work WordPress Site

So how do you even know how bad your main-thread problem is?

I’ll let you in on a little secret: Chrome DevTools is your best friend here. It’s super easy to use and gives you a detailed breakdown of your main-thread tasks. Just open your site in Chrome, hit F12, and go to the Performance tab. Hit record, load your page, and see where the time is being spent.

The first time I did this, I was shocked at how much time was spent on JavaScript parsing and execution. It was a real eye-opener. The PageSpeed Insights tool also provides a section on main-thread work, which is great for getting a general idea. And if you want to go deep, run a Lighthouse audit—it’ll show you exactly which scripts are blocking your page from loading.

• Tip: Pay attention to the “Avoid long main-thread tasks” warning in PageSpeed Insights. If you see that, it’s time to start trimming the fat.

Best Practices to Minimize Main-Thread Work in WordPress

Okay, now let’s get to the good stuff—the actual ways to minimize main-thread work.

1. Reduce JavaScript Execution Time: I’m not gonna lie, this one is huge. The more JavaScript your site has to parse, the longer it takes for the main-thread to finish its work. Use tools like WP Rocket to defer JavaScript loading and remove unused JS.
2. Optimize CSS Delivery: CSS can be just as much of a problem as JavaScript. One of the best things you can do is to inline critical CSS and load non-critical CSS asynchronously. I once shaved off 1.5 seconds of load time just by doing this.
3. Lazy Load Images and Videos: This one is a game-changer. By lazy loading images and videos, you make sure the browser doesn’t waste time rendering assets that aren’t immediately visible. This reduces the workload on the main-thread and speeds up page load times.
4. Cache Static Content: Using a caching plugin like WP Rocket can seriously reduce the load on your server and improve page load times. Back when I started using caching, my Time to First Byte (TTFB) dropped by over 50%. It’s a no-brainer.
5. Disable Unnecessary Plugins: Here’s a hard truth. If you don’t absolutely need a plugin, get rid of it. I once had a Google Maps plugin that was loading 350KB of JavaScript on every single page—just for a map. I swapped it out for a lighter solution, and boom—main-thread work decreased by 20%.

Advanced Techniques to Further Reduce Main-Thread Work

Now, if you’re feeling ambitious, here are some more advanced techniques that’ll help you reduce main-thread work even further.

1. Code Splitting: This is where you break up your JavaScript into smaller chunks so the browser doesn’t have to load everything at once. It’s really effective for big sites with lots of functionality.
2. Web Workers: I’ve toyed around with web workers a bit, and while it’s not for everyone, it’s an awesome way to offload heavy tasks from the main-thread. This is especially useful if you have complex JavaScript calculations happening in real-time.
3. Preload and Preconnect: You can use resource hints like preload to tell the browser to load critical assets first, and preconnect to speed up connections to third-party services (like Google Fonts or analytics scripts). This way, your main-thread isn’t waiting around for these resources while trying to render the page.
4. Async and Defer: Add the async and defer attributes to your JavaScript files. This prevents them from blocking the rendering of the page. I can’t tell you how many times this simple trick has shaved off precious milliseconds from my page load times.

Also Read – How to Show Star Ratings in Google Search Results [Working]

Google made it clear in 2020 that page user experience signals would be considered from June 2021. Core Web Vitals are the crucial signals to indicate this change. 

Autoptimize is a performance-enhancing plugin for WordPress sites. It has more than 1+ million active installations. It can work on the PHP version of 5.7.2 and was updated two months ago. 

Performance Test

In an earlier post, we have done a case study on the influence of minification on core web vitals. Caching and wordpress minify plugins are different. Unless both are involved, we don’t get the desired results. 

Also Read – Check Performance of Best WordPress Hosting Rocket.net

The same site is being used to check the performance metrics of the Autoptimize plugin. It does minify HTML, CSS and JS resources as any other optimization plugin. It had advanced features for more tech-savvy WordPress users. 

Test Site Details

You can go through the FVM wordpress minify case study to know the complete details of the site under test. 

Autoptimize – Features

It is mainly helpful for optimizing your site. The main pro of this plugin is that it can aggregate, minify and cache scripts and styles. It injects CSS in the page head in the free version.

If you are using the CriticalCSS, then you can also inline and defer the aggregated full CSS. It can move and defer scripts to the footer. 

Minification of HTML is possible. Optimize Google fonts and lazy-load images. It can improve the performance of the site even with HTTP/2. A page caching plugin in addition to Autoptimize is recommended. 

Also Read – [Review] #1 Best AMP Plugin in 2021 – Ideal Settings

Autoptimize Settings

The following 4 tabs were available as general settings –

1. JS, CSS & HTML
2. Images
3. Critical CSS
4. Extra

The following sub-options under each category were activated. It is different from the default settings. 

Javascript options 

           Optimize Javascript code – disabled. (unchecked)

Since we were using the RocketLoader option in Cloudflare, I thought it would be best to disable this feature. Also, when I tested the page speed results using this option, I didn’t get any good results. 

CSS Options

1. Optimize CSS Code – Enabled
2. Aggregate CSS Files – Enabled
3. Also aggregate inline CSS – Enabled
4. Inline and Defer CSS – It is fully automated using the CriticalCSS tab. 

Note: The WordPress version costs $10/month for the first domain. For each additional part, it costs an extra $7. It is a fully automated version. All the deferred CSS are generated automatically by this service. 

The regular version costs $3. It would help if you did it manually. 

HTML Options

1. Optimize HTML Code – Enabled. 
2. MISC Options
3. Save aggregated script/CSS as static files? Yes
4. Minify excluded CSS and JS files? Yes
5. Enable 404 fallbacks? Yes
6. Also, optimize for logged-in editors/ administrators? Yes

Images

I enabled no options here. 

CriticalCSS

I used the API key from the purchased plan. The rest of the things were done automatically. Only it takes some time. 

Extra

1. Extra Auto-Optimizations
2. Google Fonts – Leave as is
3. Remove emojis – enabled
4. Remove query strings from static resources – enabled.

We did not check the rest of the settings. 

Autoptimize Performance – GTMetrix Test

In this test, the time to first byte (TTFB) value was 350ms. Related to this metric, it is average performance. The fully loaded time was 30.3s. It is very high compared to the size of the page. 

The main reason for such a result is video ads. Since they execute scripts endlessly, thus the result. The total page size is 1.98MB, and the total page requests are 266. The top issues and recommendations from GTMetrix for this page are –

1. Reduce Javascript execution time. 
2. Avoid long main thread tasks.
3. Serve static assets with an efficient cache policy.
4. Use a content delivery network (CDN)
5. Avoid document.write()

Web Vitals Score

1. LCP (largest contentful paint) = 956ms – Good 
2. CLS (cumulative layout shift) = 0.15 – Ok, but consider improvement. 
3. TBT (Total blocking time) = 1.1s – Much longer than recommended

There were 36 requests from HTML of size 365.3KB. Most of the time, taking ones was related to google ads. 6 bids from CSS resources of 25.3KB. Most of them are Google font files. 

It indicates that Autoptimize is good at CSS minification and optimization. 

101 requests related to JS and of size 1.1MB. Most of the big-sized resources were from google and video ads. Since both of them were loading many scripts, that could be seen in the waterfall view.

Images were 244.2 KB in size and created 52 requests. Most of them were from google and video ads. 

The number of images in the post was 6. 

The Imagify plugin has reduced the size a lot. But other files from video and google ad network were plenty. 

Autoptimize uses Shortpixel’s global CDN. It is a premium service. Since we have disabled this option in the settings, not much image optimization came from Autoptimize. 

Autoptimize Performance Test – PageSpeed Insights

The latest Lighthouse tool, 8.0.0 on Chrome 90.0.4430.97, was used. The mobile score was 59, and the desktop score was 64. 

It is an official tool from Google. So the core web vitals are considered more reliable than other tools. 

Mobile Test Results

For mobile, 

LCP – 3.2s, FID – 23ms, CLS – 0.

The lab data shows that, 

LCP – 4.8s, TBT – 110ms, CLS – 0.

The largest contentful paint was in the red zone. The other two metrics of FID and CLS were in the green. 

Autoptimize does not play many roles in mobile optimization as we served AMP pages.

Cdn.ampproject.org and other scripts did all the optimization. Since we were also using the Sitekit plugin, it created duplicate hands, which spoiled a perfect score. 

Desktop Test Results

This test has more relevance to Autoptimize optimization performance. Since minification and CSS optimization show better results on desktop pages, the core web vitals in this test show the truth of the plugin. 

Origin Summary

FID = 3ms ; LCP = 3.7s ; CLS = 0.16. 

Lab Data

LCP – 1.4s, CLS – 0.164, TBT – 440ms. 

The opportunities for this page are –

1. Reduce initial server response time. 
2. Reduce unused Javascript. 

Diagnostics Information –

1. Ensure text remains visible during webfont load
2. Reduce the impact of third-party code
3. Does not use passive listeners to improve scrolling performance. 
4. Avoid document.write()
5. Serve static assets with an efficient cache policy. 
6. Minimize main-thread work.
7. Reduce Javascript execution time.  

Autoptimize is better at improving page loading time compared to the user experience. LCP, CLS are core web vitals related to how the elements of the page load. It has less to do related to optimization scores. 

So the next test of page performance will be more indicative of Autoptimize features. 

WebPageTest Results – Autoptimize Performance

In this test, the first-byte time was 0.313s. The web vitals stats were LCP – 1.718s, CLS – 0.134 and TBT > 0.889s. It is tested for a desktop page. 

LCP was green, CLS was orange and TBT in red. This tool indicates TBT as a core web vitals metric compared to FID in the PageSpeed Insights tool.

The fully loaded time was 5.653s, loaded 112 requests and page size was 1.585MB. 

The HTML, CSS, JS, image and font files were able to load within 1.7s.

The other additional loading time was because of google Adsense scripts. The total blocking time of 0.889s also added to the fully loaded time. 

Cache static was 52%, and CDN detected was 92%. The other web page speed metrics were 100%. GZip compression was 100%. Leverage browser caching failed in certain aspects. 

JS was consuming the majority of the resources. Nineteen requests were from the original domain, and the rest mainly from Adsense ads, font files.

In size, the video ad domain consumed the maximum extent. 

Following were font files and Adsense ads. The parent domain consumed only 156KB. 

Conclusion

At the end of the day, minimizing main-thread work in WordPress isn’t just about improving your PageSpeed Insights score—it’s about giving your users the best possible experience. When your site is fast and interactive, people stick around longer, and that’s what we all want, right?

So, whether you’re reducing JavaScript execution, optimizing CSS, or lazy loading images, every little bit helps. And trust me, it’s worth the effort.

Without the ads, the page loaded within 1.7s. It is a perfect load time. But the core web vitals were not wholly perfect. As observed in the previous case study, it is related to the position of the elements, height of the ads and user experience. 

Finally, we can say that Autoptimize does best at complete minification and small optimization.

But it is not a full-page caching plugin, unlike WPRocket and other plugins. Unless a caching plugin is used in addition to Autoptimize, we cannot see better performance scores. 

Got any tips of your own? Drop them in the comments below! I’d love to hear how you’re improving your Core Web Vitals and speeding up your WordPress site. Oh, and don’t forget to share this guide with anyone who’s struggling with a slow site. Let’s make the web faster together!

You can achieve better search results through a faster site and a good user experience.