使用PageSpeed消除jQuery的渲染阻止JavaScript

Question

我在页面底部添加了jQuery。但是，当我在pagespeed洞察（移动）上运行我的网站时，我收到错误：

  

在首屏内容中消除渲染阻止JavaScript和CSS   您的页面有2个阻止脚本资源和1个阻止CSS   资源。

     

这会导致呈现页面的延迟。没有任何一个   您可以在不等待的情况下呈现页面上的首屏内容   用于加载以下资源。

     

尝试推迟或异步   加载阻塞资源，或内联其中的关键部分   资源直接在HTML中。

请参阅：http://learnyourbubble.com和https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Flearnyourbubble.com&tab=mobile

但是，jQuery添加在页面底部。所以它应该低于一点。

如何删除此错误？

Answer 1

它与您的字体文件有关。

在瀑布中查看请求19和20。这些字体文件被认为是CSS。

注意在加载字体文件之后，第一次绘画（绿色垂直线）是怎么发生的？

然后注意15个JS文件是在字体（CSS）文件之前加载的。

这就是谷歌正在采取的措施。

拥有16个JS文件已经过分了。

试试这个：在浏览器中禁用JavaScript。请注意，唯一的更改是在菜单标题中。 16个JS文件值得吗？我想不是。

Answer 2

本文应该解释很多正在发生的事情：https://varvy.com/pagespeed/critical-render-path.html

简而言之，问题是chrome需要加载你的jquery和你的基础javascript来给出页面的初始渲染。这就是它阻塞的原因。仅仅因为javascript来自html，并不意味着html可以显示。在加载jquery / foundation时，DOM的呈现仍然会被阻止，因为chrome认为它们对于正确显示的页面至关重要。 Pagespeed抱怨这些特别是因为它们很大。为了缓解这个问题，你可以做一些事情，其中​​一些在上面的文章中有详细介绍，其中一些在这里https://developers.google.com/speed/docs/insights/BlockingJS。告诉chrome这些脚本不是至关重要且可以加载的最简单方法＃＆＃34;是向他们添加defer或async标记。

Answer 3

您是否尝试过加载异步

  

使JavaScript异步默认情况下，JavaScript会阻止DOM   施工因此延迟了首次渲染的时间。阻止   阻止解析器的JavaScript我们建议使用HTML异步   外部脚本的属性。例如：

     

<script async src="my.js">

     

See Parser Blocking vs. Asynchronous JavaScript了解详情   异步脚本。请注意，异步脚本不是   保证按指定顺序执行，不应使用   document.write。依赖于执行顺序或需要的脚本   访问或修改页面的DOM或CSSOM可能需要重写   考虑到这些限制。

Answer 4

我看到一个错误调用foundation（），但我会假设您已将其删除以排除它，但可能是在加载之前发生了同样的调用。尝试始终将您的代码包括在内：

{{1}}

Answer 5

请尝试使用延迟标签，它正在为我工​​作。

<script src="filename.js" defer>