首页性能优化

网速 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> 之前