☰

ngx_pagespeed priorityize_critical_css 仍然阻止渲染

tag-icon • tag-icon nginx mod-pagespeed
ngx_pagespeed priorityize_critical_css 仍然阻止渲染

我正在使用 ngx_pagespeed 来优先处理关键的 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 文件报告为阻止渲染：

阻止渲染的 CSS

我是否遗漏了什么，或者这个 CSS 文件不应被视为阻止渲染？

答案1

这里的问题似乎是prioritize_critical_css需要 3 次页面加载才能自行检测并生成内联优化的 CSS。PageSpeed Insights 在第一次运行时没有获得优化的 CSS，即使我通过三次加载页​​面在服务器上准备好了 PageSpeed 缓存。我猜这是因为 PageSpeed Insights 使用了不同的用户代理或视口大小，而 ngx_pagespeed 没有提供我自己加载页面时返回的缓存结果。

因此，解决方案似乎是运行 PageSpeed Insights 三次，每次间隔 30 秒（因为结果缓存 30 秒）。此后，渲染阻塞 CSS 问题便会消失。

相关内容