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

只需将文件中的 .js 复制到带有 <script> 标记的 .html 文件中即可。

使用异步

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

将脚本放在页面底部

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

优化 CSS 交付

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

内联 CSS

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

在页面加载时使用 javascript 添加 css

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

Answer 2

第一步是将谷歌字体链接移动到<link rel="stylesheet" href="/components/com_rsform/assets/calendar/calendar.css" type="text/css">之上，以便最早发送字体请求，并发出一个请求而不是三个：

<link href="http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Droid+Serif:400,400italic|Tangerine" rel="stylesheet" type="text/css">

然后缩小所有 js(JS Minifier)、css(CSS-Minifier) 以减少字节。 开始缓存google页面速​​度测试中提到的js文件。

在内联脚本标签上添加 defer 属性，您认为可以在页面上所有内容加载后执行该属性。 例如：

<script defer>
//your code
</script>

• 如果 css 文件太小并且不需要在多个页面上，请尝试将它们内联，因为这有助于减少请求数量。
• 如果可能，将多个 css 文件合并为一个，因为它们来自同一个域，这有助于减少关键资源和请求的数量。
• 将媒体查询分离到不同的 css 文件中，这样可以减少呈现页面的时间。
• 将外部 css 文件置于所有外部 js 文件之上
• 您可以直接从页面速度洞察中下载优化后的 CSS、JS 和图像，它出现在 Speed 的最后一节中。