Minimizing main thread work is the key to improving Core Web Vitals and, consequently, making the website optimized for users and search engines.
In this article, we will discuss main thread work optimization for WordPress in particular and practical solutions to achieve the desired metrics.
Table of Contents
What Is the Main Thread?
In most cases, there’s only one thread per browser tab that is responsible for delivering content and executing events initiated by the user (such as clicks, form submissions, etc.). And it is called a main thread.
It can be compared with a road, where cars are queuing and rushing to deliver different parts of the beautiful webpage that you are about to see. The more this page is embellished and elaborated, the bigger the traffic.
Years ago, websites were just static pages with simple styling and a few images. Now, there’s definitely much more going on there, and consequently, the main thread has all the chances to be clogged and blocked.
In Chrome DevTools > Performance, you can see the “Main” section in the graph, which illustrates the events in the main thread.
Humans break work into tasks, and so does a browser, and it also prioritizes certain tasks while others can be executed in the background. However, not all the tasks are working efficiently, and there comes main thread blocking that leads to laggy and unresponsive web pages.
Main thread blocking
There can be a few reasons for the main thread blocking. Here are some of them:
- Rendering issues. Let’s say there are complex animations on the page, and the main thread will wait until they are painted.
- Caused by a network. For example, some images must be fetched, but the network is bad, so the main thread will wait for it.
- Third-party scripts. If they need some time to load, it will slow down the process. For instance, analytics scripts can cause it.
- Database requests. If there are a lot of requests to the database, or they take a long time, it will block the main thread.
- Long tasks last 50 ms and more.
- In Chrome DevTools > Performance tab, you can find such tasks marked red and see all the details about them.
- While long tasks are being executed, the main thread can’t handle user interactions or other tasks, which leads to a poor user experience.
This concept is similar to the previous one but is more about consuming resources than time. However, the outcome is the same: delays in rendering and user interactions.
- They can be caused by nested loops, DOM manipulations, string manipulations in loops, handling large data sets inefficiently, or performing complex mathematical calculations.
Understanding what causes main thread blocking is the key to fixing these issues. So, now it’s time to talk about what can cause it, specifically in WordPress.
What causes main thread blocking in WordPress?
When a user visits a WordPress website, a request is sent to the server. WordPress then processes this request by running PHP code to generate the HTML content that is sent back to the user’s browser.
The main thread in WordPress is responsible for handling the core functionality of the CMS, including routing requests, executing plugins and themes, querying the database, and generating the final web pages.
There are a number of things that can cause main thread blocking in WordPress, including these:
- Themes. Themes can also cause main thread blocking, especially if they are complex or poorly coded.
- Images. If the images are not properly optimized, they can take a long time to load, which can block the main thread.
- Database queries. If your WordPress website makes a lot of database queries, this can also block the main thread.
- Third-party scripts. Third-party scripts, such as those used for analytics or advertising, can cause main thread blocking as well.
How to Minimize Main Thread on WordPress: 12 Tips
To a large extent, optimizing main thread work is not about some tricks or very specific techniques but about common sense and logical actions aimed to remove all the junk causing delays, using the right settings, respecting best practices in building layouts (e.g., not creating nested loops on the templates and individual pages, not using heavy animations, not loading website with unnecessary plugins, etc.).
Choose a fast hosting
Choosing a good hosting provider is the key to a fast website. There are a lot of sponsored posts and articles that recommend certain providers, so it’s important to check these claims and read reviews of real people. Hostings often have hidden issues that either make you constantly upgrade the plan or just have problems with the setups that slow down the website loading speed. For example, the caching you can’t fully control can become a big issue. The type of server plays a huge role as well, and Litespeed servers are considered to be the fastest.
And, of course, it’s crucial to check the TTFB, which should be less than 200 ms.
Monitor and reduce the CPU usage
When the CPU usage is high, it means that there are a lot of tasks, and the server works on them but not on the main thread. This factor is closely related to the previous topic. However, it’s not only about the hosting and the CPU cores and inodes available in your hosting plan but also about the plugins, themes, and other settings, which I will talk about in the following sections. Anyway, monitoring the CPU usage is crucial for understanding what’s going on with your website and whether you need to work on internal optimization or change the plan or the hosting provider.
Switch off features that bloat the site
Such things as emojis, Heartbeat, Autosaves, Post Revisions, XML-RPC, and others should be either removed or limited. The easiest way to do it is by using performance optimization plugins. The list of them you can find at the end of this article.
Don’t use one shared hosting for emails and websites
Hosting plans, especially for cheap shared hostings, offer a limited number of inodes (that are responsible for files). So, by storing emails on the same hosting, you take these inodes, and the website might not have enough of them.
Use optimized themes and plugins
It’s important that plugins have a very well-thought-out and optimized architecture, logic, and clean code, which means that they must be well-structured, easy to read, efficient, and follow best practices. Especially when we talk about powerful plugins with huge functionality for dynamic content – and JetEngine is a great example here.
Read reviews, look under the hood in DevTools, and read posts in the developer’s community to find out whether certain plugins or themes are the best choice for you.
Debug the performance issues
Find out exactly what causes your website’s performance issues by checking the metrics and suggestions. There are two main ways to do it, and I will go through each one quite briefly.
Using online services
The first option is to use online tools, such as PageSpeed Insights or GTmetrix, to see what’s going on under the hood of your website. The great thing about such services is that they advise what to do with the particular issues and the files causing them.
Such services can also visualize the processes, which is really insightful, for example, PageSpeed Insights’ Treemap or GTmetrix waterfall:
Chrome browser has great DevTools that can give so much information about any website. Using the Performance Insights, Network, Performance, Memory, and Lighthouse tabs, you can collect a lot of details and measure performance for different devices and network speeds.
Don’t forget about the instruments in the Drawer; you can reach them by clicking on the three dots on the left or the gear icon on the right side of the DevTools panel. For example, the Coverage tab is great for checking CPU usage and the expensive processes, and the Usage tab shows how much of the code is being used:
Now, when you know where the issues are, you can fix them one by one and then repeat the tests, checking whether they were helpful.
Keep everything up-to-date and clear junk
But before taking more complex measures, don’t forget to update the PHP version because old versions are a few times slower than the new ones.
It’s also important to keep your plugins and theme up-to-date, optimize the database, delete unnecessary revisions, use server-side caching, and, overall, consider using a hosting provider that makes website performance its priority.
Switch off plugins’ functionality you don’t use
Plugins can have a negative impact on performance not only because they are badly coded but also because all their add-ons, widgets, and modules are on – even those you never use. Each of these modules loads its code and clogs the main thread. Pay attention to Elementor add-ons that have a lot of widgets – most likely, you never use all of them, so switch off the unused ones. Also, don’t forget to use the Load Level tool for Crocoblock.
💡 Elementor has significantly improved its performance settings in 2023, and you can disable unused widgets there as well. For more information about Elementor optimization, read this article.
Delay, defer, async, or disabling unused scripts
It’s a powerful tool to fix render-blocking issues. It delays the scripts’ load and execution until there’s a user interaction (click, mouse move, scroll, touch, etc.) or a specific timeout. It’s a great thing for third-party scripts, especially heavy ones like Goole Analytics, conversion pixels (e.g., Facebook), and third-party chatbots. It’s also very useful for other locally hosted scripts, but you should test and make exceptions for the critical ones; otherwise, the pages will not be properly painted.
Unfortunately, many themes and plugins load all the scripts they have, even if they are not used on a particular site or page. To fix this problem, certain scripts or plugins should be disabled where they are not used. The Perfmatters plugin is great for dealing with this task.
Scripts that don’t need the DOM to be loaded in order to interact with it can be loaded asynchronously. Simply put, if the main thread takes the main road, they will use side roads, where they don’t experience any traffic.
The downside is that they can’t interact with DOM elements. Because it’s being executed right after loading, it can lead to unexpected results and stop DOM from loading properly. That’s why it makes sense to use async attribute only for scripts that, for example, count page loads (but not clicks and scrolls, because they’re DOM events), and so on. For everything else, defer can be a better alternative because it waits for the DOM load and respects the script sequence.
But keep in mind that most of the caching plugins can cause errors in the way it works, so use exceptions.
With all being said, the question here is how to do it because manual coding is not only extremely time-consuming but also, in many cases, is not a good practice (when it comes to editing plugins’ source code, etc.). That’s why using optimization plugins is exactly what you need.
Defer non-critical CSS
Critical CSS is the portion of CSS that is required for rendering the above-the-fold (the first screen of a website, visible without scrolling) content. When done, it automatically improves the Core Web Vitals, and the user can see the website as fast as possible, while the non-critical CSS can be deferred and loaded a bit later.
Fonts delivery optimization
Maybe it’s not so obvious, but fonts that load from third-party resources can greatly slow down a website. That’s why storing them on a local server and not loading more fonts and their styles and variations that are actually used is the right practice.
The same approach should be applied to the icon fonts, such as Font Awesome.
It’s also a good idea to preload fonts.
Recommended Plugins for Website Optimization (Free and Paid)
This is the list of personal favorites that are also recommended by optimization professionals:
- Unbloater (free) – is a great plugin to disable a lot of small but bloating features WordPress core has.
- Disable Bloat (freemium) – it helps to disable unused features, in particular those created by WooCommerce.
- Perfmatters (premium) – a premium plugin for performance, removing bloat, and cleaning a database.
- FlyingPress (premium) – a plugin that really improves the loading speed. It hosts Google fonts, Analytics, and even YouTube thumbnails locally, removes bloat, and offers a few options for dealing with CSS.
- Swift Performance (premium) – a caching and optimization plugin with many out-of-the-box settings and AI support.
- LiteSpeed Cache (free) – a plugin great for LiteSpeed servers.
- WP Rocket (premium) – a well-documented caching and optimization plugin to improve Core Web Vitals.
- EWWW Image Optimizer (freemium) – optimizes images (for free) and converts them into WebP format. It also has a bunch of premium features, such as CDN, page caching, and many more.
📚 Read also: Top 10 WordPress Speed Optimization Plugins
The optimized main thread of the website is the key to getting good Core Web Vitals metrics and, thus, making your website look and feel great to the users and search engines.
There are a few main principles that help to optimize your WordPress website:
- using well-coded themes and plugins;
- having a good hosting provider that offers not only the highest quality of services but also some out-of-the-box optimization tools;
- understanding the basics and the logic behind websites that meet the Core Web Vitals best practices;
- using a good optimization and caching plugin that helps automate all that is required for minimizing main thread work.