Do you want to eliminate files (CSS & JS) that block the loading of pages on WordPress? If you are testing your site on Google Insights PageSpeed, then you will likely see a suggestion to eliminate scripts that block pages from loading. In this tutorial, we will show you how to fix these files that are blocking the loading of your pages, to improve your Google PageSpeed ​​score.

How to correct the rendering of wordpress pages

What is blocking the loading of pages?

Each WordPress site has a theme and plugins that add JavaScript and CSS files at the end and before the page is visible on the browser. These scripts can increase the loading time of your site's page, and they can also block the rendering of the page.

A user's browser will need to load scripts and CSS before page content is loaded. This means that users on a slower connection will have to wait a few more milliseconds to view the page.

Site owners trying to achieve good Google PageSpeed ​​score will need to resolve this issue.

1 - How to correct page rendering with Autoptimize

This method is simpler and recommended for most users.

The first thing you need to do is to install and activate the plugin " Autoptimize ". For more details, see our step by step guide on how to install a WordPress plugin.

After activating the plugin, you must visit " Settings> Autoptimize To configure the plugin settings.

Autoptimizesettings wordpress settings

You can start by checking the JavaScript and CSS option box and then click on the "Save changes" button.

You can now test your Website using the PageSpeed ​​tool. If there are still scripts blocking page rendering, then you need to go back to the plugin settings page and click on the “Show advanced settings” button at the top.

Autoptimize plugin settings

Here you can allow the plugin to include JS inline and remove scripts that are excluded by default like “seal.js” or “jquery.js”.

Then scroll down to the CSS option and allow the plugin to combine all the CSS files.

Click the “Save changes and Empty Cache” button to save your changes and empty the cache Of the plugin.

Once you're done, go ahead and check your Website again with the PageSpeed ​​tool.

Make sure that you test your site thoroughly to see that everything is working fine after optimizing your JavaScripts or CSS files.

2 - Fix file rendering with W3 Total Cache

This method requires a little more work and is recommended for those who already have W3 Total Cache on their website.

First you will need to install and activate the W3 Total Cache plugin. If you need help, See our complete guide on W3 Total Cache.

Then you need to visit "Performance> General Settings" and scroll down to the "minify" section.

Minification wordpress plugin w3 total cache

First of all, you need to check the “Enable” box and then select “Manual” for the minification mode option.

Click the " Save all settings To save your settings.

Then you need to add the scripts and CSS that you want to shrink.

You can get the URLs of all the scripts and stylesheets that must be combined according to Google PageSpeed ​​Insights.

Under the suggestions where it says, " Eliminate Render blocking Javascript and CSS ", Click on" Show how to solve ". It will show you the list of scripts and stylesheets.

Move your mouse over a script and it will show you the full URL. You can select this URL, then use CTRL + C on your keyboard (Command + C on Mac) to copy the URL.

Now go to your WordPress admin board and go to the " performance > minifier ».

First you need to add JavaScript files that you want to compress. Scroll down to the JS section then under the set “operations in zones” of type embed to “do not block using 'async'” for the section .

Loading files w3 total cache file compression

Then you have to click on the button Add a script And then start adding script URLs that you copied from the Google PageSpeed ​​tool.

Once you are done, scroll down to the CSS section and click on the "Add Style Sheet" button. Now start adding the stylesheet URLs you copied with the Google PageSpeed ​​tool.

Total cache css w3 file compression

Now click on the button Save Settings & Purge Cache To store your settings.

Visit the Google PageSpeed ​​tool and test your website again.

Make sure you also test your website carefully to see that everything is working fine.

That's all for this tutorial, I hope it will allow you to improve the performance of your WordPress blog.