Connect with us

How to Eliminate render-blocking Javascript and CSS in WordPress


How to Eliminate render-blocking Javascript and CSS in WordPress

Nowadays whole Internet business cannot exist without SEO. Many e-business owners do their best to optimize their sites for serch engines. There is quite a lot of guides and tutorials telling what to do to achieve best results. I believe you have just read one or two… or five even? Over the time more and more of these tutorials are stating that the website page speed affects SEO. In fact not only SEO, but also few other things like UX followed directly by conversion rate. So more awareness grows around page speed also among WordPress users.  To maintain some order first let me show for these who do not know that yet, a several examples on how to check your WordPress site page speed.

Google PageSpeed

Google PageSpeed is a product provided by Google itself and available to anyone by accessing this link. To view report about your website in the menu on the left hand side click PageSpeed -> Analysis -> Insights.  After doing that you will see a simple web page with input field to insert the website address. After doing that and clicking button “Analyze” next to it, and waiting until progress bar completes, you will see the results divided in 2 tabs. One tab is for mobile devices and one is for desktops. There is also a preview of the website both on desktops and mobile, but according to my investigation these happen to be not accurate. Under the score on each tab you can find very useful tips for optimizing you site.

Notice: It is advanced to test not only your main page against the page speed but also other pages that could be slowed down by elements (usually shortcodes ) which are not present on homepage.

READ  Solved – WordPress short code not working with post_content

Google PageSpeed Insights for WordPress – WordPress Plugin

This is a very nice WordPress plugin which allows you viewing Google PageSpeed data right in your WordPress admin panel. The plugin requires Google API key, but it provides even more data then the Google PageSpeed Insights (only website previews are missing). You will get a whole list of pages showing which are doing good and which are doing…. well, not so good. Worth trying, and it is absolutely free.

Check plugin page.

W3 Total Cache

The plugin which will be our main point of focus, can also show you your Google PageSpeed result. This is only a very small widget on plugin main page, so you will not learn much from it. But it is useful in checking if all is still good.

The issue

Usually the first visit to Google PageSpeed for a WordPress user is very disappointing. A clean WordPress installation on a shared server gave us a result of 77pts | 90pts  (mobile | desktop) for max 100pts. It is not perfect, but a bit below from acceptable. But a WordPress site with some more advanced Theme and a dozen of plugins (a quite usual situation) gave us a result of 45pts | 53 pts. Now that is bad.

So what most WordPress admins do? W3 Total Cache.

For those who did not hear about W3 Total Cache, it is a WordPress plugin allowing you to optimize your site in terms of speed. W3TC is free and very complex. In few tests I had occasion to read it was superior to other available plugins. And it is free. Configuring W3TC is quite hard due to immense amount of settings, most of which are not understandable to average user. Some tutorials I found on the net helped me to configure the plugin and my score on Google PageSpeed improved significantly to 70pts | 80pts. Much better but still below expectations. In this situation most probably among the tips in Google PageSpeed there is one with red exclamation mark saying “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. There is not much on the Internet how to get over it, and the solution is not easy to find. So here you have one…

READ  16 Ways to Quickly Increase WordPress Speed [A Must For SEO]


Step 1.

So here is what you should do. I am assuming you already have W3 Total Cache installed. In your Admin Panel go to Performance -> General Settings, then scroll to section “Minify” and set option “Minify Mode” to “Manual”.

This will enable some additional settings in Minify settings page. To visit this page in your WordPress admin panel go to Performance -> Minify and find JavaScript section (called JS). I believe you have already enabled JS minified settings by checking the checkbox. In the box below, please make sure you have everything set exactly as on picture below.

Step 2.

Now is the most important part. In the JS file management section make sure that in the dropdown your current WordPress Theme is chosen. Below the dropdown there is a text saying “No JS files added” and a button below it.

Click the button “Add Script” and you will see a field to enter a file path. Go back to Google PageSpeed  and take closer look on the tip “eliminate render-blocking JavaScript and CSS in above-the-fold content”. Right below it there is a link “Show how to fix”. Click on it and you should see something like on image below.

This is a list of all render blocking JavaScript and CSS files. When you hover with your mouse cursor over each element, you will see it’s full path in a tooltip, from which you can easily copy it.

Step 3.

Now go back to WordPress admin panel and paste it in the field you have added one step ago. Add next field and paste in next link to JavaScript file from the Google PageSpeed list. Repeat the steps until you enter all the files.

Step 4.

When all JavaScript files are added, let us move for CSS. The procedure is the same. In WordPress admin panel go to Performance -> Minify and find CSS section (right below the JavaScript one). Make sure you have the checkbox at the top selected as shown on the image below

Now add the CSS files in the same way as you did with JavaScript Ones.

Finished? Rerun you Google PageSpeed test and enjoy the results!

No votes yet.
Please wait...

We are a WordPress plugin developer company that focuses on useful WordPress plugin creation and empowering people to earn passive incomes from their blogs. We build unique and groundbreaking plugins that will revolutionize your blog!

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in wordpress

Sign up for our newsletter and get a free affiliate e-book!

About Me:

Szabi Kisded

Hi, my name is Szabi and I'm documenting my journey selling plugins on CodeCanyon. I will show you every step of it: learning to code, plugin ideas, WordPress stuff and more. Read more…

Mega Plugin Bundle:

CodeCanyon Portfolio:

Learn to Code Plugins:

Latest Promotions:

Recommended Theme:

Start Your Own Blog:

Recommended VPN:

Translate Your Blog:

AdSense Alternative:

Best Article Spinner:

Popular Posts:

Latest Posts:

To Top