Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Fix Render-Blocking JavaScript and CSS in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Are you trying to eliminate render-blocking JavaScript and CSS in WordPress?

If you test your website on Google PageSpeed insights, then you will likely see a suggestion to eliminate render-blocking scripts and CSS. However, it does not provide any details on how to do that on your WordPress site.

In this article, we will show you how to easily fix render-blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.

How to fix render blocking JavaScript and CSS in WordPress

What Is Render-Blocking JavaScript and CSS?

Render-blocking JavaScript and CSS are files that prevent a website from displaying a web page before loading these files.

Every WordPress website has a theme and plugins that add JavaScript and CSS files to the front end of your website.

These scripts can increase your site’s page load time, and they can also block the rendering of the page.

Render blocking issue highlighted in Google Pagespeed Insights

A user’s browser will have to load those scripts and CSS before loading the rest of the HTML on the page. This means that users on a slower connection will have to wait a few milliseconds more to see the page.

These scripts and stylesheets are referred to as render-blocking JavaScript and CSS.

WordPress website owners who are trying to achieve a Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.

What Is a Google PageSpeed Score?

Google PageSpeed Insights is a website speed test tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google’s guidelines for speed and offers suggestions to improve your page load time.

It shows you a score based on the number of audits that your site passes. Most websites get somewhere between 50-70. However, some website owners feel compelled to achieve 100 (the highest a page can score).

Do You Really Need the Perfect “100” Google PageSpeed Score?

The purpose of Google PageSpeed insights is to provide you with guidelines to improve the speed and performance of your website. You are not required to follow these rules strictly.

Remember that speed is only one of the many website search engine optimization (SEO) metrics that help Google determine how to rank your site. Speed is so important because it improves user experience on your site.

A better user experience requires a lot more than just speed. You also need to offer useful information, a better user interface, and engaging content with text, images, and videos.

Your goal should be to create a fast website that offers a great user experience.

We recommend that you use Google PageSpeed rules as suggestions. If you can implement them easily without ruining user experience, then that’s great. Otherwise, you should try to do as much as you can, and then don’t worry about the rest.

Having said that, let’s take a look at what you can do to fix render-blocking JavaScript and CSS in WordPress.

We will cover two methods that will eliminate render-blocking resources in WordPress. You can choose the one that works best for your website:

Method 1: Fix Render Blocking Scripts and CSS With WP Rocket

For this method, we will be using the WP Rocket plugin. It is the best WordPress caching and optimization plugin on the market that allows you to quickly improve your website performance without any technical skills or a complicated setup.

First, you need to install and activate the WP Rocket plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

WPRocket plugin

WP Rocket works out of the box, and it will turn on caching with optimal settings for your website. You can learn more about it in our complete guide on how to properly install and set up WP Rocket in WordPress.

By default, it does not turn on JavaScript and CSS optimization options. These optimizations can potentially affect your website’s appearance or some features, which is why the plugin allows you to enable these settings optionally.

To do that, you need to visit the Settings » WP Rocket page and then switch to the ‘File Optimization’ tab.

From here, scroll to the CSS Files section and check the boxes next to ‘Minify CSS’, ‘Combine CSS Files’, and ‘Optimize CSS Delivery’.

CSS Optimization settings in WP Rocket

Note: The WP Rocket cache plugin will attempt to minify all your CSS files, combine them, and only load the CSS needed for the visible part of your website. This could affect your website’s appearance, so you need to thoroughly test your website on multiple devices and screen sizes.

Next, you need to scroll to the JavaScript Files section. From here, you can check all the options for maximum performance improvement.

JavaScript optimization

You can minify and combine JavaScript files like you did for CSS.

You can also stop WordPress from loading the jQuery Migrate file. It is a script that WordPress loads to provide compatibility for plugins and themes using old versions of jQuery.

Most websites don’t need this file, but you will still want to check your website to make sure that removing it does not affect your theme or plugins.

Next, scroll down a little further and check the boxes next to the ‘Load JavaScript Defered’ and ‘Safe Mode for jQuery’ options.

Optimize JavaScript delivery

These options delay loading non-essential JavaScripts, and the jQuery safe mode allows you to load jQuery for themes that may use it inline. You can leave this option unchecked if you are certain that your theme does not use inline jQuery anywhere.

Don’t forget to click on the ‘Save Changes’ button to store your settings.

