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.

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

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 to disable them using URL patterns. Check your site for errors after disabling each one.

Examples:

Disable slider plugin on pages that don’t use sliders.
Disable rich snippets plugin on pages that don’t use rich snippets.
Disable contact form plugin on pages that don’t have a contact form.
Disable affiliate link management plugin on pages that don’t use aff links.
Disable social sharing plugin on all pages (since it’s usually for blog posts).
Disable unused features in your page builder (see this post for Elementor).

Remove Even More Unused CSS
There are also tools to further remove unused CSS. Try downloading your combined, purified, and minified CSS using a tool like PurifyCSS and set a fallback critical CSS (e.g. in WP Rocket). RapidLoad by Autoptimize is a fully automated (paid) tool to remove unused CSS. And for WooCommerce, disable WooCommerce scripts/styles on non-eCommerce pages. By removing unused CSS and JavaScript, you’ll also be minimizing your WordPress site’s main-thread work.

3. Optimize Third-Party Code

JavaScript from third-party code can slow down your main-thread.

Your “reduce impact of third-party code” report shows main-thread blocking times for third-party code (these are scripts loaded on your WordPress site that are pulled from other sites).

Review which third-party code has the largest impact on your main-thread blocking time and optimize it. Below are a few ways to optimize specific types of third-party code in WordPress.

Google Fonts – host fonts locally by downloading fonts directly from the Google Fonts website, convert them to WOFF2 using a tool like Transfonter, and add them to your CSS. You can also try OMGF. Additionally, preload fonts and use font-display:swap to improve cumulative layout shift. Be minimal with the number of font families, weights, and icons.
Google Tag Manager – clean up your tags and avoid hardcoding tags in the header.
Advertisements – reserve space for ads by placing the ad code inside a div that specifies the ad’s dimensions (this can also improve CLS scores). Avoid placing ads in the viewport.
Google Maps – only embed maps on contact and localized pages. Try taking a screenshot of the map and linking the image to driving directions instead of adding the embed code.
Google Analytics – host locally using CAOS Analytics, Perfmatters, or WP Rocket. Use a smaller Google Analytics tracking code if you only need basic features in Google Analytics. Disable remarketing and advertising to prevent a 2nd request to DoubleClick.
YouTube and Vimeo – lazy load videos and replace the iframe with a preview image. Embed them so they are mobile responsive and use a width/height in the embed code.
Social Media Networks – use a lightweight social sharing plugin on your blog like Grow Social and limit embedded widgets/feeds while reducing the number of posts in the feed.
Gravatars – host locally with WP User Avatar, break comments, use a “load more” button.
Comments – use Disqus conditional load if using Disqus. For wpDiscuz, tweak settings to initiate AJAX loading after page, disable WordPress native AJAX functions, and disable load font awesome CSS lib. Try the native WordPress comments instead of using a plugin.

Prefetch Third-Party Code – this helps browsers anticipate requests from third-party sites. Copy the third-party domains from your “reduce third-party code” report in PageSpeed Insights and prefetch them. Luke also has a nice list of common domains to prefetch found on Github.

4. Delay JavaScript

Delaying JavaScript is another way to optimize third-party code.

This is usually done with Flying Scripts or delay JavaScript execution in WP Rocket.

It delays loading JavaScript until user interaction. WP Rocket already has a list of scripts they delay automatically (you can copy this list if you’re using another plugin for this), but you may be able to delay even more. I added wpDiscuz and Gravatars so my entire comments section is delayed. You could also delay //cdnjs.cloudflare.com when using Cloudflare. You’ll want to view JavaScript files on your site then consider delaying non-critical JavaScript and third-party code.

5. Defer Non-Critical CSS And JavaScript

Deferring CSS and JavaScript can eliminate render-blocking resources.

WP Rocket and other cache plugins usually have a ‘load JavaScript deferred’ option. However, Autoptimize and Async JavaScript typically do a better job at fixing render-blocking resources.

Autoptimize – install the plugin and optimize/aggregate CSS + JS files.
Async JavaScript – install the plugin and click the “apply defer” button.

6. Minify And Combine CSS And JavaScript

Minifying CSS and JavaScript will strip unnecessary characters from those files (reducing the files sizes and main-thread work).

Combining them into 1 single file is recommended for smaller sites, but larger sites may not want to combine. WP Johnny has a nice article on whether or not you should combine CSS + JS.

7. Avoid Heavy Themes And Page Builders

If you’re trying to minimize main-thread work in WordPress, stay clear of page builders.

Elementor and Divi add lots of CSS and JavaScript to your website, resulting in more (and larger) CSS and JavaScript files. Not only does this add quite a bit to your main-thread work, but it can potentially flag multiple items in PageSpeed Insights and affect scores in numerous areas.

