Nginx – ngx_pagespeed prioritize_critical_css still render-blocking

mod-pagespeednginx

I'm using ngx_pagespeed to prioritize critcal css, to avoid render-blocking: 

pagespeed EnableFilters prioritize_critical_css;

The CSS in the page gets rewritten. I see inlined CSS in the head and the end of the document has JavaScript to fetch the full CSS file after pageload:

<noscript class="psa_add_styles"><link rel="stylesheet" type="text/css" href="//<snip>/A.057d0b965aad0c0050fe7a0f69b3c864.1484761003.css.pagespeed.cf.oDO-xbYwbq.css" media="all"/></noscript><script data-pagespeed-no-defer type="text/javascript">(function(){function b(){var a=window,c=e;if(a.addEventListener)a.addEventListener("load",c,!1);else if(a.attachEvent)a.attachEvent("onload",c);else{var d=a.onload;a.onload=function(){c.call(this);d&&d.call(this)}}};var f=!1;function e(){if(!f){f=!0;for(var a=document.getElementsByClassName("psa_add_styles"),c=0,d;d=a[c];++c)if("NOSCRIPT"==d.nodeName){var k=document.createElement("div");k.innerHTML=d.textContent;document.body.appendChild(k)}}}function g(){var a=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||null;a?a(function(){window.setTimeout(e,0)}):b()}
var h=["pagespeed","CriticalCssLoader","Run"],l=this;h[0]in l||!l.execScript||l.execScript("var "+h[0]);for(var m;h.length&&(m=h.shift());)h.length||void 0===g?l[m]?l=l[m]:l=l[m]={}:l[m]=g;})();
pagespeed.CriticalCssLoader.Run();</script></body>

However, even with this setup, PageSpeed Insights is still reporting the CSS file fetched by the JavaScript above as render-blocking:

render-blocking css

Am I missing something, or should this CSS file not be considered to block rendering?

Best Answer

The issue here seems to be that prioritize_critical_css requires 3 pageloads to instrument itself and generate and then inline optimized CSS. PageSpeed Insights is not getting the optimized CSS on its first run, even if I've primed the pagespeed cache on my server by loading the page three times. I guess this is because PageSpeed Insights is using a different user-agent or viewport size and ngx_pagespeed isn't serving up the cached results it returns when I load the page myself.

So, the solution seems to be to run PageSpeed Insights three times, 30 seconds apart (since results are cached for 30s). After that, the render-blocking CSS issue goes away.

Related Topic