首页性能优化

网速20KB/S

• 测试优化前后首页打开速度

优化前

2m 22s (onload: 2m 22s)

优化后

12.74s (onload: 12.41s)

首页打开速度提升11倍

基础知识

• 网页的下载是串行

• JS是下载+执行

客户端做了哪些

• 删除“榜上有名”模块（占用40个请求，全部是图片）

• 只加载首屏图片（首页图片占75%的请求）

• 给正在加载中的大图增加 “load icon”

• 将base.css文件硬编码到HTML（1.7KB没必要发起请求）

• 从combiner.css拆分出home.css（仅包含首页样式，

combiner.css 80.2KB，home.css 31.4KB）

• 将Google Analytics移至</body>前（避免阻塞）

服务器做了哪些

• www.caicaijie.com 缓存jquery-1.6.2.min.js

• static.caicaijie.com 缓存图片和css

• 开启gzip压缩（例：jquery-1.6.2.min.js压缩前89.4KB，压缩后

31.3KB。IE6关闭gzip压缩，有兼容性问题）

网络方面

• 由中国移动杭州分公司赞助了移动全网加速节点，优化了移动和铁通、

移动手机用户的访问速度，提升用户体验，这在当前智能终端越来越

普及、三网融合的趋势下有助于公司拓展移动互联网和校园用户（移

动宽带目前主要优势即通过赞助、动感地带等方式迅速的占领了校园

市场）

• 之前移动用户ping值100-200ms，之后移动用户ping值10ms以内

还可以做哪些

• 压缩HTML代码（进一步降低页面大小）

• 服务器合并CSS文件（维护便利）

• 后端动态缩放图片（根据需求比例缩放，对性能提升较大，头像）

• 从后台上传图片要检查展示时的实际像素，不要上传过大图片，尤其

是首页。

• 将首页部分数据改为AJAX加载。

• 内页AJAX交互的数据格式从HTML改为JSON

• 将所有JS放到</body>之前