使用 PageSpeed 消除 jQuery 的呈现阻塞 JavaScript

Question

我在页面底部添加了 jQuery。但是，当我在 pagespeed insights (Mobile) 上运行我的网站时，出现错误：

消除首屏内容中的渲染阻塞 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

它与您的字体文件有关。

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

请注意第一次绘制（绿色垂直线）是如何在字体文件加载后才发生的？

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

这就是谷歌正在做的事情。

拥有 16 个 JS 文件实在是太过分了。

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

原文由 Misunderstood 发布，翻译遵循 CC BY-SA 3.0 许可协议