我使用ngx_pagespeed优先考虑critcal css,以避免渲染阻塞:
pagespeed EnableFilters prioritize_critical_css;
页面中的CSS被重写。 我在头部看到了内联的CSS,文档的末尾有一个JavaScript,用于在页面加载完后获取完整的CSS文件:
<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>
但是,即使使用此设置,PageSpeed Insights仍然会将上述JavaScript提取的CSS文件报告为render-blocking:
我是否错过了一些东西,或者不应该考虑这个CSS文件来阻止渲染?
这里的问题似乎是, prioritize_critical_css需要3个页面加载来自我testing,然后生成并内联优化的CSS。 PageSpeed Insights在第一次运行时没有获得优化的CSS,即使我已经通过加载页面三次来启动我的服务器上的pagespeedcaching。 我想这是因为PageSpeed Insights使用的是不同的用户代理或视口大小,ngx_pagespeed没有提供我自己加载页面时返回的caching结果。
所以,解决scheme似乎是三次运行PageSpeed Insights,间隔30秒(因为结果caching了30秒)。 之后,渲染阻塞CSS问题就消失了。