Question

我觉得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 Link放在Code的脚下。但谷歌仍然大喊'首映内容'!!并且，推迟CSS会搞乱初始渲染，页面看起来就像一个乞丐，直到整个东西被加载！

我知道他们说......'内联关键在CSS之上'，并推迟所有其他内容。获得正确的方法仍然是一种令人沮丧的努力。

我的查询是，如果我让CSS出现在头部，是否会影响我的搜索引擎优化？并忽略“首要问题”？因为这样即使加载需要时间，至少它像一个体面的页面加载！无论如何，我的CSS并不大。

第二个问题是js。我无法让像min.js这样的CDN js被兑现或延期......尝试我可能的任何事情......

总结基本问题 - 优化CSS和JS for SEO的快速，简单和最好的事情是什么？哪些是跨平台/浏览器友好的，是否真的是一个大问题？!!

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

Answer 1

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

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

接下来你需要同样冷静对此的SEO影响。速度对用户很重要，因此搜索引擎会将速度作为众多因素之一。所以，改善它可以改善SEO。但实际上还有数以百计的其他因素，所以不要太依赖它们而不利于你希望你的视力如何发挥作用。例如，如果重构您的代码以加入网页洞察所建议的每一次速度提升，您的网页加载时间会缩短0.1秒，但意味着发布内容现在需要软件开发人员一周的时间来完成它然后我会说你的平衡错了。速度通常起到负面影响而不是积极影响：没有人去一个没有有趣内容的快速网站，但无论内容多么有趣，人们都会被一个缓慢的网站推迟。

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

基本上，当遇到CSS时，CSS会进行渲染阻止。惯例是将其放在<HEAD>标记中，因此它是因此而加载的第一件事之一。如果页面会引起闪烁的无格式内容（FOUC），请将其置于页脚，尽管某些浏览器可能足够聪明，无论如何都要将其呈现，直到它被加载为止。所以基本上没有帮助。

将其从标准HTML链接转移到javascript加载，而不是强制执行此操作。所以也没有帮助。

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

网页洞察通常意味着通过在<HEAD>标记中直接内联您的关键CSS，在<STYLE>标记中包含实际的CSS，然后异步加载完整的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异步（除非它＆＃39） ;对您的页面至关重要）并了解如何改善加载时间。然后考虑内联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上面一个必要的邪恶？

1 个答案: