4

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

4

1 回答 1

6

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

从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>
于 2015-02-16T03:57:01.917 回答