This is what Google says for CSS:
This rule triggers when PageSpeed Insights detects that a page includes render blocking external stylesheets, which delay painting of content to the screen.
So,What is the solution?
1.Do what Google says, Inline the important sections(Not possible here).
2.Load the Files Asynchronously.
What’s the Aim and is it Possible to achieve?
Before we move, we should know what is our aim and what google says. As I said above google wants content above the fold should be shown to a user without waiting for these files to be downloaded means the aim is to reduce the waiting time, Remember the aim is to reduce waiting time, not to get a better Pagespeed score.
Remember It’s always about Improving User Experience.
Is it Possible?
Yes it is if you wish to reduce waiting time but in case if you wish to improve pagespeed score may be or may be not,depends on some factors.
Using W3 Total Cache
Fixing the issues using w3 Total Cache (we have written the settings for W3 Total Cache Plugin)
1. Navigate to Performance (i.e, W3 total cache) > minify tab,
Using Speed Booster Pack
- Install plugin “Speed Booster Pack” from WordPress Plugin Directory.
- Now Navigate to Settings > Speed Booster Pack
- Now move on to end of page, expand the option “Still need more speed?” and enable option “load CSS asynchronously”, this will remove the CSS part error.
- You are done.
Their is one more plugin you can use i.e, “Speed Booster Pack” Download it from Here. But remember it has not been updated from a year now still you can give it a try.
Settings for plugin:
2.Detect <script> tags in wp_head: Disable
3.Detect <script> tags in wp_footer: Disable
4.Load CSS asynchronously: Enable
5.CSS loading method: Leave as it is
6.Minify CSS: Enable
7.Remove “?ver=XXX” part from URLs: Enable
You are done.
Abhijit is a Certified Digital Marketer and passion-driven creative individual based in Maharashtra (Karad). He is also Freelance Blogger, Enterprenuer and Webmaster.