After that, you may also want to clear the cache in WP Rocket before testing your website again with Google PageSpeed Insights.

On our test site, we were able to achieve a 100% score on desktop devices, and the render-blocking issue was solved in both mobile and desktop scores.

Fixed render-blocking issue to achieve perfect page speed score

Method 2: Fix Render Blocking Scripts and CSS With Autoptimize

For this method, we will be using a separate plugin made specifically for improving the delivery of your website’s CSS and JS files. While this plugin gets the job done, it does not have the other powerful features that WP Rocket has.

The first thing you need to do is install and activate Autoptimize, a free plugin plugin to speed up website performance. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

First, you need to check the box next to ‘Optimize JavaScript Code’ under the JavaScript Options block. Make sure that the ‘Aggregate JS-files’ option is unchecked.

Optimize JS files in Autoptimize

Next, scroll down to the CSS Options box and check the ‘Optimize CSS Code’ option.

Make sure that the ‘Aggregate CSS-files’ option is unchecked.

Optimize CSS in Autoptimize

You can now click on the ‘Save Changes and Empty Cache’ button to store your settings.

Go ahead and test your website with the PageSpeed Insights tool. On our demo site, we were able to fix the render-blocking issue with these basic settings.

Fixed render blocking issue in WordPress with Autoptimize plugin

If there are still render-blocking scripts, then you need to come back to the plugin’s settings page and review the settings under both JavaScript and CSS options.

For example, you can allow the plugin to include inline JS and remove scripts that are excluded by default, like seal.js or jquery.js. Then, simply click on the ‘Save changes and Empty Cache’ button to save your changes and empty the plugin cache.

Once you are done, go ahead and check your website again with the PageSpeed Insights tool.

How Does Autoptimize Work?

Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScript files and serves cached copies to your website as async or deferred.

This allows you to fix the render-blocking scripts and styles issue. However, please keep in mind that it can also affect the performance or appearance of your website.

Troubleshooting Render-Blocking JavaScript and CSS

Depending on how the plugins and your WordPress theme use JavaScript and CSS, it can be hard to completely fix all render-blocking JavaScript and CSS issues.

While the above tools can help, your plugins may need certain scripts at a different priority level to work properly. In that case, the above solutions can break the functionality of such plugins, or they could behave unexpectedly.

Google may still show you certain issues, like optimizing CSS delivery for above-the-fold content. WP Rocket allows you to fix that by manually adding the Critical CSS required to display the above fold area of your theme.

However, it can be quite difficult to find out what CSS code you will need to display above-the-fold content.

Finally, apart from using the tools we’ve mentioned, we also recommend removing any unused CSS. This is CSS code that loads on your website but isn’t actually required to load the page. This can cause render-blocking issues by unnecessarily loading additional code.

To get rid of unused CSS, head over to our guide on how to remove unused CSS in WordPress.

We hope this article helped you learn how to fix render-blocking JavaScript and CSS in WordPress. You may also want to see our ultimate guide on how to speed up WordPress performance for beginners and our comparison of the best managed WordPress hosting companies.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

81 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    I use autoptimize and also wp-rocket. It helped me tremendously. However, it is necessary to be very careful with some changes. One setting and the entire website can immediately stop working correctly.

  3. Amina says

    Hello there, your site and tips have really been helpful. Thank you wpbeginner!

    My AMP says customize JavaScript script not allowed. I have tried using and followed your instructions for autoptimize but it didn’t solve the problem. The amp shows the error is in line 12:10 and 18:2.

    • WPBeginner Support says

      Glad our article was helpful, for AMP specific questions like that we would recommend reaching out to AMP’s support and they should be able to assist.

      Admin

    • WPBeginner Support says

      There are likely other tools but these are the current ones we recommend for beginners.

      Admin

  4. Rizz says

    For W3 Total cache users
    Dont add jquery Script (/wp-includes/js/jquery/jquery.js?ver=1.12.4-wp) It will work otherwise your site will not load properly.
    Css will not through any error

    If Revolution silder will post an error after it –> go to revslider global settings and turn on Insert scripts in footer.

    • WPBeginner Support says

      Thanks for sharing some recommendations you’ve found through editing your site.

      Admin

  5. Muhammad Farhan says

    I don’t remember when ever i find myself struck in a difficult position, you are always there to help me when no body is around i don’t know of any best site of wordpress guide than wpbeginners, thank you so much

Leave a Reply to WPBeginner Support Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.