Do you want 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 scrips and CSS. In this article, we will show you how to easily fix render blocking JavaScript and CSS in WordPress to improve your Google PageSpeed score.
What is Render-Blocking JavaScript and CSS?
Every WordPress site 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 rendering of the page.
A user’s browser will have to load those scripts and CSS before loading 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.
Website owners who are trying to achieve the Google PageSpeed score of 100 will need to fix this issue to attain that perfect score.
What is Google PageSpeed Score?
Google PageSpeed Insights is an online 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 site’s page load time.
It shows you a score based on the number of rules 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 guidelines to improve speed and performance of your website. You are not required to follow these rules strictly.
Remember that speed is only one of the many SEO metrics that help Google determine how to rank your website. The reason speed is so important is 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, better user interface, and engaging content with text, images, and videos.
Your goal should be to create a fast website that offers great user experience.
We recently redesigned WPBeginner, and we kept our focus on speed as well as improving user experience.
We recommend that you use Google Pagespeed rules as suggestions, and if you can implement them easily without ruining user experience, then that’s great. Otherwise, you should strive 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 fix the render blocking JavaScript and CSS in WordPress. You can choose the one that works best for your website.
1. Fix Render Blocking Scripts and CSS with Autoptimize
This method is simpler and recommended for most users.
First thing you need to do is install and activate the Autoptimize plugin. 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.
You can start by checking the box next to JavaScript Options and CSS Options and then click on the save changes button.
You can now test your website using PageSpeed tool. If there are still render blocking scripts, then you need to come back to the plugin’s settings page and click on ‘Show Advanced Settings’ button at the top.
Here you can allow plugin to include inline JS and remove scripts that are excluded by default like seal.js or jquery.js.
Next, scroll down to CSS option and allow plugin to aggregate inline CSS.
Click on the ‘Save changes and Empty Cache’ button to save your changes and empty plugin cache.
Once you are done, go ahead and check your website again with the PageSpeed tool.
Make sure that you thoroughly test your website to see that nothing is broken by optimizing your JavaScripts or CSS.
How does it work?
Autoptimize aggregates all enqueued JavaScript and CSS. After that, it creates minified CSS and JavaScripts 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.
2. Fix Render Blocking JavaScript using W3 Total Cache
This method requires a little more work and is recommended for users already using W3 Total Cache plugin on their website.
First you will need to install and activate the W3 Total Cache plugin. If you need help, then see our guide on how to install and setup W3 Total Cache for Beginners.
Next, you need to visit Performance » General Settings page and scroll down to Minify section.
First you need to check ‘Enable’ next to Minify option and then select ‘Manual’ for minify mode option.
Click on the save all settings button to store your settings.
Next, you need to add the scripts and CSS that you want to minify.
You can get the URLs of all the scripts and stylesheets that are render blocking from Google PageSpeed Insights tool.
Under the suggestions where it says: ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’, click on ‘Show how to fix’. It will show you the list of scripts and stylesheets.
Take your mouse over to a script and it will show you the full URL. You can select this URL and then use your keyboard’s CTRL+C (Command+C on Mac) keys to copy the URL.
Now head over to your WordPress admin area and go to Performance » Minify page.
First you need to add JavaScript files that you want to be minified. Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the <head> section.
Next, you need to click on the ‘Add script’ button and then start adding script URLs that you copied from Google PageSpeed tool.
Once you are done, scroll down to CSS section and then click on the ‘Add a stylesheet’ button. Now start adding stylesheet URLs you copied from Google PageSpeed tool.
Now click on the ‘Save settings and purge cache’ button to store your settings.
Visit the Google PageSpeed tool and test your website again.
Make sure that you also test your website thoroughly to see that everything is working fine.
Troubleshooting
Depending on how the plugins and your WordPress themes uses JavaScript and CSS, it could be quite challenging 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 your plugins or they could behave unexpectedly.
Google may still show you certain issues like optimizing CSS delivery for above the fold content. Autoptimize allows you to fix that by manually adding inline CSS required to display the above fold area of your theme.
However, it could be quite difficult to find out what CSS code you will need to display above the fold content.
That’s all, 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 boost WordPress speed and performance for beginners.
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.
Great info as always!
I’m with Siteground so have SG Optimizer on my site. I’ve gone through the settings as much as I understand, but still getting the Eliminate render-blocking resources.
Can I use Autoptimize as well, or will it clash with SG? Thanks
You should be able to use Autoptimize with SG Optimizer but if you have any concerns if you reach out to the plugin’s support they should be able to let you know if there are currently any conflicts between the two
how can i Fix Render-Blocking JavaScript and CSS in WordPress without a plugin.
You would need to manually go through the code and set the CSS and JS files to load after the content is added to the page.
Thank you for this! Autoptimize just helped me get a better page score!
Ben
You’re welcome, glad our recommendation could help
Hi WP Beginner Team,
Thanks a lot for sharing such a useful article. Autoptimize is an awesome plugin.
I was looking for a plugin to boost the speed of my wp blog. After reading this post, I installed and activated “Autoptimize” on my blog. And to my surprise it increased the speed of my blog from 39 to 61 for mobile and 76 to 95 for desktop checked on PageSpeed Insights.
Thank once again for guiding new bloggers like me.
Glad our recommendation could be helpful
How to identify the script URL and CSS URL?
If you use Google Page insights then there is a dropdown arrow which will show you the URLs that are causing the problem with a learn more link for how to find the url without their tool.
The new google page speed insights doesn’t showing the link what should I do.
There should be a dropdown arrow and when you click that it should show the links to the files
I am not sure how many times this website has helped me!!! Thank you SOOO MUCH!
how can i Optimize images, which i had been add in my website in the past?
Thanks dude, Really appreciate your tutorial. I used Autoptimize Plugin and worked for me really well.
When I use all these plugins suddenly my website go slow down & it shows inappropriate content…
What Can I Do ?? Please Help
Hi Deeksha,
Both plugins are quite safe. If you are seeing inappropriate content on your website, then please make sure that your website is not hacked. You can disable both plugins at any time.
Sir When we install Autoptimize plugin in our WordPress blog then our blog is not opening it says this page is not working. What should I do Sir?
Sir I would like to know when we add javascript link to eliminate render blocking code following by your steps then any affect is occuring on my blog ranking. please help
Sumit:
The plugin is not working so you need to rename the plugin folder to turn it off. You need ftp or a file manager plugin. Can you access the dashboard via your wp-login.php location? Like domain/wp-login.php
I use wordpress.com, any plugin to do the same thing here on wordpress.com since this plugins are no supported here? Thanks
Autoptimize works for me. it nicely condenses my scripts, bit I do still see the render-blocking script warning
Hello,
Currently I am using WP Rocket, is it possible to use Autoptimize plugin together? Thanks for sharing this valuable information.
Hi there. I’ve tried the W3 method and as soon as I turn on Minify (using Disk) I get this:
Fatal error: Unknown: Cannot use output buffering in output buffering display handlers in Unknown on line 0
How does one fix that?
Great tutorial though overall! Thanks for this.
EDIT: This problem goes away when I deactivate Autoptimize, however, so does the rest of the site. Only the bare bones remain with no actual content.
The settings for Autoptimize has changed. The only JavaScript Options available is Optimise JavaScript Code? The rest of the options in your screenshot is not available, at least not on the one I have. Last time I tried W3 Total Cache, nobody could access the site. I am still looking for a way of solving the load time of the page, which for some reason stand at anything from 10 – 17 seconds.
David, try Gmetrix web speed tool. On the results list there is a waterfall chart showing how the site loads and what the largest files and scripts slowing the page load.
I find the slowest scripts are googles cdn scripts like google fonts! The very same company insisting, forcing users to their demands have to scripts taking an age to load. You couldn’t make it up.
Can you use minify on w3 total cache simultaneously with cloudflare? We are using minify in cloudflare and left it disabled in w3cache. But we still keep getting the message- Eliminate render-blocking JavaScript and CSS in above-the-fold content.
Thanks!
The plugin 23 cache UI has been changed and it doesn’t have any option where we can put our .js URL for optmization.
I am talking about “Now head over to your WordPress admin area and go to Performance » Minify page.”
Great tutorial. However is W3 Total cache safe to use now due to an issue earlier in the year? I’ve stopped using it since but it was the best plugin out there.
Thanks for sharing this article but you said (please keep in mind that it can also affect the performance or appearance of your website)
Please clarify if this effect will be good or bad for the website google ranking?
Hi Mohamed,
A faster website is certainly good for SEO rankings. However, when fixing render blocking issues you may end up changing appearance of your theme or get even a lower page speed score than before.
Ha, funny.
I was looking for help here.
then I did the google speed tool for YOUR post here.
Google result
mobile Poor
54 / 100
desktop
Needs Work
66 / 100
Do you have any clue at all?
Hi Angie,
Often people obsess about getting a perfect 100 with Google PageSpeed which is nearly impossible for most functional websites. If you have any sort of social media buttons, retargeting scripts, or ads, then your site will never get a perfect score.
Chances are that you’ll be far from it. But that’s why you have other tools like Pingdom to verify your speed results.
For example: WPBeginner.com homepage loads in 508 ms (which is insanely fast) –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot1.png
But has a Google Pagespeed score of 74 on desktop (which those who don’t know any better will consider it to be bad). –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot2.png
If you look through all popular websites like ESPN, NYTimes, TechCrunch, etc you’d notice that none of them have a perfect score .. actually far from it.
Here’s an example of ESPN score – 62 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot3.png
Here’s an example of NYTimes – 68 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot4.png
Here’s an example of TechCrunch – 49 on desktop –
https://www.wpbeginner.com/wp-content/uploads/2017/11/screenshot5.png
Our advice is to focus on making your website as fast as possible by following our guide on how to speed up WordPress and use tools like Pingdom as a reference point for what your users will see when they load your website.
This has actually made my render blocking worse. How do we remove it?
Every single time I use Autoptimize or W# Total Cache my site explodes. The mobile web view gets trashed into an html menu list and parts of the site stop working. I have tried each of these on 4 different sites and dropped both of them.
Chris I suggest you read and adhere to the W3 Cache warning on the minify section. Minify html and css only and again be wary not all css should be mini-fied due to the reasons stated in the post above.
I use W3 Cache selectively, tinyjpg for image optimisation, and set OpCache in the .htaccess file. Templaters love to use Sliders…but they bloat the page with images screen width at 1920pxs. Ditch the sliders, smaller images (with a modal box if greater detail required) and icons instead.
I just installed and it broke my homepage. All the images are gone.
Any idea how to fix this?
Hey guys! I’ve loved the W3 tutorial. There’s just one information missing: The Embed Location for the JS File Management.
Is it “Embed before Body”? Or “embed in Head”? Or “Embed after Body”?
I am new to Blogging, however, I have been following Wpbeginner.com for quite sometime and whatever they are writing I found them very useful and don’t hesitate to say that, today if my blog page is Live…30% credit goes to Wpbeginner.com team and Sayed Balkhi for creating such a wonderful and useful webpage.
I am thankful to Wpbeginner.
Keep it up, all the best.
Hi Dev,
Thanks you for the kind words. We are glad you find WPBeginner helpful
I just put this site in google page-speed test and only got 66 for mobile and 77 for desktop!?
Plugins increase loads on our website which makes our site slow. At wpbeginner, I haven’t seen a single method of speed optimization without the use of plugins. Teach us something useful, these methods don’t work for everyone.
Great detailed information on using Autoptimize plugin dealing with Java-scrip, CSS and plugin w3 Total Cashe to fix render blocking while enhancing website speed performance
Thanks a lot for this information. Earlier my page loading load time speed was 63 and after installing Autoptimize plugin it increases to 81.
I am not very sure what happen, I installed autoptimize in one of my site, then the page size increase from 2.8mb to 4mb
YIKES! This made the performance of my site drop drastically! Help!
Thanks for sharing.
Overall the speed of the site increased by very little. But the issue with render blocking is not resolved.
Comment if you have other suggestions.
thanks.
I trying to reach 100% but impossible
I am trying to get 70+ but still nowhere near.
Haha, great, google sucks but after all i am at 80+
I got 3 new websites down to almost 500 ms, faster than 96% of sites on Pingdom. Similar for other speed testers.
Thought great, till Google brought me back down to earth with their page insights. Mainly low score for mobile, but thought these modern themes are meant to be responsive? Obviously not!
I squeezed every image down to next to nothing before uploading as well, so it is frustrating.
Also, none of the apps work for me with Browser Cache, etc.
I’d say the same three problems I have – once the basics are done – are:
1. Render blocking Javascript.
2. Browser caching.
3. Images wrong size for mobile.
I have used all the plugins..But still the page speed is bad.
I’m a bit confused. I just ran a Google speed test on wpbeginner and if didn’t score well at at all. What am I missing?
My Website is an RTL one after i saved the settings of the “Autoptimize” plugin my website turn into LTR !
Both Autoptimize and W3 Total cache plugins have damaged my website. These plugins works with certain themes only. One has to be very careful to use these two plugins.
When I installed Autoptimize, as suggested in this article, it completely screwed up my website. Maybe I set it up wrong, but after removing it entirely, I reached a Google PageSpeed score of 92 for desktop. Mobile is at 67, so I’m working on improving that, but won’t be using Autoptimize again, that’s for sure!
Thanks. It works for my blog.
Hi WP beginner,
Very helpful article!
Thank you!
Just a random question?
Can I set it back minified mode from manual to auto and delete the minified files without harm? And what do you recommend: manual or auto?
Cheers
Just do it auto
Both these methods did not work. Is there any other better way to do this?
Hi i Liked article butt em not getting option to add scripts in W3 Total cache plugin kindly let me know how to get that?
Thank you very much for your great article, it’s really helped me.
Just i have an small problem, i’m confused now!
I added all .js and .css manually on W3TC, but still one .css has problem on google page checker:
Consider Fixing:
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
26952.default.include.c9d602.css is available currently on .css list, but i see this error. How can i fix this problem?
I don’t see the option to “Add a stylesheet”, any ideas why?
Ok I did the steps and installed W3 & went thru the total beginners guide. I also added the edge on W3 although it is in beta and went back and changed from embed the JS before the /body to embed the JS in the head. I now have my desktop speed at 75 (was at 69). And mobile is at 50 (was at 38). Google speed is still saying I need to minify, etc etc. Any other hints or tips or plugins?? Thanks for the help so far
Hey Cindy,
Please take a look at our guide on how to minify CSS / JavaScript Files in WordPress.
Using the Autoptimize plugin (I use WP Super Cache rather than W3 Total Cache) really didn’t work on my site. If anything, it made my Google load speed score slightly worse.
Thanks for this topic. i need it too much.
but you didn’t point out about embed section location for scripts to be added for JS and CSS in the W3 total cache plugin ..
in the image in this topic it shown to be selected “before”..
thanks
Hi WP beginner
I have a trouble shooting while fixing this issue. In my W 3 Total cache, I am not able to see the option js section.
My screenshot attached in the above link
Suggest me a method to solve it.
Hey Rajan,
You need to first enable minification and click on the save all settings button. After that you need to go to Performance > Minify page. This is where you will find the manual JS minify settings.
where can I found the minification setting.
Thanks for the tips.
Do plugins like jet pack for wordpress or WP rocket do the same thing? And do they conflict at all with the plugins you recommend here?