A Quick Guide On How To Fix Render-Blocking Javascript And CSS In WordPress
Render-blocking JavaScript and CSS are two commonly faced problems which increase the loading time of a website. Site speed is considered as one of the key factors in capturing and retaining visitors, however, search engines also take into account a site’s speed to rank it in the search results.
Similarly, if you run a test on Google Page Speed insight, to check the speed of your site, then you will also be given the removal of render-blocking JavaScript and CSS as a recommendation to increase the loading speed of the site. So, if you need to fix this underlying speed-reducing problem, then read on, as this article will guide you to render-blocking JavaScript and CSS fixing in WordPress to perk up the PageSpeed score on Google or GTmetrix.
For your better understanding, let us first look at render-blocking JavaScript and CSS in detail.
What render-blocking JavaScript And CSS?
Every website on WordPress has a plugin and theme that adds CSS and JavaScript files to the site’s front-end. While these scripts can improve the load time of your page, they can simply do it by blocking the page rendering, too.
Since the user’s browser loads the CSS and scripts before loading rest of the HTML on the page, users with a slower internet connection will have to wait a little more. Also, the owners of the websites, who strive to get 100 Google PageSpeed score, must fix the issue to attain a better score. These style sheets and scripts, however, are referred as render-blocking JavaScript and CSS
What is Google PageSpeed Score and Do you Really Need the Perfect “100” ?
Before you decide to chase the 'Perfect 100 score' on Google PageSpeed Insights blindly, you must keep in mind that there are several SEO Metrics that help search engines determine how to rank your website and Speed is 'just' one of them.
The purpose of Google PageSpeed insights is to measure speed-performance of your website for desktop as well as mobile devices and then renders you optimization suggestions accordingly. These recommendations are good indicators to speed up your site, but you are not required to follow these rules strictly.
Precisely, for your visitors, the overall experience matters and that just not only includes Speed. For that, you need to render them relevant information, appealing user interface and engaging content with the use of interactive images and videos. Your aim should be to create not only a fast website but a site which is fast with a rich user experience.
Fix CSS and Render-Blocking Scripts with Autoptimize
To use this most recommended method:
- first, you must install as well as activate the Autoptimize plugin.
- Once activated, visit the Settings >> Autoptimize page and configure the settings of the plugin.
- Start this step by checking the box that is next to CSS options and JavaScript options and then click on the button of ‘save changes’.
- Now check the website speed by using PageSpeed tool, and in the case of facing render-blocking scripts, come back to the settings page of the plugin and click the top button of ‘Show Advanced Settings’.
- Here you may allow the plugin to remove scripts which are excluded by default and include inline JavaScript such as jquery.js or seal.js.
Now scroll down towards CSS option and let the plugin aggregate inline CSS. Save the changes and empty plugin cache by clicking on ‘save changes and empty cache’. Now go ahead and again check the website with Page Speed tool. Test the site thoroughly by optimizing CSS and JavaScript and by ensuring nothing is broken.
What did we do using Autoptimize tool?
Autoptimize aggregates all CSS and JavaScript. With that, it:
- Creates JavaScript and minified CSS files
- And also serves cached copies, as deferred or async, to your website.
While using Autoptimize can affect the appearance and performance of your site, this allows you to fix the style issues along with render-blocking scripts successfully.
Fix Render-Blocking JavaScript and CSS with the help of W3 Total Cache
The method is recommended for users, who already use W3 Cache plugin for their websites. In this method, first, you must install as well as activate the plugin - W3 Total Cache.
- Next, you must visit Performance >> General Settings and scroll down towards Minify section.
- Check ‘Enable’ available next to Minify option and now select ‘Manual’ for the option of minify mode.
- Store the settings by clicking the button – save all settings.
Next, you must add the CSS and script that you wish to minify and get the URLs of all the stylesheets and scripts, that is render-blocking, with the help of Google Page Speed Insights tool.
In the suggestion section where it is written ‘Eliminate render-blocking JavaScript and CSS in above-the-fold content’ click the button ‘show how to fix’. This will display the list of stylesheets (CSS) and scripts. By taking your mouse over a script, you can see the full URL. You can select the URL and then copy the URL using the keyboard command.
Next, head over to the admin area of WordPress and go to Performance >> Minify page.
- First, you must add JavaScript files that you wish to minify.
- Now scroll down up to JavaScript section and under the ‘Operations in areas’, make the embed type ‘Non-blocking async’ for the section - <head>.
- Now click on ‘Add Script’ button and start adding the URLs of the script that you, in previous steps, copied from PageSpeed tool.
Once done, follow these simple steps:
- scroll down to the section of CSS and then click the button ‘Add a stylesheet’.
- Now add all the URLs CSS that you, in previous steps, copied from Page Speed tool.
Store your settings by clicking ‘Save settings and purge cache.’ Test your website performance again by visiting Google PageSpeed tool. Make sure to check the website thoroughly to ensure everything works fine.
Troubleshooting
Sometimes it can be challenging to completely fix all the CSS and JavaScript render-blocking script issues, as it depends on the usage of CSS and JavaScript by your WordPress themes and plugins. Above discussed tools also help in fixing the problem. However, your plugin may require certain scripts of different level of priority to work properly. In this situation, the solution given above, may break the plugin or make them behave unexpectedly.
Google may indeed show you some issues such as optimizing CSS delivery about above-the-fold content. On the other hand, Autoptimize let you fix that manually by adding the inline CSS that is required to render the above fold area of the theme.
However, this might be difficult to accurately find out the CSS code that you must use to render above-the-fold content. And on that note, this is all you need to fix these speed blocking issues. The methods discussed in this article will help you in render-blocking JavaScript and CSS fixation issues in WordPress like a pro!
