Reducing main thread work is a crucial technique for optimising page speed. It focuses on improving site performance and enhancing the user experience. The main thread of a web browser handles tasks such as page rendering and executing JavaScript. By reducing main thread work, you can speed up your site, resulting in faster load times and smoother browsing for your visitors. This involves identifying resource-intensive processes, optimising JavaScript and CSS, and utilising modern web technologies.
Every time a web page loads, the user’s browser has to download files and images to display the page’s content. This work is usually done on the “main thread” – the part of the browser that handles all of the page’s layout, styling, and interactivity.
The more work there is on the main thread, the longer it takes for the page to load and become interactive. This obviously leads to slow page load times, a poor user experience, and lower search engine rankings.
One way to reduce main thread work is to optimise the page’s code and assets to make them smaller and more efficient. You can reduce main thread work by minifying and compressing JavaScript and CSS files, reducing the size and number of images on the page, and using next-generation image formats like WebP.
Another way to reduce main thread work is to use modern web development techniques like lazy loading and asynchronous loading. Lazy loading means that images and other content are only loaded when they’re needed, rather than all at once when the page loads. Asynchronous loading means that resources are loaded in the background while the page is being displayed, rather than blocking the main thread.
You can also use browser caching to store frequently used resources like CSS and JavaScript files on the user’s device. Once the user has downloaded those files once, your code refers to their local copy, rather than downloading those files from the server each time they visit the page.
By reducing main thread work using these techniques, you can help your website load faster, provide a better user experience, and potentially improve your search engine rankings.
How to Reduce Main Thread Work on WordPress
Here are some ways to reduce main thread work on WordPress:
- Use a lightweight WordPress theme: Choose a theme that is well-coded and optimised for performance. Avoid themes with lots of unnecessary features and plugins that can slow down your website.
- Use caching plugins: Caching plugins like WP Fastest Cache, W3 Total Cache, or WP Super Cache can help reduce main thread work by caching your site’s static assets and reducing the number of requests made to the server. (See: WordPress Plugins for Web Page Caching)
- Optimise images: Use image optimisation plugins like Smush or EWWW Image Optimizer to compress and resize images before uploading them to your website. This can help reduce the size of your page and speed up loading times (See: 6 WordPress Plugins For Optimising Images).
- Minify and combine CSS and JavaScript: Use plugins like Autoptimize to minify and combine your site’s CSS and JavaScript files, reducing the number of requests made to the server and improving load times. (See: Page Speed: Minification of Code)
- Use lazy loading: Plugins like Lazy Load or WP YouTube Lyte can help reduce main thread work by delaying the loading of images and videos until they are needed. (See: Lazy Loading and How it Works)
- Use a content delivery network (CDN): A CDN like Cloudflare can help reduce main thread work by caching your site’s static assets and delivering them from servers closer to the user. (See: CDNs to Use With WordPress)
By implementing these techniques on your WordPress website, you can reduce main thread work and improve page speed, resulting in a better user experience and potentially higher search engine rankings.
Related: 35 WordPress Tools and Resources to Improve Page Speed
How to Reduce Main Thread Work on Magento 2
Here are some ways to reduce main thread work on Magento 2:
- Use a lightweight Magento 2 theme: Choose a theme that is well-coded and optimised for performance. Avoid themes with lots of unnecessary features and plugins that can slow down your website.
- Use caching: Enable caching in your Magento 2 installation. Caching can help reduce main thread work by caching your site’s static assets and reducing the number of requests made to the server. (See: Magento 2 Extensions for Web Page Caching)
- Optimise images: Optimise your images before uploading them to your Magento 2 website. Use image optimisation tools like TinyPNG or JPEGmini to reduce the size of your images. (See: Magento 2 Extensions for Optimising Images)
- Minify and combine CSS and JavaScript: Use tools like Grunt or Gulp to minify and combine your site’s CSS and JavaScript files, reducing the number of requests made to the server and improving load times. (See: Page Speed: Minification of Code)
- Use lazy loading: Use third-party extensions like Lazy Load or Amasty Image Lazy Load to reduce main thread work by delaying the loading of images until they are needed. (See: Lazy Loading and How it Works)
- Use a content delivery network (CDN): A CDN like Cloudflare or Akamai can help reduce main thread work by caching your site’s static assets and delivering them from servers closer to the user. (See: CDNs to Use With Magento 2)
By implementing these techniques on your Magento 2 website, you can reduce main thread work and improve page speed, resulting in a better user experience and potentially higher search engine rankings.
Related:
How to Reduce Main Thread Work on Shopify
Shopify automatically optimises images, minifies CSS and JavaScript, and enables caching by default. Additionally, Shopify themes are optimised for performance, and lazy loading is supported out of the box.
Related: 17 Shopify Tools and Resources to Improve Page Speed
However, there are still some steps you can take to further reduce main thread work, such as
- Optimising images before uploading them and
- Using a CDN to cache static assets (See: Using a CDN (Content Delivery Network) to Improve Page Speed)
This post is part of: Page Speed Optimisation: A Complete Guide — created by our Page Speed Optimisation Specialists.
In this series:
