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

你可以做一些事情来解决这个问题，例如Inline JS，使用异步，或者在大多数情况下将你的.js文件放在脚本底部的其他地方。

内联JS

只需将文件中的.js复制到您的.html文件中，并在其周围添加<script>标记即可。

使用async

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

将脚本放在页面底部

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

优化CSS传送

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

内联CSS

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

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

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

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 page speed test中提到的js文件中开始缓存。

在内联脚本标记上添加延迟属性，您认为可以在页面上加载所有内容后执行这些标记。 例如：

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

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