Look at some page builder speed tests and trends in Facebook Groups. There’s a large shift in people moving away from Elementor and Divi and replacing it with lightweight alternatives such as Gutenberg, Oxygen Builder, and GeneratePress. I moved from Elementor to Gutenberg.

Page builder migrations and “fastest theme” polls (click image to enlarge):

8. Hard Code Menus, Header, Footer, Sidebar

If you’re using a page builder, consider hard coding your menu, header, footer, and blog sidebar.

It’s an easy way to reduce the amount of CSS and JavaScript since hard code is much more lightweight than most page builders. You can still use page builders for designing pages, but it will make everything else much faster. I hired WP Johnny to remove Elementor and replace it with Gutenberg. This is what he started with and I saw a large improvement in overall scores.

Seriously, this makes a big difference.

9. Identify Plugins With Heavy JavaScript

Query Monitor is great for finding your slowest plugins in the “queries by component” tab and shows you JavaScript and CSS loaded on the page.

Typically, your slowest plugins also cause a longer main-thread work. You can also review this list of 70+ common slow plugins and use WP Hive to find plugins that cause high memory usage or affect PageSpeed Insights when searching the WordPress repository. It adds a small section to the right of the screen so you can see whether a plugin is reported as slow before installing it.

10. Take Advantage Of Lazy Load

Lazy load was built-in to WordPress 5.5 so you should have this by default. Some cache plugins also have lazy loading capabilities. Try lazy loading AdSense and embedded third-party content.

11. Reduce Page Size

Large page sizes are highly correlated with enormous network payloads.

Other than the tips mentioned in this tutorial, you can do the following:

Reduce images.
Reduce videos.
Reduce sliders.
Compress images.
Properly size images.
Reduce featured posts.
Reduce third-party code.
Reduce social media feeds.
Use WebP format for sitewide images.
Show smaller excerpts on your blog page.
Break blog comments and add a “load more button”.
Remove unnecessary fonts especially if they cause red errors in GTmetrix Waterfall.

12. Reduce Memory Usage

Reducing CPU lets your server spend more effort on the main-thread work and less work on unnecessary tasks.

Disable WordPress Heartbeat.
Increase the autosave interval.
Limit post revisions to only 5-10.
Use a CDN to offload resources.
Block bad bots from hitting your site.
Schedule ongoing database cleanups.
Disable usage tracking in plugin settings.
Replace wp-cron jobs with real cron jobs.
Avoid shared hosting with low CPU limits.
Disable unused features/modules in plugins.
Protect your admin section and move your login page.

13. Reconsider Animations

Google says:

“If any animation triggers paint, layout, or both, the “main thread” will be required to do work. This is true for both CSS- and JavaScript-based animations… for more information about which work is triggered by animating a given property, see CSS Triggers.”

In other words, most animations add to the main-thread work. At the least, you should consider disabling animations on mobile devices.

14. Consider Using Web Workers

Web workers let you execute your code off the main thread.

Cloudflare offers web workers but I have not personally used them before. Google does list this as a recommendation though.

15. Take Advantage Of Different Caching Types

Google also mentions caching as a way to speed up JavaScript and other files.

You should ideally be using server-level caching which is available on Cloudways, SiteGround, Kinsta, and many other hosts (including LiteSpeed servers with LiteSpeed Cache). Server-level caching is faster than the file-based caching done by most cache plugins. Redis can help as well.

Using a longer cache lifespan is also recommended and will fix “serve static assets with an efficient cache policy” in PageSpeed Insights. This is actually very easy to fix. You will find the cache expiration (in your .htaccess file, hosting account, or CDN) and adjust the cache expiration so it’s longer. For many files, Google wants a cache expiration of 180 days (6 months).

Retest Your Site For Minimize Main-Thread Work Errors

Run your site through Lighthouse, PageSpeed Insights, or GTmetrix.

Hopefully your main-thread work will be much shorter. If it’s not, drop me a comment with a link to your GTmetrix or PSI report (not a direct link to your site please) and I can take a look.

Frequently Asked Questions

How do I minimize main-thread work in WordPress?

Delaying, deferring, and optimizing JavaScript can minimize your WordPress site’s main-thread work. Optimizing third-party code and staying clear of CSS and JavaScript-heavy plugins and page builders is also recommended.

How do I minimize main-thread work using WP Rocket?

Loading JavaScript deferred and delaying JavaScript can minimize main-thread work when using WP Rocket. It can also help to minify CSS, JavaScript, and lazy load images + iframes.

What is main-thread blocking time?

Main-thread blocking time occurs when a long task runs on the main thread for over 50ms.

How do I minimize main-thread work on mobile?

Simplify your mobile site, be diligent about responsive design, and avoid heavy CSS and JavaScript (including plugins and page builders) on mobile to minimize main-thread work.

Hope this helped!

Cheers,
Tom

About Tom Dupuis

Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Keep reading the article at Tom Dupuis. The article was originally written by Tom Dupuis on 2021-03-28 15:35:45.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.