图片比较多的首页该如何优化，以提高访问速度

Question

一个跟汽车相关的网站，首页汽车图片比较多，一般都是 40K ~ 100K 之间，这么大图片有 20~30张，小的有60+张，访如何优呢？

我现在想到的是：
1、大图尽量在不严重失真的情况进行压缩；
2、JS、CSS 尽量合并 并压缩以减少访问请求;
3、图片做 cdn, 但由于目前网站流量并不高，所以公司暂时不打算这样做，但我想用子域名了做图片加载，以分发访问请求;

问题：
1、首页多次有幻灯片，是否应该采用懒加载？
2、是否还有其它更好的方法？

Answer 1

首页静态化

使HTML下载速度最佳。

写个脚本，定期执行：

1. curl htp://localhost/index.php -o /xxx/index.html.tmp
2. if grep 'your_finish_flag' /xxx/index.html.tmp
3. mv /xxx/index.html.tmp /xxx/index.html

若首页有些“欢迎你，xxx”之类对每个用户都不同的内容，交由AJAX异步加载

启用CDN

没什么比这个更立竿见影的了。
服务端优化得再好也解决不了网络拥堵和消费者离机房远的问题。
该用什么类型的CDN参见我在这个问题里的答案：http://segmentfault.com/q/10100000001...

流量小也可以用CDN的。“但由于目前网站流量并不高，所以公司暂时不打算这样做”，应该是你公司决策层对CDN有误解，可以更新一下知识经验库了。CDN的实施门槛和日均成本都非常低。我谈过的几家CDN都可以按流量计费的，用多少扣多少钱，合计约0.4-0.7元每G。几百块钱就可以启动了。

注意几个地方：

1. CDN用单独的域名，如，你的网站叫auto.com的话，CDN就叫atcdn.com之类的（术语叫Cookie-Free Domain），不要用cdn.auto.com，理由是请求CDN的时候浏览器不带cookie
2. css/js/icon也要放到CDN上去
3. 内容型图片（不是网站logo, 按钮图片这种css里引用的小图片）最好使用唯一文件名，只上传不修改，要改内容就改文件名。好处是可以将它们的缓存设为永不过期
4. 使用多个cdn子域名，如img[1,2,3,4].atcdn.com，增加浏览器并行访问CDN的线程数，它们的内容完全一样，CNAME解析完全一样，就是骗骗浏览器的

前段代码优化

1. 使用XHTML，不要整个页面大table揣着小table。尽量横向分隔成一条条的，或者像pintrest图片流那样一个个div横向并列。这是8年前就流行的经验了，现在应该不用说了吧。
2. 使用lazy-load，消费者滚到哪一屏就加载哪一屏的图片。照说首屏幻灯反正要自动播放的，不lazy-load也没所谓，可是，反正都写了lazy-load代码，就一视同仁把首页所有的img都关照了吧
3. css中用到的大量小icon合并到一个图片文件中，使用坐标偏移来显示
4. css,js文件合并，我觉得无所谓，收效不大。你们本来网站流量就小，css,js文件不会超过20个吧，手工合并费劲不利于快速发布，机器合并你们还得部署和学习对应的工具。

减小图片字节数

跟生产图片的人员好好沟通，除非是产品细节的高清大图，适当降低清晰度没问题的。以我的经验，首页要么是120像素以内的缩略图，要么是500像素以上的幻灯焦点，高清细节一般不在首页。

搞设计的人员总想弄个单反照片级的图片在网站上，这是本能，不是缺点，你不能奢望他自发压缩图片。

总结

如果你们是新开张的网站，目前在开发阶段，综合衡量收效和可操作性，最应该做的优化措施依次是：前端使用规范的XHTML > 减小图片字节数 > 使用CDN > 首页静态化

如果你们是已经运营很久的网站了，综合考虑可操作性和实施时间，应该做的顺序是：使用CDN > 首页静态化 > lazy-load，至于减小图片字节数和前段代码优化，只能徐图之了

Answer 2

子域名是必须的，http协议限制浏览器对一个站点只能有一个连接，所以即使是图片都放在同一个机器上，也要有多个子域名来“分流”。同样的，js和css最好也用不同的域名。

可以考虑下又拍云的服务。

Answer 3

首先页面优化无非两个方面，1、减少请求数；2、缩小请求大小。
减少请求数就是你所说的延迟加载
缩小请求就是压缩，其实有时候可以损失质量
再有就是异步加载，使用多个子域名。但是有一点要注意，子域名太多会造成DNS的压力，所以建议子域名控制在5~10个

Answer 4

如果是静态图片很多的话,可以用css sprite.