首屏 CSS 必要之恶？

Question

我发现 Google Pagespeed Insight 有时很可笑。它说，Optimize CSS delivery....说延迟脚本，移动到页脚，内联样式等等等等....尽管一直有很多建议说不要内联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 Link 放在代码的底部。但是Google还是会喊'Above the fold content'！！而且，延迟 CSS 会打乱初始渲染，页面看起来像个乞丐，直到整个页面加载完成！

我知道他们说...'inline critical above the fold CSS' 并推迟所有其余部分。获得正确的方法仍然是一个令人沮丧的努力。

我的问题是，如果我让 CSS 位于标题部分，它会影响我的 SEO 吗？并忽略 'Above the fold' 问题？因为这样即使加载需要时间，至少它加载得像一个像样的页面！反正我的CSS也不大

第二期是js。我无法让像 min.js 这样的 CDN js 兑现或延期...尽我所能...

总结基本问题 - 优化 CSS 和 JS 的 SEO 的快速、简单和最好的方法是什么...哪个会交叉 platform/browser 友好，是否真的如此大问题？！！

我的站点www.landshoppe.com供大家参考

Answer 1

好的，你这里发生了一些事情。

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

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

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

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

将其从标准 HTML 链接移至 javascript 加载只是强制执行此操作。所以也无济于事。

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

网页洞察之类的工具通常意味着通过将实际的 CSS 包含在 <STYLE> 标签中，将您的关键 CSS 直接内嵌在 <HEAD> 标签中然后通过 javascript 异步加载完整的 CSS 文件（即以非渲染阻塞方式）。您似乎只完成了后面的部分而不是两个部分 - 因此浏览器无法尽可能快地绘制内容，如果可以，它最初显示为无样式。请注意，内联 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，您的站点还没有使用，所以目前是一个相当高级的话题。

首屏 CSS 必要之恶？

Above the fold CSS a necessary evil?

javascript

css

optimization

seo

google-pagespeed