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

问题描述:

我一直在网站上工作,我们设法将页面加载的总内容从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元素,页面花费的时间好位渲染。

我还能做些什么来改善加载时间?

+4

2.4兆字节的一页?神圣莫里。 – 2010-03-24 19:58:26

+0

我们为一家设计公司工作,他们喜欢图形。大,巨大的图形。在某一时刻,背景是一张4MB的jpeg图像,没有从psd输出的压缩图像。那太差了。 – Malfist 2010-03-24 20:05:19

+0

1 MB用于使用typeface.js的两种不同字体(粗体和非粗体版本)。 – Malfist 2010-03-24 20:07:09

是否所有的DOM元素都是必需的?如果是,可以在页面加载时隐藏它们吗?从本质上讲,你有你的重要的需要,以待有DOM元素与页面渲染,并加载文档然后当,你可以取消隐藏在必要时

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

+0

这是一个很好的建议,但取决于它的实现方式,可能会出现重大的重绘开销。 – 2010-03-24 20:43:55

退房的其余元件本文。

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

如果该链接被删除或丢失提到的工具有:

  • 的YSlow(雅虎)
  • 谷歌的网页速度
  • AOLs网页测试
  • 斯马什。它(图像压缩工具)
+0

是的,我知道他已经谈到了这个问题,但是对于任何人来说,这个网站都提供了关于优化的很好的概述。 – Hugh 2010-03-24 20:25:49

这听起来像是你在解决真正的问题方面做得很好:那些巨大的图形。您可能会从缓存,缩小等等中挤出更多的效率,但必须有一种方法来缩小图像的大小。我与一群地球上挑剔的设计师合作,他们从不需要非压缩的JPEG。你的意思是图像从Photoshop中删除,并保存在完整的质量(10)?如果是这样,真正的解决方案(我明白,你可能无法做到这一点)是在你向设计公司解释时进行艰苦的谈话,“你不是你的用户。”如果网站的目的只是为了让您的图片保真度给其他视觉设计师留下深刻印象,那么也许没关系。如果网站的目的是为了让您的公司工作成为一个投资组合,他们需要重新评估他们的观众是谁以及观众需要什么。我猜,这不是2分钟的加载时间。

你有没有在你的Web服务器上启用HTTP压缩(gzip的)?这将使所有基于文本的文件的传输大小减少60-90%。而且你的页面加载速度会提高6-10倍。

搜索*或Google搜索如何启用它。 (每个服务器软件不同:Apache,IIS等)。

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

一旦你到达临界点,你必须比较你需要投入的努力量,以进一步压缩站点,而不是将最昂贵的带宽组件花费在窗口外。例如,您可能会花费20小时将网站进一步压缩1%。您也可能花费40个小时将Joomla主题扔掉,并再次开始节省50%。 (尽管可能不是)。

我希望你找到一个简单的答案。当我努力完成一个Drupal项目时,我感觉到你的痛苦,而不是被一个多年来没有实现自己的代码的设计师所*,并且已经在金枪鱼沙拉三明治附近的某个小房间里制度化了。