jquery - Google PageSpeed Insights 结果 jQuery 减慢加载速度

Question

我尝试通过应用 Google PageSpeed Insights 建议来加快我的网站速度，但有些事情对我来说没有意义。

我得到的结果:https://goo.gl/GSQ6Zs

它说，由于 jQuery，无法在没有延迟的情况下加载首屏内容，我的 jQuery 脚本引用放置在关闭 body 标记之前，真正有趣的是，如果我从 jQuery 文件复制/粘贴源代码并将其作为内联代码直接放入index.html中，它工作得很好，但这个解决方案对我来说看起来很脏。有哪些快速方法可以确定哪些 javascript/css 文件负责显示首屏内容？我还有很多 css 文件，检查每个文件并确定哪些部分负责确实很不方便。

欢迎提出建议

Answer 1

首先阅读两篇文章:

https://developers.google.com/speed/docs/insights/BlockingJS https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

您遇到的问题是以下文件:

渲染阻塞 Javascript

您可以采取一些措施来解决此问题，例如内联 JS、使用异步或在大多数情况下将您的 .js文件位于脚本底部的所有内容下方。

内联JS

只需使用 <script> 将文件中的 .js 复制到 .html 文件中周围有标签。

使用异步

如果您正在加载 jquery，我不建议这样做，因为它可能会在加载脚本之前尝试在您的页面上运行 jquery 代码，从而导致错误。

将脚本放在页面底部

虽然这不在 Google 页面上，但这样做通常可以解决您的问题，尽管仍然需要加载脚本才能使页面完全加载。有人可能需要纠正我这一点。

优化 CSS 交付

这几乎是为了让您在页面加载之前不会获取一堆单独的 css 文件。

内联CSS

将 css 复制并粘贴到 html 文件中似乎可以解决该问题，因为它会随着页面加载而加载。就我个人而言，我读到这可能会导致页面加载速度变慢，但它会给您带来更高的页面速度分数。

在页面加载时添加带有 javascript 的 css

如答案here中所述，如果您通过 javascript 添加 css 而不是获取一堆 css 文件，则可以避免页面速度问题。