Google PageSpeed score - 1 Render Blocking CSS file

1
votes

I have a Wordpress website. Trying to get a 100/100 score with the Google PageSpeed Insights Tool and am stuck on 1 'error'. Google says;

Eliminate render-blocking JavaScript and CSS in above-the-fold content Your page has 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Optimize CSS Delivery of the following: http://www.theoriereservering.nl/wp-content/themes/TESSERACT/style.css Blockquote

Style.css is the first file loaded and is internal, I used style.css to combine all the other css files, and now style.css is the only render blocking css file left.

Can I get rid of this last notification?

2
javascriptphphtmlcssgoogle-pagespeed
possible duplicate stackoverflow.com/questions/18013648/… - Ismail Farooq
By combining all CSS into only one file, every little thing modified by this CSS (even the things that you can't see when arriving on your website) is "interpreted". My guess, you would have to load the CSS that only contains the things that are important to your visible page inline instead of file (that modify the above-the-fold content) - jquiaios
You can refer varvy.com/pagespeed/render-blocking-css.html. Hope This will help you to improve. - Vishal Panara
Watch the Supercharged episode on The Guardian. He explains why you use inline blocks of CSS for above the fold content. youtube.com/watch?v=obtCN3Goaw4 - Tom

2 Answers

0
votes

This will remove Google Pagespeed error of "Render Blocking CSS" :

Add your above the fold styles inline in the page in style tags and put the rest in your style.css file and defer it with javascript like...

<script stype="text/javascript">
function loadCSS(href){
var ss = window.document.createElement('link'),
ref = window.document.getElementsByTagName('head')[0];
ss.rel = 'stylesheet';
ss.href = href;
// temporarily, set media to something non-matching to ensure it'll
// fetch without blocking render
ss.media = 'only x';
ref.parentNode.insertBefore(ss, ref);
setTimeout( function(){
// set media back to `all` so that the stylesheet applies once it loads
ss.media = 'all';
},0);
}
loadCSS('style.css');
</script>

<noscript>
<!-- Let's not assume anything -->
<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
</noscript>

and/or put it at the footer of the page