BLOG

QUICK TIPS TO FIX RENDER-BLOCKING JAVASCRIPT & CSS IN WORDPRESS

TIPS & TRICKS

You just made a test in Google PageSpeed, and you got the result that you should fix “Eliminate render-blocking JavaScript and CSS in above-the-fold content.” Render-Blocking JavaScript and CSS are files that are keeping the page from loading. Google PageSpeed analyzer recommends webmasters to remove render-blocking JavaScript and CSS from above the fold of the web page that is preventing a page from loading.

 

Another reason we should remove render-blocking JS and CSS is that web page loading speed matters. It is proven and officially announced by Google that decreasing page load time can rank your web page better in a search engine and improve the user experience. It also increases revenue as well as, these days, the Internet business cannot exist without SEO. Many websites owners do their best to optimize their sites for search engines. There is quite a lot of guides and tutorials telling what to do to achieve the best results. 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 awareness grows around PageSpeed also among WordPress users. To maintain some order, first let me show for those who do not know that yet, several examples on how to check your WordPress site page speed.

 

Google PageSpeed Insights
It is a tool available to anyone and you can access via this link. To view the report about your website, go in the menu on the left-hand side and click PageSpeed -> Analysis -> Insights. Then, you will see the input field to insert the website address. After you will see the results divided into 2 tabs. One tab is for mobile devices and one is for desktops. There is also a preview of the website for both desktops and mobile. Under the score on each tab, you can find very useful tips for optimizing your site.

 

pagespeed-desktop-result

 

pagespeed-mobile-result

 

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

 

Google PageSpeed Insights for WordPress – WordPress Plugin
This is a nice WordPress plugin which allows you viewing Google PageSpeed data right in WordPress admin panel. The plugin requires a Google API key, but it provides, even more, data than the Google PageSpeed Insights. You will get the list of all your website pages showing good, or bad results. Worth trying, and it is free. Check plugin page.

 

W3 Total Cache
The is a popular plugin which can also show you your Google PageSpeed result at the top toolbar. This is only a very small widget on plugin main page. You will not learn much from it but it is useful in checking if all is still good.

 

The Problem
Usually, the first visit to Google PageSpeed for a WordPress user is very disappointing. A clean WordPress installation on a shared server gave me a result of 73 pts | 88 pts (mobile | desktop) for a maximum of 100 pts. It is not perfect and a bit below acceptable. A big WordPress website with more advanced Theme and a dozen of plugins (a quite usual situation) gave me a result of 27 pts | 30 pts. It is not good at all!

 

Then, what most WordPress webmasters do in that case? They use 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. It is 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 the 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 70 pts | 80 pts. Much better but still below expectations. In this situation, most probably among the tips in Google PageSpeed, there is one with a 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…

 

The Solution

1. Minify Mode

Here is what you should do, 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”.

 

w3-minify-mode

 

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. Enabled JS minified settings by checking the checkbox. In the box below, make sure you have everything set exactly as on picture below.

 

2. JS Minify Settings

w3-js-minify-settings

 

3. JS File Management

Now is the most important part. In the JS file management, the section makes 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.

 

w3-js-file-management

 

Click the button “Add a script” and you will see a field to enter a file path. Go back to Google PageSpeed and take a closer look at 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 the image below.

 

ps-js-css-blocking-resources

 

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

 

4. Paste All The Information

Now go back to WordPress admin panel and paste resource element 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. After adding a file, it is recomend to check if everything works on your webpage, before adding the next one. If something is not working then omit it.

 

5. CSS Minify Settings

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

 

w3-css-minify-settings

 

Finally, add the CSS files in the same way as you did for JavaScript ones. Rerun your Google PageSpeed test and enjoy the results!

 

n-thibault-90x90By Nathalie Thibault

Nathalie works as a UI/UX Designer and Front-End Developer. She has years of experience with WordPress and a special interest in internet marketing.

Sign Up For More Resources!

Carrousel

Stop Turning Around! Get a Faster and More Beautiful Responsive Website.
CONTACT

Subscribe to the Newsletter and Receive the

Latest Web Resources.

JOIN THE MAILING LIST TO RECEIVE THE LATEST TIPS, INSPIRATION

AND RESOURCES SENT OUT IN YOUR INBOX.

Let's try — it only takes a click to unsubscribe!

You have Successfully Subscribed!