InfoPhilic How to How to Remove Render Blocking JavaScript and CSS?

How to Remove Render Blocking JavaScript and CSS?

Having slow loading website means bad impression on users and search engine as well. Thus, optimizing your site or blog is essential for having fast loading website that creates the better user experience and acquires a good position on search engine.

There are various techniques used to optimize your blog including reducing Admin-Ajax queries, eliminating HTTP requests, etc. Well, These techniques are important during optimization. But, there is one additional technique used to optimize your site i.e., removing render blocking JavaScript and CSS.

Website speed optimization is a complex task to perform. It’s a continuous process that may make you feel tired. You might notice that when you test site speed with speed testing tools, it displays a suggestion to eliminate render-blocking JavaScript and CSS.

Noticing such suggestion might make you search the term on the web. So let’s start with the introduction.

What is Render-Blocking JavaScript and CSS?

As you know, WordPress involves themes and plugins that add CSS files and JavaScript to the front end of your site. Those scripts are known as render-blocking JavaScript and CSS. Having lots of them leads to slow loading of the site. Thus, it is said as try to use least plugins as possible. We have created a list of essential plugins that you may find useful.


Well, in this guide, our aim is to reduce Render blocking JavaScript and CSS. So, let’s go further.

How to reduce Render Blocking JavaScript and CSS?

To make things easier, here, I will penlight some plugins to fix this issue.

1. Fast Velocity Minify:

The fascinating feature of this plugin is, it merges JS and CSS files into groups to reduce the number of HTTP requests. Moreover, it handles all those scripts that are loaded in both header and footer. After that, it then sorts them once you exclude some files from minification.

The plugin does minification of CSS and JS files with PHP Minify only. It also does supports localized files.

Installation of fast Velocity Minify:

  • Upload the plugin folder to the /wp-content/plugins/ directory or upload the zip within WordPress
  • Activate the plugin through the Plugins menu in WordPress

    fast velocity minify settings
    fast velocity minify settings
  • Configure the options under Settings >> Fast Velocity Minify and that’s it.

2. Autoptimize:

Autoptimize is one of the most powerful and easy to use plugins for minification. The plugin makes optimization easy by aggregating, minifying and caching scripts and styles, injecting CSS in the page head by default.

It also minifies the HTML code itself, making your page really lightweight. There are advanced options and an extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.

Installation of Autoptimize:

  • Go to WordPress dashboard > Plugins >> Add New >>> Autoptimize.
  • Now, go to Settings >> Autoptimize.

Autoptimize setting page
Autoptimize setting page

Enable the minification settings on the settings page. You can also add your CDN URL for the optimized assets on the same page. If you don’t use CDN you may skip it.

Now click on Show advanced settings button at the top of the setting page. This will enable advanced setting page for Autoptimize plugin.

Autoptimize setting advanced CSS options
Autoptimize setting advanced CSS options

Autoptimize setting advanced JavaScript options
Autoptimize setting advanced JavaScript options

Here you can set the plugin to aggregate inline CSS and JavaScripts. You can even exclude some scripts. Click on the ‘Save changes and Empty Cache’ button. That’s it, make sure your website no loading with broken scripts.

3. W3 Total Cache:

You can also minify the scripts using WT3 Total Cache:

W3 Total cache minify settings
W3 Total cache minify settings

  • Visit Performance » General Settings page and scroll down to Minify section.
  • Check ‘Enable’ next to Minify option.
  • Select ‘Manual’ for minify mode option.
  • Now, add the scripts and CSS that you want to minify. Get URLs from the Google PageSpeed Insights tool’s result page.
  1. For this, test your site speed in Google PageSpeed Insights tool.

    Google PageSpeed Insights tools results
    Google PageSpeed Insights tools results
  2. It will recommend eliminating render blocking scripts.
  3. Click on Show how to fix and it will show you the list of scripts and stylesheets.
  4. Take your mouse over to a script and select the URL.

Now head over to your WordPress admin area and go to Performance » Minify page. Here you can add JavaScript, CSS, HTML files to minify.

Scroll down to JS section and then under the ‘Operations in areas’ set the embed type to ‘Non-blocking async’ for the </head> section. Under the JS file management choose your activated theme. Now Hit Add a script button and start adding script URLs.

Js minify settings
Js minify settings

Once done, Go to CSS section and then click on the ‘Add a stylesheet’ button. Add stylesheet URLs that you copied from PageSpeed tools. Refer the screenshot below.

CSS Minify settings in W3 Total cache plugin
CSS Minify settings in W3 Total cache plugin

After making all the necessary configuration click on the ‘Save settings and purge cache‘. Now, Test your site speed at Google PageSpeed Insights tool.

That’s all. You are done with removing render blocking JavaScript and CSS.

See also

Amit Malewar
Amit Malewar has been the tutorial writer since 2013. His passion for helping people in all aspects of technology flow through the expert coverage he provides. In addition to writing for InfoPhilic, Amit loves to read and try new things.

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.


  1. Why the WP Fastest Cache creating render-blocking JavaScript and creating CSS delivery also.
    The desktop score is good but mobile score suddenly drops from 93 to 75 in Google Pagespeed insight.

    • Hey Subodh, Speed optimization is not about getting good scores on the tools. It’s about how your site loads at your users end. If you wanna remove render blocking scripts you can use any tool suggested in the post.


Please enter your comment!
Please enter your name here



Get almost 100% PageSpeed on Newspaper theme

The newspaper theme is the most popular premium theme for a self-hosted WordPress blog. The theme is developed by team tagDiv. You can buy...

How to Remove jQuery Migrate in WordPress?

Learn how to remove jQuery Migrate from your WordPress site.

How to Delete Multiple Images in WordPress Media Gallery

Hey, guys, today, one of my friends asked me a question, How can I delete Multiple Images in WordPress? I replied, "It's very simple." Yeah,...

WP Super Cache Plugin: Best Settings & Configuration Guide

A cache plugin serves static contents to the visitor, which improves page load speed. There are so many cache plugins available in the WordPress plugin...

How To Reduce Admin-Ajax Server Load In WordPress

To increase better user experience, we always end up by increasing site speed. After clicking a website link seems like a simple thing. But...


Bluehost Hosting

Get hosting for just $3.95 per month with Bluehost. Bluehost is an officially recommend WordPress host, and one of the most popular & reliable web hosts available.