Javascript-折叠CSS上方是否必要？

我有时觉得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会使初始呈现变得混乱,直到加载整个页面为止,页面看起来就像是乞!！

我知道他们说…’在折叠CSS之上是行内关键’,并推迟其余所有工作.仍然很难获得正确的方法.

我的查询是,如果我让CSS放在头部会影响我的SEO吗？并忽略“折叠后”问题？因为这样一来,即使需要花费一些时间来加载,至少也可以像加载一个体面的页面一样加载！无论如何,我的CSS并不庞大.

第二个问题是js.我无法让CDN js(如min.js)兑现或延期…请尽我所能…

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

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

解决方法:

好的,您这里发生了一些事情.

首先,您需要采用诸如页面速度洞察之类的工具作为建议.它们是自动工具,可以进行一些基本分析并建议可能的改进.这并不是说它们是100％准确或适合您的网站.

接下来,您需要对SEO的影响进行类似的调整.速度对用户很重要,因此搜索引擎将速度作为许多因素之一.因此可以改进它可以改善SEO.但是实际上还有其他数百个因素,所以不要太挂在了一个上,以至于不利于您希望视线如何工作.例如,如果重构代码以利用网页洞察力建议的每一次速度改进,可以将您的网络加载时间缩短0.1秒,但是现在发布内容需要软件开发人员花1周的时间来完成,那么我想您已经平衡不对.速度通常是负面影响,而不是正面影响：没有人去一个没有有趣内容的快速网站,但是无论内容多么有趣,人们都会被一个缓慢的网站所吸引.

然后是浏览器如何处理内容.这是一个复杂的主题,包含许多细微的差别,但可以将其作为快速粗略的介绍：

基本上,CSS在遇到时会阻止渲染.习惯上将其放在< HEAD>标签,因此它是为此原因而首先加载的内容之一.如果某些页面可能会聪明地保留它直到呈现出来,直到页面被加载,但如果页面将引起页面样式的闪烁(FOUC),则将其放到页脚.所以基本上这没有帮助.

而是将其从标准HTML链接移至javascript负载,而是强制执行此操作.因此也无济于事.

Javascript同样具有渲染阻止功能(除非将其标记为异步),更糟糕的是-浏览器在继续运行之前会等待运行该JavaScript以查看其对文档的作用,因为它很可能会完全更改页面,因此直到我们知道该内容之前都没有继续它会做的.

网页洞察功能之类的工具通常通常是在< HEAD>中直接插入关键CSS.标签,方法是将实际CSS包含在< STYLE>中.标签,然后通过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,因此,这是一个非常高级的主题.此时此刻.

原文地址：https://codeday.me/bug/20191026/1939427.html

Javascript-折叠CSS上方是否必要？

相关推荐