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

Question

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

您的页面有1个阻止CSS资源。这会延迟页面的呈现。 您页面上所有以上折叠内容都无法在等待以下资源加载后呈现。尝试推迟或异步加载阻止资源，或直接在HTML中内联关键部分的资源。 优化以下内容的CSS交付： https://www.northfloridacricket.com/wp-content/cache/minify/000000/4799b/default.include.4feacd.css

- Vijay Panneerselvam

---

你找到解决方案了吗？ - bernhardh

你在使用WordPress吗？我发现有人可以通过WordPress获得100/100的分数。在这里检查PageSpeed分数（https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.webdesignerland.com&tab=mobile）。他在这里详细解释了如何实现（http://kaspars.net/blog/wordpress/page-speed-score-100）。 - eQ19

查看此链接 https://dev59.com/oWMl5IYBdhLWcg3w7qlq 可获得有关此问题的更多想法。 - lafeber

Answer 1

仅简化CSS通常不足以提高页面速度洞察的得分。页面速度更喜欢涉及内容“above the fold”（顶部600像素）的CSS是内部的（即在标签中加载）。所有其他CSS应该被延迟加载，直到最重要的ATF内容加载完毕。

请参见giftofspeed的此示例。

Q：哪些CSS文件应该被延迟加载？ A：您应该延迟加载阻止页面呈现的所有CSS文件。 A：不要延迟加载小型或中型CSS脚本。从页面速度的角度来看，将所有CSS内联更有利。 延迟加载CSS文件的JavaScript代码片段：

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

- Tui Popenoe

---

这只优化了主页的CSS。网站上的所有其他页面仍然存在渲染阻塞问题。 - Jonas T