Stop-watch over white

How to Eliminate render-blocking Javascript and CSS in WordPress

Nowdays 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 tutuorials telling what to do to achieve best results. I belive you have just read one or two… or five even? Over the time more and more of these tutorials are stating that the website pagespeed affects SEO. In fact not only SEO, but also few other things like UX followed directly by conversion rate. So more awarness grows around pagespeed also among WordPress users.  To maintan 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 webiste in the menu on the left hand side click PageSpeed -> Analisys -> Insights.  After doing that you will see a simple webpgae with input field to insert the webiste address. After doing that and clicking button “Analyze” next to it, and waiting until progressbar completes, you will se 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 optimizimg you site.

PageSpees Results on clean WprdPress installation

Notice: It is advaiced to test not only your main page aginst 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 wiget 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 instalation 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 optimixe your site in terms of speed. W3TC is free and very complex. In few tests I had occastion to read it was superior to other available plugins. And it is free. Configuring W3TC is quite hard due tu 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…

Solution

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”.

Set 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 coursor over each element, you will see it’s full path in a tooltip, from which you can easly 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: 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: After adding a file, it is adviced to check if everything works on your webpage, before adding the next one. If something is not working then omitt 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

Enable CSS minify settings

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!

Bogusz Houszka

A PMP® certified Project Manager and a WordPress enthusiast. Always trying to get most out of it, spread the word and share knowledge. A fan of DYI, squash and baking.