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.

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…


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.

Notice 1: Please make sure you enter in this section only JS files and not CSS. They are grouped in Google PageSpeed so you should easily distinguish them.

Notice 2: After adding a file, it is advised to check if everything works on your webpage, before adding the next one. If something is not working then omit it.

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!

Continue Reading
Click to comment

Leave a Reply

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

More in wordpress

About Me:

Szabi Kisded

Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
(worth 29$)!

All My Plugins In A Bundle:

My AutoBlogging Plugins:

My Online Courses:

A Theme I Recommend:

Featured Posts:

To Top