使用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/ritic-render-path.html

简而言之，问题是 chrome 需要加载您的 jquery 和基础 javascript 来提供页面的初始渲染。这就是它被阻止的原因。仅仅因为 javascript 位于 html 之后，并不意味着 html 可以显示。在加载 jquery/foundation 时，DOM 的渲染仍然会被阻塞，因为 chrome 认为它们对于页面的正确显示至关重要。Pagespeed 抱怨这些尤其是因为它们很大。为了缓解这个问题，您可以采取一些措施，其中一些在上面的文章中有详细介绍，其中一些在此处https://developers.google.com/speed/docs/insights/BlockingJS。告诉 chrome 这些脚本并不重要并且可以在“首屏下方”加载的最简单方法是向它们添加defer或标签。async