Назад | Перейти на главную страницу

ngx_pagespeed Prioritize_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 по-прежнему сообщает о файле CSS, полученном указанным выше кодом JavaScript, как о блокировке рендеринга:

Мне что-то не хватает, или этот файл CSS не следует рассматривать как блокирующий рендеринг?

Проблема здесь в том, что prioritize_critical_css требует 3 загрузки страниц для инструментария и генерации, а затем встраивания оптимизированного CSS. PageSpeed ​​Insights не получает оптимизированный CSS при первом запуске, даже если я активировал кеш скорости страниц на моем сервере, загрузив страницу три раза. Я предполагаю, что это связано с тем, что PageSpeed ​​Insights использует другой пользовательский агент или размер области просмотра, а ngx_pagespeed не обслуживает кешированные результаты, которые он возвращает, когда я сам загружаю страницу.

Итак, решение, похоже, состоит в том, чтобы запустить PageSpeed ​​Insights три раза с интервалом в 30 секунд (поскольку результаты кешируются на 30 секунд). После этого проблема CSS, блокирующая рендеринг, исчезает.