首屏 CSS 是必要的邪恶吗？ [关闭]答案

【问题标题】：Above the fold CSS a necessary evil? [closed]首屏 CSS 是必要的邪恶吗？ [关闭]
【发布时间】：2016-07-31 18:46:09
【问题描述】：

我发现 Google Pagespeed Insight 有时很可笑。它说，优化 CSS 交付......说延迟脚本，移动到页脚，内联样式等等等......虽然一直有很多建议说不要内联 CSS。不管怎样，我尝试了他们的脚本

 </noscript>
 <script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
 </script>

我还尝试将 CSS 链接放在代码的底部。但谷歌仍然大喊“首屏内容”！！而且，延迟 CSS 会打乱初始渲染，页面看起来像个乞丐，直到整个加载完成！

我知道他们说...'inline critical above the fold CSS' 并推迟所有其他内容。获得正确的方法仍然是一项令人沮丧的工作。

我的问题是，如果我让 CSS 出现在 head 部分，它会影响我的 SEO 吗？并忽略“首屏”问题？因为那样即使加载需要时间，至少它加载得像一个像样的页面！反正我的 CSS 不大。

第二个问题是js。我无法将 min.js 之类的 CDN js 兑现或延期...尽我所能...

总结基本问题 - 为 SEO 优化 CSS 和 JS 的快速、简单和最佳的方法是什么……以及哪些将是跨平台/浏览器友好的，这是否真的是一个大问题？！！

我的网站是 www.landshoppe.com 供您参考

【问题讨论】：

标签： javascript css optimization seo google-pagespeed

【解决方案1】：

好的，这里有一些事情要做。

首先，您需要将页面速度洞察等工具告诉您的建议作为建议。它们是自动工具，可以进行一些基本分析并建议潜在的改进。这并不是说它们 100% 准确或适合您的网站。

接下来，您需要同样冷静地看待这对 SEO 的影响。速度对用户很重要，因此搜索引擎确实将速度作为众多因素之一。所以是的，改进它可以改进 SEO。但是实际上还有数百个其他因素，所以不要太拘泥于一个，而这会损害你希望你的视力如何工作。例如，如果重构您的代码以考虑网页洞察力建议的每一个速度改进将您的网络加载时间缩短了 0.1 秒，但意味着现在发布内容需要软件开发人员 1 周的时间来完成，那么我会说你有天平不对。速度通常会产生负面影响而不是正面影响：没有人会访问没有有趣内容的快速网站，但无论内容多么有趣，人们都会被速度慢的网站推迟。

然后是浏览器处理内容的方式。这是一个复杂的话题，有许多微妙之处和细微差别，但请将此作为快速粗略的介绍：

基本上，CSS 在遇到时会阻塞渲染。约定是将其放在<HEAD> 标记中，因此它是出于这个原因首先加载的内容之一。如果页面会导致无样式内容 (FOUC) 的闪烁，则将其放在页脚，尽管某些浏览器可能足够聪明，可以在加载之前一直渲染它。所以基本上这没有帮助。

将其从标准 HTML 链接移至 javascript 加载只是强制执行此操作。所以也没有用。

Javascript 类似地呈现阻塞（除非它被标记为异步），更糟糕的是 - 浏览器在继续之前等待运行该 javascript 以查看它对文档的作用，因为它很可能会完全改变页面，所以没有必要继续直到我们知道它会做什么。

网页洞察之类的工具通常意味着通过在<STYLE> 标记中包含实际的 CSS 将您的关键 CSS 直接内联到 <HEAD> 标记中，然后异步加载完整的 CSS 文件（即在非通过javascript渲染阻塞时尚）。您似乎只完成了后面的部分，而不是两个部分 - 因此浏览器无法尽可能快地绘制内容，如果确实如此，它最初显示为无样式。请注意，内联 CSS 有一些缺点（请参阅 my blog post on this，如果这看起来不是太无耻的插件！）。

您的网站加载速度相当快（根据www.webpagetest.org，为 3.5 秒）。它可以改进，理想情况下你应该在两秒内 - 虽然如果你能得到它，那么速度越快越好（注意上面的警告，它不是全部并结束所有的一切）。

查看your page load waterfall，您正在加载 HTML，然后是图像，然后是渲染阻塞 JS，然后是第一次绘制页面，然后加载 CSS，最后完全加载页面。这是错误的。首先加载对您的页面至关重要的内容（即您的 HTML、您的 CSS 和可能是您的字体），并留下好东西（即您的图像和您的 javascript），直到假设它们对页面的第一次视图不是超级关键。

我建议回到常规的 CSS 文件链接 - 在您的 <HEAD> 标签中，在您的 jpg 文件之前（因此它们被优先考虑），使您的 JS 异步（除非它对您的页面很重要） ) 并查看如何改善加载时间。然后考虑内联 CSS（良好的性能优势，但如上所述的一些缺点并增加了复杂性）。

要让你的 JS 异步，只需改变这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript"></script>

到这里：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" data-pagespeed-orig-type="text/javascript" async></script>

还要考虑 HTTP/2，它可以减少 HTTP/1.1 典型的瀑布问题的影响 - 但这是一项相当新的技术，只有最新版本的 Web 服务器支持，并且还需要您的站点尚未使用的 HTTPS，所以这是一个相当不错的技术目前的高级主题。

【讨论】：

哇。这是一些不错的解释，@Bazza！谢谢。这对我来说很有意义！我正在考虑将 CSS 移回头部。无论如何，Internet Explorer 根本就没有渲染我的 CSS！我肯定会按照你上面所说的来更新你。再次感谢！
我已将 CSS 链接移至头部。但是我不得不删除
如我的回答中所述，如果您使用的是 deferred-styles 脚本，那么您应该使用直接内联 CSS 单独加载关键 CSS。延迟加载适用于非关键 CSS。 NoScript 标签是不能使用 javascript 的浏览器的后备标签。老实说，不确定为什么它在 IE 中不起作用。
嗨，Bazza，只是为了更新你...我有一个 loadCSS 脚本，它在延迟 CSS 文件时效果很好，我还内联了一些样式。现在我在 google pagespeed 上有 95 分。我从这里得到了脚本stackoverflow.com/questions/18761251/…