减少加载时间，或让用户认为加载时间更短

Question

我一直在网站上工作，我们已经设法将页面加载的总内容从13.7MiB减少到2.4，但页面仍需要永久加载。

这是一个joomla网站（ick），它有很多冗余的DOM元素（主页为2000+），并且每页加载60+ HttpRequest，计算所有css，js和图像请求。与drupal不同，joomla不会动态合并它们，它们必须保持分离，否则joomla组件将会疯狂。

我可以做些什么来改善加载时间？

我做过的事情：

• 为具有大图像作为背景的dom元素添加颜色，以便加载颜色，然后加载图像
• 将过大的图像缩小为更小的文件大小
• 将DOM元素减少到〜2000，从~5000
• 在页面开头加载CSS，最后加载javascript
  • 不完全可能，joomla注入了它自己的javascript和css，它始终在标题处执行。
• 缩小了大多数javascript
• 在服务器上设置缓存和gziping

未缓存大小2.4MB，缓存大约300KB，但即使有这么多dom元素，页面也需要花费很多时间来渲染。

我还可以做些什么来改善加载时间？

Answer 1

查看这篇文章。

http://www.smashingmagazine.com/2010/01/06/page-performance-what-to-know-and-what-you-can-do/

如果链接被删除或丢失，提到的工具是：

• YSlow（雅虎）
• Google的网页速度
• AOLs网页测试
• Smush.it（图像压缩工具）

Answer 2

听起来你在处理真正的问题方面做得很好：那些巨大的图形。您可以从缓存，缩小等方面提高效率，但必须有一种方法来减小图像的大小。我与地球上一些最挑剔的设计师团队合作，他们从不需要未压缩的JPEG。你的意思是图像切出Photoshop并保存完整质量（10）？如果是这样，真正的解决方案（我感谢您可能无法完成此任务）就是要进行一次艰苦的对话，向设计公司解释“您不是您的用户”。如果该网站的目的是只为您的图像的保真度打动其他视觉设计师，也许它没关系。如果该网站的目的是成为一个可以让您的公司工作的投资组合，他们需要重新评估他们的受众是谁以及受众想要什么。我猜，这不是2分钟的加载时间。

Answer 3

您是否在Web服务器上启用了HTTP压缩（gzip）？这将使所有基于文本的文件的传输大小减少60-90％。而且您的页面加载速度要快6-10倍。

搜索StackOverflow或Google以了解如何启用它。 （它因服务器软件而异：Apache，IIS等）。

Answer 4

是否需要所有DOM元素？如果是，是否可以在页面加载时隐藏它们？从本质上讲，你可以将重要的dom元素渲染到页面中，然后在加载文档时，你可以根据需要取消隐藏其余的元素

$('.hidden').removeClass('hidden')

Answer 5

显然，有一些用于压缩和组合JS / CSS文件的插件：

http://extensions.joomla.org/extensions/site-management/site-performance

http://extensions.joomla.org/extensions/site-management/site-performance/7350

Answer 6

我会说你做不了什么。你接近绝对限制。

一旦达到临界点，就必须将输入所需的工作量与进一步压缩网站所需的工作量进行比较，而不是将大部分带宽昂贵的组件抛到窗外。例如，您可能需要花费20个小时进一步压缩您的网站1％。你也可能花40个小时抛弃Joomla主题并再次开始节省50％。 （虽然可能不是）。

我希望你找到一个简单的答案。我感到痛苦，因为我正在努力完成一个Drupal项目而不是被一位设计师屠杀，而设计师多年来没有实施自己的代码，并且已经在靠近金枪鱼沙拉三明治的某个小房间里制度化了。