Google PageSpeed 得分 - 1 渲染阻塞 CSS 文件答案

【问题标题】：Google PageSpeed score - 1 Render Blocking CSS fileGoogle PageSpeed 得分 - 1 渲染阻塞 CSS 文件
【发布时间】：2016-11-20 21:58:28
【问题描述】：

我有一个 Wordpress 网站。尝试使用 Google PageSpeed Insights Tool 获得 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 文件。

我可以去掉最后一条通知吗？

【问题讨论】：

可能重复stackoverflow.com/questions/18013648/…
通过将所有 CSS 合并到一个文件中，该 CSS 修改的每一件小事（甚至是您在到达您的网站时看不到的内容）都会被“解释”。我的猜测是，您必须加载仅包含对可见页面内联而不是文件重要的内容的 CSS（修改首屏内容）
您可以参考varvy.com/pagespeed/render-blocking-css.html。希望这能帮助你提高。
观看《卫报》的 Supercharged 剧集。他解释了为什么你使用 CSS 的内联块来处理首屏内容。 youtube.com/watch?v=obtCN3Goaw4

标签： javascript php html css google-pagespeed

【解决方案1】：

试试这样的：

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

应该有帮助

【讨论】：

【解决方案2】：

这将消除“Render Blocking 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>

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

【讨论】：