PageSpeed Insights低分。 1阻止CSS资源

Question

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

Answer 1

仅仅缩小CSS通常不足以提高页面速度。页面速度更喜欢涉及内容“首屏”（前600px）内部的CSS（即加载到标签中）。在最重要的ATF内容之后，应该推迟所有其余的CSS加载。

请参阅giftofspeed的这个例子

• 问：我应该延迟加载哪些CSS文件？
• 答：您应该推迟加载阻止页面呈现的所有CSS文件。
• 答：不要推迟加载中小型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>