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.
- Find Long Main-Thread Tasks
- Optimize Third-Party Code
- Avoid Heavy Themes And Page Builders
- Hard Code Menus, Header, Footer, Sidebar
- Take Advantage Of Lazy Load
- Reduce Page Size
- Reduce Memory Usage
- Reconsider Animations
- Consider Using Web Workers
- Take Advantage Of Different Caching Types
1. Find Long Main-Thread Tasks
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).
Third-party code – see the main-thread blocking time and transfer size of third-party sites.
- 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
3. Optimize Third-Party Code
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.
- Autoptimize – install the plugin and optimize/aggregate CSS + JS files.
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.
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.
Seriously, this makes a big difference.
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
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.
15. Take Advantage Of Different Caching Types
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?
How do I minimize main-thread work using WP Rocket?
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?
Hope this helped!