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

胖虎
  • 365

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

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

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

回复
阅读 7.6k
4 个回答
qinjianxiang
  • 5.9k
✓ 已被采纳

首页静态化

使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,至于减小图片字节数和前段代码优化,只能徐图之了

felix021
  • 13.4k

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

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

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

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

宣传栏