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

Question

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

我的页面取决于几个资源：

• 引导（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应用程序中。这样您的用户只会下载并执行一次资源，而后续页面只会加载数据。这种方法呈现出其他挑战，尽管像搜索/索引以及代码复杂性一样。