Javascript 这是一个必要的罪恶吗？

我觉得谷歌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>

var loadDeferredStyles=函数（）{
var addStylesNode=document.getElementById（“延迟样式”）；
var替换=document.createElement（“div”）；
replacement.innerHTML=addStylesNode.textContent；
document.body.appendChild（替换）
addStylesNode.parentElement.removeChild（addStylesNode）；
};
var raf=requestAnimationFrame | | mozRequestAnimationFrame||
webkitRequestAnimationFrame | | msRequestAnimationFrame；
if（raf）raf（function（）{window.setTimeout（loadDeferredStyles，0）；}）；
else窗口。addEventListener（'load'，loadDeferredStyles）；

我还尝试将CSS链接放在代码的底部。但谷歌仍然大喊“超越内容”！！而且，推迟CSS会弄乱最初的呈现，页面看起来就像一个乞丐，直到整个东西加载完毕

我知道他们说…“内联关键高于折叠CSS”，并推迟所有其他内容。然而，要找到正确的方法仍然是一项令人沮丧的工作

我的问题是，如果我让CSS出现在标题部分，它会影响我的SEO吗？而忽略了“高于折叠”的问题？因为这样即使加载需要时间，至少加载起来像一个不错的页面！无论如何，我的CSS不是很大

第二个问题是js。我无法让像min.js这样的CDN js兑现或延期…请尝试我所能做的一切

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

---

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

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

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

下一步，你需要冷静下来，同样对搜索引擎优化的影响。速度对用户来说很重要，所以搜索引擎将速度作为众多因素之一。所以，是的，改进它可以提高搜索引擎优化。但事实上还有数百个其他因素，所以不要太在意其中一个，以免影响你的视力。例如，如果重构你的代码，将网页洞察建议的每一项速度改进都纳入其中，将你的网页加载时间提高了0.1秒，但这意味着现在发布内容需要软件开发人员花1周的时间，那么我会说你的平衡错了。速度通常是一种消极影响，而不是积极影响：没有人去一个没有有趣内容的快速网站，但是人们会被一个缓慢的网站所拖累，不管内容有多有趣

然后是浏览器如何处理内容。这是一个复杂的话题，有许多微妙之处，但请将此作为一个简短的介绍：

基本上，遇到CSS时，它是渲染阻塞。惯例是将它放在

标记中，因此它是为此而加载的第一件东西之一。如果页面会导致未设置样式的内容（FOUC）闪烁，则将其放在页脚上，尽管某些浏览器可能足够聪明，能够在加载之前一直呈现该页面。所以基本上这没用

将其从标准HTML链接移动到javascript加载，只会强制执行这一点。所以也没用

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

像web page insights这样的工具通常意味着将关键CSS直接内联到

标记中，方法是将实际CSS包含在

标记中，然后通过javascript异步加载完整的CSS文件（即以非渲染阻塞方式）。您似乎只完成了后面的部分，而不是这两部分-因此，浏览器无法尽可能快地绘制内容，如果可以，则最初显示为未设置样式。注意，内联CSS有一些缺点（看看这看起来是否不是一个无耻的插件！）

你的网站加载速度相当快（根据数据为3.5秒）。它可以改进，理想情况下，你应该在两秒钟内完成——但如果你能在这两秒钟内完成，速度越快越好（注意上面的警告，这不是一切的全部和结束）

看看你正在加载你的HTML，然后是你的图像，然后是你的渲染块JS，然后第一次绘制页面，然后加载CSS，最后完全加载页面。这是错误的。首先加载对页面至关重要的内容（即HTML、CSS，可能还有字体），并将“好东西”（即图像和javascript）保留到假定它们对页面的第一次查看不是超级重要之后

我建议回到常规CSS文件链接——在你的

标签中，在你的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服务器支持并且还需要HT。