如何使用TONS图像优化非常loooong页面？

Question

我的任务是优化营销目标网页以提高速度。它已经做得很好，但问题是它非常沉重。

我想要的全部内容是在一个页面上长达30多页（必须是这样的，并且由于转换原因，一切都必须是图像）。

这是我到目前为止所做的事情，但我不确定是否还有其他我缺少的东西

1. 我在页面上的140 jpg重新压缩到尺寸略小的
2. 我玩精灵，但大多数图像都很大（就像600px宽的整个见证盒）。精灵图像最终变得像2mb。由于某种原因，该页面实际上需要更长时间才能加载（差不多2秒）所以我把它们关掉了
3. 最重要的是，顶部的所有东西都尽可能快地加载到其他任何东西之前，以便销售不会因为一堆图像开始出现故障而丢失。我使用这种方法使用了一些讲道图像：http://perishablepress.com/press/2009/01/18/css-image-caching/ - 它似乎在较小的图像上工作得很好，但是当我添加背景（这是非常图形密集的）时，一切似乎都会立刻变慢，就像它试图一次做一定数量（5？）的图像。理想情况下，我喜欢将预先缓存的前4个较小图像分组，然后将所有带宽集中在背景上，然后按标准顺序整个页面的其余部分进行跟进..
4. Google Page Speed得分为90/100。它唯一关心的是未使用的样式，但我并不是真正关心它，因为它总共大约2kb ...来自7mb图像的开销更为重要。
5. 我可以选择将CDN用于图片，但我不确定如何进行此操作或是否真的有用？

我觉得我已经尽我所能但又一次我完全可能错过了一些东西......

Answer 1

考虑在折叠下面懒洋洋地加载图像？有很多javascript插件可以完成这个

Answer 2

• CDN绝对有帮助。有140张照片，我希望如此 包含的不仅仅是服务器。只需直接链接到IP 服务器，以避免不必要的DNS查找。

• 最小化HTTP请求。你提到你一直在试验 与精灵。我仍然相信精灵是可行的，但是你 可能不想只创造一个巨大的图像。如果你有140 图片，你应该有大约10个精灵。

• 确保您已设置标头以使客户端缓存全部 内容。记住ETags。

• 允许浏览器使用Gzip / compress内容。

• 如果源代码很长，请务必尽早清除缓冲区。

Answer 3

滚动分页+在每页基础上将图像组合为精灵。