PageSpeed Insights 低分。 1个阻塞CSS资源答案

【问题标题】：PageSpeed Insights low score. 1 blocking CSS resourcePageSpeed Insights 低分。 1个阻塞CSS资源
【发布时间】：2018-03-06 13:47:44
【问题描述】：

我在 PageSpeed Insights 中收到以下错误。我进入了 Minify “手动”模式并添加了以下 CSS。但谷歌仍然抱怨 CSS 。我的分数只有 64/100。请帮忙。

您的网页有 1 个阻塞的 CSS 资源。这会导致呈现页面的延迟。如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在 HTML 中内联这些资源的关键部分。优化以下 CSS 交付： https://www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css

【问题讨论】：

您找到解决方案了吗？
你在用wordpress吗？我发现有人可以通过 wordpress 获得 100/100。检查 PageSpeed 分数 here。他详细解释了here他为实现这一目标所做的工作。
查看这里stackoverflow.com/questions/18013648/… 了解有关此问题的更多想法。

标签： pagespeed google-pagespeed

【解决方案1】：

仅仅缩小 CSS 通常不足以获得页面速度洞察。页面速度更喜欢涉及内容“首屏”（顶部 600 像素）的 CSS 是内部的（即加载到标签中）。所有其余的 CSS 都应该延迟到最重要的 ATF 内容之后加载。

从giftofspeed查看这个例子

问：我应该延迟加载哪些 CSS 文件？
答：您应该推迟加载所有阻碍您的页面呈现的 CSS 文件。
答：不要延迟加载中小型 CSS 脚本。在页面速度方面，您将从内联所有 CSS 中受益更多。

用于延迟 CSS 文件的 JavaScript sn-p：

<script type="text/javascript">
/* First CSS File */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);

/* Second CSS File */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>

<noscript>
<link rel="stylesheet" type="text/css" href="../css/yourcssfile.css" />
<link rel="stylesheet" type="text/css" href="../css/yourcssfile2.css" />
</noscript>

【讨论】：

这只会优化首页的CSS。网站上的所有其他页面仍然存在渲染阻止问题。