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.
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 offer 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 offer 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.
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 JS such as jquery.js or seal.js.
Now scroll down towards CSS option and let the plugin aggregate inline CSS.
What did we do using Autoptimize tool?
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.
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.
Next, head over to the admin area of WordPress and go to Performance >> Minify page.
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, scroll down to the section of CSS and then click the button ‘Add a stylesheet’. Now add all the URLs of stylesheets 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.
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 show the above fold area of the theme.