To prevent this from happening, in this post, we will give you detailed instructions on how to eliminate render-blocking resources in WordPress. You will learn what exactly they are and why it\u2019s important to deal with them, how to find which of your files pose a problem, as well as how to take care of them.<\/p>
What are Render-Blocking Resources?<\/h2>
First things first, what exactly do we mean when we say render-blocking resources? As mentioned above, they are website files that prevent pages on your website from loading quickly. To understand that, you need to know how the loading process works.<\/p>
When a visitor accesses one of your web pages, their browser starts processing the page\u2019s HTML code from the top. Here, it usually finds numerous calls for other files, such as CSS style sheets and JavaScript scripts. These add styling like colors and element sizes as well as interactivity to web pages.<\/p> The thing is, when the browser encounters them, it must also download and process these files. During that time, it is busy and can\u2019t use its processing power to continue rendering the page. This pauses the loading process and, as a consequence, your page takes longer for website visitors to show up.<\/p> This is normal and simply how websites work. However, some files impede the browser\u2019s work without contributing to the actual page being loaded.<\/p> A classic example is tracking scripts<\/a> such as for Google Analytics or Facebook Pixel. They don\u2019t add to the page\u2019s design or behavior but, if they are loading at the wrong time, they can still slow it down. That\u2019s what we call render-blocking resources \u2013 files that stall out the loading process without being necessary to display the web page.<\/p> As mentioned, in most cases render-blocking resources will be CSS or JavaScript files. However, other files can get in the way of a web page loading as well, such as font files<\/a> or images. While they are not strictly render-blocking (because they are critical for a website\u2019s design), you still need to optimize them so they, too, load as quickly as possible. We will talk about that below as well.<\/p> We already learned that the problem with render-blocking resources is that they make your website appear slower.<\/p> Why is this significant?<\/p> Because website speed is a major driver of user experience. That means, how much or how little visitors enjoy interacting with your website. If you have ever navigated away from another site because it took too long to load, you know exactly what we are talking about. More often than not, you would probably rather click on another result than spend your time waiting. Your visitors feel the same way.<\/p> There are also many studies to back up these findings. Even small changes in loading speed can have a significant impact<\/a> on the success metrics of your website.<\/p> Google and other search engines know that web surfers prefer fast websites. They also want to provide their users with the best possible search results. As a consequence, website performance has become an important ranking factor.<\/p> Google especially has put a lot more emphasis on user experience with the introduction of Core Web Vitals and render-blocking resources can impact several of these metrics:<\/p> The first three alone make up 65% of the Lighthouse speed scoring system<\/a>. <\/p> In short, render-blocking resources directly impact both the user perception of your WordPress site as well as its ranking in search engines. So, if speed testing tools are telling you that you have a problem in this area, you better heed their advice.<\/p> Before you can start fixing problems with render-blocking resources on your site, you first need to find out which files are causing them. Here\u2019s how to do that.<\/p> The easiest way is to run your site through PageSpeed Insights<\/a>. Simply enter your website URL and start the analysis.<\/p> Once done, besides a whole wealth of information about the performance of your website, you will find the recommendation to eliminate render-blocking resources under Diagnostics<\/em>.<\/p> PageSpeed Insights will also list the files responsible for slowing down your page loading time. That way, you know exactly where to start.<\/p> Besides that, there are a number of other online tools that will help you find render-blocking resources on your WordPress site:<\/p> Now comes the most important part: how do you actually deal with the files impeding your site\u2019s loading process? We will answer this question in detail in the following.<\/p> You\u2019ll learn how to handle problematic files using both manual methods as well as our very own WP Rocket plugin<\/a>, which makes the process much easier.<\/p> The first thing we will deal with is how to improve the way your website handles CSS files.<\/p> A very basic step to eliminate render-blocking CSS on your WordPress site is to make sure to deliver it to the browser in the correct way. Here, it\u2019s a good idea to avoid doing so using @import<\/em>.<\/p> With @import<\/em>, you can reference and import other CSS files inside style sheets. While this has very practical applications, it can also result in render-blocking request chains.<\/p> Because the browser has to download a second CSS file to process the original style sheet, it can cause a significant delay in your site\u2019s loading. Therefore, it\u2019s best to avoid this method.<\/p> Instead, call the style sheets separately via links in the document head. If you want the browser to prioritize one of them, you can tell it to do so via rel=”preload”<\/em>.<\/p> Most web pages come with a ton of code they are not actually using, especially CSS. You can easily see that when you open up the Coverage<\/em><\/a> tab in your browser developer tools.<\/p> It shows you what code was loaded versus what was actually used to render the page. The difference is often staggering.<\/p> This is not incompetence. It simply stems from the fact that style sheets cover all kinds of website elements that don\u2019t always appear on each page, from forms to widgets. That\u2019s how you end up with that much unused markup.<\/p> At the same time, naturally, this markup takes up loading time and bandwidth without having a purpose, making your website slower in the process.<\/p> So, the first step is to eliminate code that is unnecessary. Because if it\u2019s not being loaded, it can\u2019t block anything. Makes sense, doesn\u2019t it? You have two main options for that.<\/p> The first is to extract the critical path CSS<\/a> (meaning the markup that is absolutely necessary for displaying your page) and including it directly in the document head instead of its own file.<\/p> So, instead of linking to a style sheet, you would have the CSS markup right in the HTML file, like so:<\/p> To find out the critical path CSS for a web page, you can use a tool like Sitelocity<\/a> or PurgeCSS<\/a>.<\/p> That way, you don\u2019t have to figure it out manually.<\/p> Another option you have to eliminate render-blocking resources on your WordPress site is to split your CSS files for different screen sizes and load them only when necessary using the media attribute<\/a>. For example, you might have files such as:<\/p> You would then have the browser load these only for certain screen resolutions like so:<\/p> You can extract CSS from large files with media queries using PostCSS<\/a> so you don\u2019t have to split them manually.<\/p> If the above sounds too complicated, you can tackle render-blocking resources automatically using WP Rocket. With the plugin active on your site, go to the File Optimization<\/em> menu. Here, simply check the box that says Optimize CSS delivery<\/em>, confirm your choice (there is a little warning), save, and the plugin will automatically reduce\/remove unused CSS from your pages so they load faster.<\/p> Finally, there\u2019s also the option to load CSS asynchronously (you\u2019ll learn what that means in the next section) instead of removing unused CSS.<\/p> Note, however, that this is only a fallback option if you encounter an issue and that removing unused CSS is the recommended method.<\/p> Next up, we\u2019ll work on problematic JavaScript files.<\/p> The two main tools you have for preventing scripts from delaying your page\u2019s from rendering are the async<\/em> and defer<\/em> attributes. You can add them to your calls in the code like so:<\/p> Both of these attributes do very similar things. They prevent your visitor\u2019s browser from pausing the site loading process when it encounters a JavaScript file. However, they do so in slightly different ways and, therefore, differ in how to use them:<\/p> Here\u2019s an illustration<\/a> to make it clearer:<\/p> When should you use what?<\/p> Use defer<\/em> for files where the order matters. That\u2019s usually because they rely on a previous file being present when running. Otherwise, you might encounter problems. A common example is when sites use jQuery and try to execute some of its functionality before the jQuery library has been loaded.<\/p> The async<\/em> attribute, on the other hand, is for files that are completely independent of the rest of the page document, such as the aforementioned tracking scripts.<\/p> It\u2019s important to note that you can theoretically also load CSS asynchronously. However, that\u2019s a bit more complicated than we can cover here. You can find instructions over at web.dev<\/a>.<\/p> Another step you can take to prevent your site\u2019s JavaScript from being render-blocking is to split your files. That\u2019s similar to what we discussed for CSS. It reduces the time it takes for the browser to process each file, so it isn\u2019t blocked as long from loading the page. It also keeps your site responsive to user input, which is important for the Interaction to Next Paint metric.<\/p> When using Chrome developer tools to analyze the performance of your website, it will warn you of particularly long JavaScript tasks with a red triangle.<\/p> If that\u2019s a problem on your site, you can use bundlers like webpack<\/a>, Browserify<\/a>, and Rollup<\/a> to divide your JavaScript into multiple bundles that only load when needed.<\/p> WP Rocket also has options for optimizing JavaScript on your site. Again, under\u00a0File Optimization<\/em>, you can determine whether\u00a0<\/span>to load it deferred and delay loading until a user interaction occurs.<\/p> In addition, the plugin has the option to exclude scripts manually from being delayed to make sure that important JavaScript still loads.<\/p> As mentioned earlier, font files can also interfere with the loading process. While they are not strictly render-blocking, they can still be disruptive. The two most important concerns here are:<\/p> Here are ways to avoid these issues:<\/p> By the way, you can easily preload font files in WP Rocket by defining their location under Preload<\/em>.<\/p> These two techniques don\u2019t directly help eliminate render-blocking resources. However, they can still improve performance problems. Here\u2019s what each of these terms mean:<\/p> If you want to use these techniques on your WordPress website, it usually involves manually adding code to a server file<\/a> or running files through a tool like Minify JS<\/a>.<\/p> Alternatively, go with a plugin solution. For example, WP Rocket automatically enables GZIP file compression on your WordPress website when it becomes active. In addition, you can activate minification for both CSS and JavaScript files by checking the boxes under File Optimization<\/em>.<\/p> Besides getting rid of render-blocking resources on your WordPress site, there are other techniques you to further improve your site\u2019s performance:<\/p> Except for image optimization, WP Rocket has functionality for all of this:<\/p> In addition, you can also check out Imagify<\/a>, our other plugin. It can help you do all of the image optimization techniques mentioned above right on your WordPress website. Imagify uses Smart Compression to balance image quality and performance and can convert visuals to both WebP and Avif. It is the easiest image optimization plugin for WordPress to make images lighter.<\/p> Are you still in doubt that eliminating render-blocking resources could have a significant impact on your WordPress site\u2019s performance? Then let\u2019s put those doubts to rest by putting the advice above to the test.<\/p>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/stylesheet-calls-in-document-head.jpg\")
<\/figure>Why Eliminate Render-Blocking Resources in WordPress?<\/h2>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/google-study-mobile-site-speed-conversion-rates.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/lighthouse-scoring-calculator.jpg\")
<\/figure>How to Find Problematic Files<\/h2>
Using PageSpeed Insights<\/h3>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/eliminate-render-blocking-resources-diagnostic-in-pagespeed-insights.jpg\")
<\/figure>Other Tools<\/h3>
How to Get Rid of Render-Blocking Resources in WordPress (With and Without a Plugin)<\/h2>
1. Optimize CSS Delivery<\/h3>
Avoid Using the @import Rule<\/h4>
<link rel=\"preload\" href=\"important.css\" as=\"style\" \/>\n<\/code><\/pre>Check for Unused Code<\/h4>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/coverage-tab-showing-unused-code.jpg\")
<\/figure>Inline Critical Path CSS<\/h4>
<!DOCTYPE HTML>\n\n<html>\n\n<head>\n\n<title>Your Website Title<\/title>\n\n<meta name=\"description\" content=\"website description\" \/>\n\n<meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\" \/>\n\n <style>article,footer,header,main,nav{display:block}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}<\/style>\n\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"style\/style.css\" title=\"style\" \/> \n\n<\/head><\/code><\/pre>![\"\"\/](\"https:\/\/lh7-us.googleusercontent.com\/ivJxNffEQB6q65-hiGOmJpU-y-CnSp7G2bqFt5AYkZW2Y6ylGEuzTsVD3iYp8h9w9tzeDh2LC9RXjAK8rr1DjZLqe4qMZF7cvP2Llp4KbOcW5MH9SBiETNajV6eYZEYbeNDampN6tUraqVyr3fdywN4\")
Split CSS Files<\/h4>
<link rel=\"stylesheet\" href=\"main.css\" media=\"all\">\n<link rel=\"stylesheet\" href=\"small.css\" media=\"(min-width: 320px)\">\n<link rel=\"stylesheet\" href=\"medium.css\" media=\"(min-width: 768px)\">\n<link rel=\"stylesheet\" href=\"large.css\" media=\"(min-width: 1200px)\">\n<\/code><\/pre>Alternatively, Use WP Rocket<\/h4>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/remove-unused-css-in-wp-rocket.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/load-css-asynchronously.jpg\")
<\/figure>2. Deal With Render-Blocking JavaScript<\/h3>
async and defer<\/h4>
<script async src=\"important.js\"><\/script>\n\n<script defer src=\"also-important.js\"><\/script><\/code><\/pre>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/async-vs-defer-growingwiththeweb.png\")
<\/figure>Split JavaScript Files<\/h4>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/long-tasks-in-chrome-developer-tools.jpg\")
<\/figure>WP Rocket Options<\/h4>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/defer-and-delay-javascript-in-wp-rocket-1.jpg\")
<\/figure>3. Improve Font Loading<\/h3>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/preload-fonts-in-wp-rocket.jpg\")
<\/figure>4. Use Compression and Minification<\/h3>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/minify-css-and-javascript-files-in-wp-rocket.jpg\")
<\/figure>5. Implement Other Optimization Techniques<\/h3>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/imagify.jpg\")
<\/figure>Eliminating Render-Blocking Resources with a WordPress Plugin (Before-and-After Case Study)<\/h2>
Test Setup and Initial Results<\/h3>
![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/test-website-to-eliminate-render-blocking-resources.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/test-website-initial-speed-results.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/test-website-diagnostics.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/pagespeed-insights-results-after-optimization.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/passed-audit-render-blocking-resources.jpg\")
<\/figure>![\"\"](\"https:\/\/wp-rocket.me\/wp-content\/uploads\/2024\/03\/further-speed-improvements.jpg\")
<\/figure>