Question

我有一个Wordpress网站。尝试使用Google PageSpeed Insights工具获得100/100分，并且卡在1'错误'上。谷歌说;

在首屏内容中消除渲染阻止JavaScript和CSS 您的页面有1个阻止的CSS资源。这会导致呈现页面的延迟。在不等待加载以下资源的情况下，无法呈现页面上的上述内容。尝试推迟或异步加载阻止资源，或直接在HTML中内联这些资源的关键部分。优化以下的CSS交付： http://www.theoriereservering.nl/wp-content/themes/TESSERACT/style.css 块引用

Style.css是第一个加载的文件并且是内部的，我使用style.css来组合所有其他css文件，现在style.css是唯一的渲染阻塞css文件。

我能摆脱这最后的通知吗？

Answer 1

尝试类似的东西：

https://www.wpcub.com/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/

应该帮助

Answer 2

这将删除“渲染阻止CSS”的Google Pagespeed错误：

在样式标记的页面中将您的折叠样式内置添加到页面中，并将其余内容放在style.css文件中，并使用javascript将其推迟...

<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>

和/或将其放在页面的页脚

Google PageSpeed得分 - 1渲染阻止CSS文件

2 个答案: