How to Fix Render-Blocking JavaScript and CSS in WordPress
Posted on November 8th, 2018
The WordPress is an open source website creation tool written in PHP. Every WordPress website contains a theme and plugins that add the JavaScript and CSS files to the front-end of the WordPress website. The main advantage of these scripts which can increase the website performance, and also, they can block the rendering of the page. A Web browser will initially load those scripts and CSS before loading the rest of the web page contents. We can test a website against the Google’s guidelines for speed and performance through the Google PageSpeed Score, this will also help to optimize by offers suggestions to improve your site’s page load time.
Let’s discuss more how we can Fix this performance issue of WordPress websites.
We can optimize the website through eliminating these JavaScript and CSS through a WordPress plugin “Autoptimize”. Install the plugin through your WordPress admin dashboard and upon activation, we need to visit the “Settings >> Autoptimize” page to configure the plugin settings on our WordPress.
Checks the box next to JavaScript and CSS options as above and then click on Save Changes button.
After making the changes, test your website again with the Google PageSpeed tool and now you can see the performance increase. If the test results still show some render blocking scripts, then we need to come back to the plugin’s settings page and select “Show Advanced settings” button at the top.
On this Advanced setting, we can allow the plugin to include the Inline JavaScript and remove the scripts that are excluded by default such as jquery.js or seal.js etc.
Then scroll down to CSS option and allow the plugin to optimize the inline CSS by checks the column next to it. Then click on “Save Changes and empty Cache”. Once you are done with these steps test the website on Google PageSpeed tool. Note that we need to check the website thoroughly to ensure that nothing is broken on the web page by optimizing the JavaScript and CSS.
If you need any further help please do reach our support department.