在jQuery需要渲染时优化页面速度

Question

我正在使用Google PageSpeed服务来改善网站的页面加载时间。该网站是GAE / P，但我认为这不重要。

我的页面取决于一些资源：

• Bootstrap（css和js）
• jQuery（js）
• jQuery UI（js和css）
• 我自己的东西（js，css和图像）

页面加载（link）的瀑布如下。在这个页面中，我使用Javascript来呈现一个可排序的jQuery UI。

由于Bootstrap和jQuery，PageSpeed建议内联所需的css / js似乎不切实际。

我正在寻找有关如何获得最大收益以提高页面速度的建议。例如：

• 我应该将所有js（Bootstrap，jQuery，jQuery UI，我的）合并到一个js文件中并自己提供吗？
• 我应该将所有css（Bootstrap，jQuery UI，我的）组合成一个css并自己提供吗？
• 我应该将图像组合成css精灵吗？
• 我应该考虑的其他事情？

我很感激你的想法。

Answer 1

我认为这个答案属于意见范畴，但我会尽力为每个陈述做出合理的论证。

  

我应该将所有js（Bootstrap，jQuery，jQuery UI，我的）合并到一个js文件中并自己提供吗？

是。单个资源意味着减少到服务器的往返次数，但不要对该服务器保持懒惰，查看一些不同的选项，而不仅仅是从您的域中提供它。

  

我应该将所有css（Bootstrap，jQuery UI，我的）组合成一个css并自己提供吗？

是的，出于同样的原因。

  

我应该将图像组合成一个css精灵吗？

也许，这可能难以维护，其好处在很大程度上取决于您的应用程序。

  

我应该考虑的其他事项？

考虑使用亚马逊Cloud Front等服务托管您的静态内容，这样您的用户就可以更快地访问这些静态内容，而无需花费太多精力（或成本）。您还可以考虑将页面组合到单页Web应用程序中。这样，您的用户只会下载并执行一次资源，而后续页面只会加载数据。这种方法提出了其他挑战，例如搜索/索引以及代码的复杂性。