{"id":295,"date":"2023-03-13T08:09:55","date_gmt":"2023-03-13T08:09:55","guid":{"rendered":"https:\/\/rabbitloader.com\/articles\/?p=295"},"modified":"2024-06-17T14:22:48","modified_gmt":"2024-06-17T14:22:48","slug":"minimize-main-thread-work","status":"publish","type":"post","link":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/","title":{"rendered":"Minimize Main Thread Work: 5 Effective Ways To Fix The Google PageSpeed Insight Warning"},"content":{"rendered":"\n

\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.<\/p>\n\n\n\n

But what does minimizing main thread work mean? And more importantly how to mitigate the \u201cminimize main thread work\u201d warning?<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Minimize<\/figure>\n\n\n\n
<\/div>\n\n\n\n

Web developers can implement various strategies to minimize main thread work, such as optimizing their critical rendering path with CSS stylesheets and JavaScript optimization.<\/p>\n\n\n\n

Alternatively, this could also be achieved by adding a link rel= preload tag to the critical resources in your HTML file and implementing the lazy load technique to above-the-fold content to minimize main thread work and boost the Core Web Vitals<\/a> performance.<\/p>\n\n\n\n

But these techniques might look very daunting to a non-coder. Hence, we will see how the no-code solutions RabbitLoader can help you solve the issue if you are not a developer and five other ways you can do it if you are ready to get your hands dirty. <\/p>\n\n\n\n

<\/span>What Is The Main Thread Work?<\/span><\/h2>\n\n\n\n

When you (the visitor) try to open a webpage on your browser, let’s say it’s the home page of\u00a0 RabbitLoader.com the browser has to convert the codes in the page to create an image of the webpage in front of you.<\/p>\n\n\n\n

<\/div>\n\n\n\n
\"Minimiza<\/figure>\n\n\n\n
<\/div>\n\n\n\n

To achieve the goal of showing you a beautiful webpage, the browser has to complete a list of tasks, such as parsing the CSS and Javascript files.<\/p>\n\n\n\n

Now, some of these tasks are crucial, and some are not crucial. This logical list of crucial tasks can be regarded as the main thread. <\/p>\n\n\n\n

<\/span>How to Minimize the Main Thread Work?<\/span><\/h2>\n\n\n\n

Google PSI instructions are loud and clear. To make the website load faster, you need to minimize the main thread’s work. In other words, you need to check the list of tasks your browser needs to do to show your website, find the non-crucial tasks, and redirect them from the main thread to the other thread known as the web worker.<\/p>\n\n\n\n

This would make your list of crucial tasks on the main thread shorter.<\/p>\n\n\n\n

<\/span>Why Do We Need To Minimize Main Thread Work?<\/span><\/h2>\n\n\n\n

If the main thread is filled with non-critical tasks, that affects the parsing or execution of crucial tasks, which would negatively affect your website\u2019s performance, exposing your users to a slow-loading website and less-than-ideal user experience. <\/p>\n\n\n\n

Minimizing the main thread work can significantly improve your page loading time, which in turn would boost your Google PageSpeed Insights<\/a><\/strong> score and Core Web Vitals performance.<\/p>\n\n\n\n

<\/div>\n\n\n\n\n\n\n \n \n Document<\/title>\n <style>\n body {\n font-family: Arial, Helvetica, sans-serif;\n }\n .main-card-for-some {\n background-color: #e9f3ff;\n border-radius: 0.375rem;\n height: 350px;\n width: 600px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .heading-card {\n font-size: 1.60rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n line-height: 2rem;\n }\n .up-mt-1 {\n margin-top: 3.564587rem;\n margin-bottom: 2.75rem;\n }\n .btn-blue {\n font-size: 1rem;\n line-height: 1rem;\n font-weight: bold;\n background-color: rgb(37 99 235);\n color: white !important;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n margin-top: 1rem;\n border-radius: 0.25rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n border: 0;\n text-decoration:none !important;\n }\n \n .btn-blue:hover{\n \tbackground-color: rgb(30 64 175);\n }\n\n .card-caption-body {\n display: flex;\n font-size: 0.75rem;\n line-height: 1rem;\n justify-content: space-evenly;\n margin-top: 1.5rem;\n font-weight: 300;\n column-gap:1.0rem;\n }\n\n .card-caption-text {\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n }\n <\/style>\n<\/head>\n<body>\n<main style=\"display:flex;justify-content:center;\">\n <div class=\"main-card-for-some\">\n <div>\n <h1 class=\"heading-card\">Get The Best PageSpeed Score <br>For Your WordPress Website<\/h1>\n <div class=\"up-mt-1\">\n <a href=\"https:\/\/wordpress.org\/plugin\/rabbit-loader\/\" class=\"btn-blue\">Install Now<\/a>\n <\/div>\n <div class=\"card-caption-body\">\n <div class=\"card-caption-text\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" width=\"10\" height=\"10\" viewBox=\"0,0,256,256\">\n <g fill=\"#007CFE\" fill-rule=\"nonzero\" stroke=\"none\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"><g transform=\"scale(8.53333,8.53333)\"><path d=\"M26.98047,5.99023c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273l-15.29297,15.29297l-6.29297,-6.29297c-0.25082,-0.26124 -0.62327,-0.36647 -0.97371,-0.27511c-0.35044,0.09136 -0.62411,0.36503 -0.71547,0.71547c-0.09136,0.35044 0.01388,0.72289 0.27511,0.97371l7,7c0.39053,0.39037 1.02353,0.39037 1.41406,0l16,-16c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988z\"><\/path><\/g><\/g>\n <\/svg>\n All in One Optimization Plugin\n <\/div>\n <div class=\"card-caption-text\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" width=\"10\" height=\"10\" viewBox=\"0,0,256,256\">\n <g fill=\"#007CFE\" fill-rule=\"nonzero\" stroke=\"none\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"><g transform=\"scale(8.53333,8.53333)\"><path d=\"M26.98047,5.99023c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273l-15.29297,15.29297l-6.29297,-6.29297c-0.25082,-0.26124 -0.62327,-0.36647 -0.97371,-0.27511c-0.35044,0.09136 -0.62411,0.36503 -0.71547,0.71547c-0.09136,0.35044 0.01388,0.72289 0.27511,0.97371l7,7c0.39053,0.39037 1.02353,0.39037 1.41406,0l16,-16c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988z\"><\/path><\/g><\/g>\n <\/svg>\n No Coding Knowledge Required\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/main>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>But how do you do that? Do you need to hire a developer for that? Or can you do it yourself?<\/p>\n\n\n\n<p>The answer is both, but here we would see how you can minimize the main thread work by using the <a href=\"https:\/\/wordpress.org\/plugins\/rabbitloader\">RabbitLoader Plugin<\/a> without any coding or expert skills.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"5_effective_ways_rabbitloader_minimizes_the_main_thread_work\"><\/span>5 Effective Ways RabbitLoader Minimizes the Main Thread Work.<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let\u2019s explore the most effective ways to RabbitLoader minimize main thread work to help you achieve a higher pagespeed score & pass the core web vitals test.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CSS optimization<\/strong><\/li>\n\n\n\n<li><strong>JavaScript Optimization<\/strong><\/li>\n\n\n\n<li><strong>Implement lazy loading for below-the-fold content<\/strong><\/li>\n\n\n\n<li><strong>Add link-preload for critical resources<\/strong><\/li>\n\n\n\n<li><strong>Deferring the third-party scripts<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"css_optimization\"><\/span>CSS Optimization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>CSS is one of your website’s core resources. It is used to make your website stylish, and without CSS, your website may look dull. However, an unoptimized CSS can block the main thread and harm your website\u2019s performance. Let\u2019s see how to mitigate this issue.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Minify CSS Stylesheet<\/strong><\/li>\n<\/ul>\n\n\n\n<p>While most web developers add line breaks and unnecessary comments in the CSS stylesheets to make the code more readable, the browser considers these as unnecessary characters in order to render the web page.\u00a0<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minify-css-1024x535.jpg\" alt=\"Minify css\" class=\"wp-image-2099\" srcset=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minify-css-1024x535.jpg 1024w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minify-css-300x157.jpg 300w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minify-css-768x401.jpg 768w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minify-css.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Deleting these unnecessary characters from your CSS code can reduce the file size and improve the total blocking time, automatically improving your website’s page speed.<\/p>\n\n\n\n<p>Manually deleting unnecessary characters from CSS files can be time-consuming. To save time, you must use an optimization tool like RabbitLoader to minify CSS stylesheets. For more details, visit our minifying resources blog.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Remove the Unused CSS<\/strong><\/li>\n<\/ul>\n\n\n\n<p>You often find some CSS rules in your stylesheets which are not required for your website\u2019s design. This type of CSS rule is known as unused CSS and it unnecessarily blocks the main thread task. <\/p>\n\n\n\n<p>So, <a href=\"https:\/\/rabbitloader.com\/articles\/remove-unused-css\/\">Removing Unused CSS<\/a> can reduce the render-blocking resources by minimizing the main thread work, and improving the performance of core web vital metrics.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-unused-css-1024x535.jpg\" alt=\"Reduce unused css\" class=\"wp-image-2098\" srcset=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-unused-css-1024x535.jpg 1024w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-unused-css-300x157.jpg 300w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-unused-css-768x401.jpg 768w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-unused-css.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Manually removing unused CSS needs a lot of coding knowledge. If you are not from a technical background, install RabbitLoader. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Generate Critical CSS\u00a0<\/strong><\/li>\n<\/ul>\n\n\n\n<p>Generating critical CSS is one of the essential techniques to optimize the website\u2019s page speed performance. By generating critical CSS, you can significantly minimize the main thread task.<\/p>\n\n\n\n<p>While most of the optimization tools are unable to create a separate file for critical CSS, RabbitLoader generates a separate file for critical CSS and reduces the main thread work.  <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"javascript_optimization\"><\/span>JavaScript Optimization<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>JavaScript is mostly known as a render-blocking resource. It increases your website’s total blocking time by increasing the main thread task. By optimizing JavaScript, you can significantly improve the website\u2019s load time by reducing the main thread work.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Javascript-optimization-1024x535.jpg\" alt=\"Javascript optimization\" class=\"wp-image-2097\" srcset=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Javascript-optimization-1024x535.jpg 1024w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Javascript-optimization-300x157.jpg 300w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Javascript-optimization-768x401.jpg 768w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Javascript-optimization.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>The best way to optimize JavaScript is to defer the non-critical function. Implementing multi-threading, Code splitting and minification are also effective techniques used by RabbutLoader to optimize JavaScript and reduce the main thread. For more detailson how RabbitLoader does it, you can visit our previous blog speed index.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"implement_lazy_loading_for_below-the-fold_content\"><\/span>Implement Lazy Loading for Below-the-Fold Content<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Implementing lazy loading can improve a website\u2019s page speed by minimizing the main thread work for the initial loading. <\/p>\n\n\n\n<p>It allows the browser to prioritise loading images & other resources based on their position on the page, instead of loading the right away. <\/p>\n\n\n\n<p>RabbitLoader, does this effectively not only for the desktop, but also for the mobile version of the pages on your website allowing your users a smother user experience & you a better pagespeed score. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"add_link-preload_for_critical_resources\"><\/span>Add Link-Preload for Critical Resources<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Lionk-Preload-1024x535.jpg\" alt=\"Link Preload\" class=\"wp-image-2095\" srcset=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Lionk-Preload-1024x535.jpg 1024w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Lionk-Preload-300x157.jpg 300w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Lionk-Preload-768x401.jpg 768w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Lionk-Preload.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Adding link pre-load in the HTML <head> for critical resources or via an HTTP header in an HTML file is another optimization technique to minimize the main thread. This method is extensively used to preload fonts to solve the text flashing issue popularly known as FOUT..<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"deferring_third-party_scripts\"><\/span>Deferring Third-Party Scripts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Third-party scripts might be necessary for the convenience they offer but they also bloat up your website & make them slow. Since they are using javascript which is very resource intensive.<\/p>\n\n\n\n<p>During the initial page loading time, these coding files execute and block the main thread, increasing the total blocking time.\u00a0<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-the-impact-of-third-party-code-1024x535.jpg\" alt=\"Reduce the impact of third party code\" class=\"wp-image-2096\" srcset=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-the-impact-of-third-party-code-1024x535.jpg 1024w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-the-impact-of-third-party-code-300x157.jpg 300w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-the-impact-of-third-party-code-768x401.jpg 768w, https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Reduce-the-impact-of-third-party-code.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To minimize your main thread work, you need to defer them and avoid them from executing right on load, RabbitLoader does this effectively. <\/p>\n\n\n\n<p>A word of caution here, if you are using any third party script that is critical your website, you might have to avoid from deferring it, as this might cause the visitor to see a non-functional website initially, or if you are using a user tracking service you might lose the tracking data for few initial seconds. <\/p>\n\n\n\n<p>Hence it is about a balance between speed & functionality when dealing with third party scripts.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We have exploited the 5 ways RabbitLoader minimizes the main thread work. If you are looking for a non-coding for your wordpress, Woo-Commerce, Php or laravel websites RabbitLoader is the answer to your woes, try it now.<\/p>\n\n\n\n<p><strong>FAQ:<\/strong><\/p>\n\n\n\n<p><strong>How to minimize the main thread work on the WordPress website?<\/strong><\/p>\n\n\n\n<p>To minimize the main thread work on the WordPress website, you need to use a WordPress plugin like RabbitLoader. Not only WordPress, but you also use RabbitLoader to minimize main-thread work in shopify.<\/p>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Document<\/title>\n <style>\n body {\n font-family: Arial, Helvetica, sans-serif;\n }\n .main-card-for-some {\n background-color: #e9f3ff;\n border-radius: 0.375rem;\n height: 350px;\n width: 600px;\n text-align: center;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .heading-card {\n font-size: 1.60rem;\n font-weight: 600;\n letter-spacing: 0.025em;\n line-height: 2rem;\n }\n .up-mt-1 {\n margin-top: 3.564587rem;\n margin-bottom: 2.75rem;\n }\n .btn-blue {\n font-size: 1rem;\n line-height: 1rem;\n font-weight: bold;\n background-color: rgb(37 99 235);\n color: white !important;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n margin-top: 1rem;\n border-radius: 0.25rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n border: 0;\n text-decoration:none !important;\n }\n \n .btn-blue:hover{\n \tbackground-color: rgb(30 64 175);\n }\n\n .card-caption-body {\n display: flex;\n font-size: 0.75rem;\n line-height: 1rem;\n justify-content: space-evenly;\n margin-top: 1.5rem;\n font-weight: 300;\n column-gap:1.0rem;\n }\n\n .card-caption-text {\n display: flex;\n column-gap: 0.5rem;\n align-items: center;\n }\n <\/style>\n<\/head>\n<body>\n<main style=\"display:flex;justify-content:center;\">\n <div class=\"main-card-for-some\">\n <div>\n <h1 class=\"heading-card\">Get The Best PageSpeed Score <br>For Your WordPress Website<\/h1>\n <div class=\"up-mt-1\">\n <a href=\"https:\/\/wordpress.org\/plugin\/rabbit-loader\/\" class=\"btn-blue\">Install Now<\/a>\n <\/div>\n <div class=\"card-caption-body\">\n <div class=\"card-caption-text\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" width=\"10\" height=\"10\" viewBox=\"0,0,256,256\">\n <g fill=\"#007CFE\" fill-rule=\"nonzero\" stroke=\"none\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"><g transform=\"scale(8.53333,8.53333)\"><path d=\"M26.98047,5.99023c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273l-15.29297,15.29297l-6.29297,-6.29297c-0.25082,-0.26124 -0.62327,-0.36647 -0.97371,-0.27511c-0.35044,0.09136 -0.62411,0.36503 -0.71547,0.71547c-0.09136,0.35044 0.01388,0.72289 0.27511,0.97371l7,7c0.39053,0.39037 1.02353,0.39037 1.41406,0l16,-16c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988z\"><\/path><\/g><\/g>\n <\/svg>\n All in One Optimization Plugin\n <\/div>\n <div class=\"card-caption-text\">\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" x=\"0px\" y=\"0px\" width=\"10\" height=\"10\" viewBox=\"0,0,256,256\">\n <g fill=\"#007CFE\" fill-rule=\"nonzero\" stroke=\"none\" stroke-width=\"1\" stroke-linecap=\"butt\" stroke-linejoin=\"miter\" stroke-miterlimit=\"10\" stroke-dasharray=\"\" stroke-dashoffset=\"0\" font-family=\"none\" font-weight=\"none\" font-size=\"none\" text-anchor=\"none\" style=\"mix-blend-mode: normal\"><g transform=\"scale(8.53333,8.53333)\"><path d=\"M26.98047,5.99023c-0.2598,0.00774 -0.50638,0.11632 -0.6875,0.30273l-15.29297,15.29297l-6.29297,-6.29297c-0.25082,-0.26124 -0.62327,-0.36647 -0.97371,-0.27511c-0.35044,0.09136 -0.62411,0.36503 -0.71547,0.71547c-0.09136,0.35044 0.01388,0.72289 0.27511,0.97371l7,7c0.39053,0.39037 1.02353,0.39037 1.41406,0l16,-16c0.29576,-0.28749 0.38469,-0.72707 0.22393,-1.10691c-0.16075,-0.37985 -0.53821,-0.62204 -0.9505,-0.60988z\"><\/path><\/g><\/g>\n <\/svg>\n No Coding Knowledge Required\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/main>\n<\/body>\n<\/html>\n\n\n\n<div style=\"height:25px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n","protected":false},"excerpt":{"rendered":"<p>\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites. But what does minimizing main thread work mean? And more importantly how to mitigate the \u201cminimize main thread work\u201d warning? Web developers can implement various strategies to minimize main thread work, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[49,45,28,27,48,46,54,43,51,47,53,50,52],"class_list":["post-295","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-asynchronous-programming-techniques","tag-avoid-expensive-operations","tag-content-delivery-network","tag-google-page-speed","tag-i-o-operations","tag-javascript-libraries","tag-lazy-loading","tag-minification-php-code","tag-minimize-dom-manipulation","tag-minimize-main-thread-work","tag-more-efficient-algorithms","tag-optimize-javascript-performance","tag-reducing-the-frequency-of-updates"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning<\/title>\n<meta name=\"description\" content=\"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning\" \/>\n<meta property=\"og:description\" content=\"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/\" \/>\n<meta property=\"og:site_name\" content=\"RabbitLoader\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-13T08:09:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-17T14:22:48+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner-1024x535.jpg\" \/>\n<meta name=\"author\" content=\"Abhi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abhi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/\",\"url\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/\",\"name\":\"Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning\",\"isPartOf\":{\"@id\":\"https:\/\/rabbitloader.com\/articles\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner-1024x535.jpg\",\"datePublished\":\"2023-03-13T08:09:55+00:00\",\"dateModified\":\"2024-06-17T14:22:48+00:00\",\"author\":{\"@id\":\"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/6d8633120b56545cbd85ee632b820556\"},\"description\":\"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage\",\"url\":\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner.jpg\",\"contentUrl\":\"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner.jpg\",\"width\":1200,\"height\":627,\"caption\":\"Minimize Main Thread Work\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rabbitloader.com\/articles\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Minimize Main Thread Work: 5 Effective Ways To Fix The Google PageSpeed Insight Warning\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/#website\",\"url\":\"https:\/\/rabbitloader.com\/articles\/\",\"name\":\"RabbitLoader\",\"description\":\"Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rabbitloader.com\/articles\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/6d8633120b56545cbd85ee632b820556\",\"name\":\"Abhi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/77ef9825bbadbff02f0369eba704c5ef96d1e86e4d25510ccfd5423dfb255086?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/77ef9825bbadbff02f0369eba704c5ef96d1e86e4d25510ccfd5423dfb255086?s=96&d=mm&r=g\",\"caption\":\"Abhi\"},\"url\":\"https:\/\/rabbitloader.com\/articles\/author\/wills619gmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning","description":"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/","og_locale":"en_US","og_type":"article","og_title":"Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning","og_description":"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.","og_url":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/","og_site_name":"RabbitLoader","article_published_time":"2023-03-13T08:09:55+00:00","article_modified_time":"2024-06-17T14:22:48+00:00","og_image":[{"url":"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner-1024x535.jpg"}],"author":"Abhi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Abhi","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/","url":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/","name":"Minimize Main Thread Work: 5 Effective Ways To Fix The Google Pagespeed Insight Warning","isPartOf":{"@id":"https:\/\/rabbitloader.com\/articles\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage"},"image":{"@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage"},"thumbnailUrl":"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner-1024x535.jpg","datePublished":"2023-03-13T08:09:55+00:00","dateModified":"2024-06-17T14:22:48+00:00","author":{"@id":"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/6d8633120b56545cbd85ee632b820556"},"description":"\u201cMinimize main thread work\u201d is the first recommendation you would have when auditing a website in Google PSI for a huge majority of websites.","breadcrumb":{"@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#primaryimage","url":"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner.jpg","contentUrl":"https:\/\/rabbitloader.com\/articles\/wp-content\/uploads\/2023\/03\/Minimize-main-thgread-work-babnner.jpg","width":1200,"height":627,"caption":"Minimize Main Thread Work"},{"@type":"BreadcrumbList","@id":"https:\/\/rabbitloader.com\/articles\/minimize-main-thread-work\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rabbitloader.com\/articles\/"},{"@type":"ListItem","position":2,"name":"Minimize Main Thread Work: 5 Effective Ways To Fix The Google PageSpeed Insight Warning"}]},{"@type":"WebSite","@id":"https:\/\/rabbitloader.com\/articles\/#website","url":"https:\/\/rabbitloader.com\/articles\/","name":"RabbitLoader","description":"Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rabbitloader.com\/articles\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/6d8633120b56545cbd85ee632b820556","name":"Abhi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rabbitloader.com\/articles\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/77ef9825bbadbff02f0369eba704c5ef96d1e86e4d25510ccfd5423dfb255086?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/77ef9825bbadbff02f0369eba704c5ef96d1e86e4d25510ccfd5423dfb255086?s=96&d=mm&r=g","caption":"Abhi"},"url":"https:\/\/rabbitloader.com\/articles\/author\/wills619gmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/posts\/295","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/comments?post=295"}],"version-history":[{"count":5,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/posts\/295\/revisions"}],"predecessor-version":[{"id":2100,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/posts\/295\/revisions\/2100"}],"wp:attachment":[{"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/media?parent=295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/categories?post=295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rabbitloader.com\/articles\/wp-json\/wp\/v2\/tags?post=295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}