Table of Contents
Last update on
Maybe you’re testing the speed of your WordPress website and the results show a warning like “eliminate render-blocking JavaScript and CSS.” It sounds cryptic, but if you want to quickly eliminate render-blocking resources, WP Rocket can help in a couple clicks by optimizing and delivering critical CSS.
Critical CSS is the process of taking the bare minimum CSS you need to display the first part of a web page, then applying it inline so it can load faster.
This is why it’s flagged in page speed diagnostic tools. According to Google, If you’re not loading 90% of the content on your site in 100 ms or less, there’s nothing for users to see and it creates a poor user experience.
Fortunately, you can resolve warnings like “eliminate render-blocking JavaScript and CSS” or “eliminate render-blocking resources.” WP Rocket can help with that in one click by automatically fetching and setting up critical CSS for your WordPress site.
Here’s more detail on critical CSS, how to eliminate render-blocking resources, WP Rocket’s fix for the “eliminate render-blocking JavaScript and CSS” error and how to figure out critical CSS to speed up your WordPress site.
What is Critical CSS in Plain English
To understand what critical CSS is, it’s essential to first know why it’s needed.
Why Critical CSS is Necessary
Critical CSS has to do with CSS. You can use CSS to style the various elements of your WordPress site including its design. When you load that CSS to a page from an external file, the file itself is called a CSS stylesheet.
Loading a CSS stylesheet is typically how you style a WordPress website.
This is fine unless you’re seeing the “eliminate render-blocking JavaScript and CSS” warning, or the similar one that states “eliminate render-blocking resources.” WP Rocket can help you fix these and the steps are outlined later on.
When you see these error messages, it means that your site isn’t loading as quickly as it could because you’re trying to load a CSS stylesheet and it’s making your WordPress site load slowly.
At least, that’s the “CSS” part of the “eliminate render-blocking JavaScript and CSS” warning message.
This occurs because CSS stylesheets are a priority to load when a user tries to visit a page. Before the rest of the page can be loaded and displayed, the CSS stylesheet needs to first be rendered.
This includes important content such as text and images, which are crucial to satisfy the user’s reason for going to your site.
If the CSS stylesheet is taking too long to load, the page’s content has to wait for it to finish so it can be parsed and displayed on the page. What ends up being displayed to the end user is a blank page for a few seconds or more.
It may not seem like much, but considering that even a one-second delay in the loading of mobile sites decreases conversion rates by up to 20% and less or equal to 20% for each additional second, it’s worth it to speed up your site.
What Is Critical CSS?
The first content that the user will see on a page once it has been loaded is commonly referred to as above-the-fold or above-the-scroll content. This is also the part of the page that can be labelled as “critical” since it’s crucial that it loads quickly for an improved user experience.
The CSS that’s needed to load that critical content is known as critical CSS. You can also use the term “critical CSS” to describe the process of loading critical CSS inline. As opposed to loading the external CSS stylesheet.
Then, the rest of the page’s CSS can be loaded asynchronously and externally from the CSS stylesheet. In short, this means that the external CSS file can load at the same time as the critical CSS.
The result of the critical CSS process helps speed up your site. It also resolves the “eliminate render-blocking JavaScript and CSS” warning in the PageSpeed Insights tool. As a result, you’ll also improve your Core Web Vitals scores. In particular, you’ll optimize the Largest Contentful Paint and the First Input Delay grades.
It may be important to note that screen sizes can vary widely in size between desktops and mobile devices. So, the critical CSS for different sites can vary depending on which devices they’re prioritizing in developing the site. This is typically decided by the screen sizes that are most used when visitors view your site.
The Caveat of Critical CSS
One essential concept to keep in mind is that inline CSS may not be cached depending on the type of caching you have set up for your WordPress site.
If you don’t cache your pages, then you should use critical CSS sparingly or else try to limit the amount of critical CSS you set up.
Otherwise, you may not be able to resolve the “eliminate render-blocking JavaScript and CSS” error in page speed diagnostic tools.
But if you use WP Rocket, you’re all set and you don’t have to worry about this issue.
Check out Caching for WordPress, Explained in Plain English, and A Caching Plugin is Critical to Your WordPress Site for details.
Fixing the Eliminate Render-Blocking JavaScript and CSS Error
Fortunately, you can fix the “eliminate render-blocking JavaScript or CSS” warning or the similar error “eliminate render-blocking resources.” WP Rocket is the easiest way to solve such render-blocking issues.
As an alternative, you can set up critical CSS manually.
No matter which option you choose, you should aim to keep your critical CSS under 14 kb in size.
How to Manually Fix the Warning
If you want to use critical CSS to manually fix the page speed warning, it involves figuring out which CSS is critical CSS when it comes to your pages and templates.
This is a time-consuming task that requires you to analyze the entire Document Object Model (DOM) to determine which styles are applied to each element of the page.
Manually setting up critical CSS is beyond the scope of this article. But, you can check out Analyzing Critical Rendering Path Performance for details.
Eliminate Render-Blocking Resources: WP Rocket Fixes It
Manually setting up critical CSS is a tedious task, but you can certainly automate the process. With WP Rocket, you can optimize CSS delivery in one click to resolve the “eliminate render-blocking JavaScript and CSS” warning.
Once installed, WP Rocket is set up automatically with the best options enabled. Although, critical CSS isn’t set up on install. But, you can enable it in one click.
Go to Settings > WP Rocket and click on the File Optimization tab.
Scroll down to the CSS Files section and click the box labeled Optimize CSS delivery.
You can also optionally enter critical CSS manually in the Fallback critical CSS multi-line text box.
For details on how to fill this text area with automatically generated critical CSS, check out Optimize CSS Delivery:
When that’s done, click Save Changes at the bottom of the page.
Other Ways to Fix the Warning
Besides resolving the “eliminate render-blocking JavaScript and CSS” error with critical CSS, there are other ways you can fix it. You can additionally minify and combine your CSS and JavaScript files, and defer JavaScript files.
You can use all these methods together for the best results. Or, you can be selective and choose the options that work well enough for your specific needs. For sure, choosing the best WordPress caching plugin will help you.
Wrapping Up
Critical CSS is one of the ways you can resolve the “eliminate render-blocking JavaScript and CSS” error as well as the similar “eliminate render-blocking resources.” WP Rocket can fix this with a one-click option if you don’t care to go through the tediousness of figuring out the critical CSS for your WordPress site.
Save yourself time and let WP Rocket do the job for you. WP Rocket will automatically apply 80% of web performance best practices. You don’t even have to touch any settings! You’ll see an instant improvement in speed and PageSpeed Insights score right away.
Were you able to figure out the critical CSS for your site? Were you able to resolve the “eliminate render-blocking JavaScript and CSS” warning? Share your experience in the comments below.
