使用PageSpeed来消除jQuery的渲染阻塞JavaScript

Question

我在页面底部添加了jQuery。然而，当我在移动版的pagespeed insights上运行我的网站时，我收到以下错误信息：

消除位于以上折叠内容的渲染阻塞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被添加在页面底部，因此应该位于折叠后。
该如何解决这个错误？

- Yahya Uddin

---

请查看此源代码：https://kinsta.com/blog/eliminate-render-blocking-javascript-css/#settings_saved - Accountant م

Answer 1

这与你的字体文件有关。
在瀑布流中查看请求19和20。这些字体文件被视为CSS。
请注意，首次绘制（绿色垂直线）直到字体文件加载后才会发生。
然后请注意，在字体（CSS）文件之前加载了15个JS文件。
这就是Google所说的。
拥有16个JS文件已经过度了。
尝试这个：在浏览器中禁用JavaScript。请注意，唯一的变化是菜单标题。值得使用16个JS文件吗？我认为不值得。

- Misunderstood

Answer 2

这篇文章应该可以解释很多事情：https://varvy.com/pagespeed/critical-render-path.html 简而言之，问题在于Chrome需要加载您的jquery和Foundation JavaScript以给出页面的初始渲染。这就是为什么会出现阻塞的情况。仅仅因为JavaScript在HTML之后，不意味着HTML就能被显示出来。DOM的渲染仍然会受到阻碍，而jquery/foundation正在加载中，因为chrome认为它们对于正确显示页面至关重要。Pagespeed特别抱怨这些内容，因为它们比较大。为了缓解这个问题，有几件事情可以做，其中一些在上面的文章中详细介绍，还有一些在这里：https://developers.google.com/speed/docs/insights/BlockingJS。告诉Chrome这些脚本不是必须的，并且可以在“below the fold”中加载的最简单方法是为它们添加defer或async标记。

- jpopesculian

---

我不确定你的意思，因为它实际上是在抱怨jquery.min.js、foundation.min-b3d0e64456.js和style-3cc919a01d.css。我理解为什么会抱怨style.css，但我不明白为什么会抱怨其他两个js文件，因为它们都在页面末尾。我在问题中添加了一个PageSpeed链接，请记住我正在查看“移动”选项卡。 - Yahya Uddin

你说得完全正确！我的回答与实际问题毫无关系。我进行了快速编辑并提供了一些资源。 - jpopesculian

Answer 3

我看到一个调用foundation()的错误，但我假设你已经删除它以排除这个问题，但可能是因为在加载之前发生了同样的调用。尝试始终像这样包含您的代码：

(function($) {
   // DOM ready
})(jQuery);

- Dylan

Answer 4

你尝试过异步加载吗？

通过默认设置，JavaScript会阻塞DOM的构建，从而延迟首次渲染时间。为了防止JavaScript阻塞解析器，我们建议在外部脚本上使用HTML async属性。例如：

<script async src="my.js">

查看阻止解析器与异步JavaScript 以了解更多关于异步脚本的信息。请注意，异步脚本不能保证按指定顺序执行，并且不应使用document.write。依赖于执行顺序或需要访问或修改页面的DOM或CSSOM的脚本可能需要重新编写以考虑这些限制。

- NooBskie

Answer 5

请尝试使用defer标签，这对我有效。

<script src="filename.js" defer>

- Rajesh Yogi