由于前期使用框架快速开发,页面大小没有注意优化,比如登录页面大小就达到760K,在内网访问的时候,速度感觉不明显,但是从外网特别是网速不快的地方访问的时候,页面打开的速度较慢,明显不够理想,我们排查了造成页面过大的原因,确定原因来自己两个方面,一是图片没有优化,一整张的背景图片达到76K;二是框架引入的js和CSS文件过大,达到600多K,针对这两种情况,我们进行了针对性的解决:

一、对图片进行优化

方法为:将一整张的背景图片重复性的地方做成1象素背景平铺,其他的图片切成小图优化。经过美工优化,目前原图片76K大小缩小为43.5K。

二、启用apache的gzip功能对文件进行压缩

方法为:

1.启用gzip压缩功能,打开httpd.conf,将LoadModule deflate_module modules/mod_deflate.so前面的#号注释去掉

2.在httpd.conf最后加入压缩配置:

# 压缩级别
DeflateCompressionLevel 9
# 压缩类型
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/x-javascript application/x-httpd-php
AddOutputFilter DEFLATE js css

3.重启apache,使用gzip生效,测试压缩效果:压缩前的页面大小为737K,压缩后的大小为216K。

优化完成后,现在整个页面的大小为217K,比原来的缩小了521K,压缩比为原来的29%,在同样的网络环境下,原来需要10秒打开的速度,现在只需要2.9秒就可以打开,大大提高了页面打开速度。