【案例1】人才网站首页加载速度的优化全过程

应朋友之托，对大南宁人才网（0771rc.net）首页加载速度进行优化。

先借工具查查有哪些需要优化。

有哪些工具呢？

google的page speed就是我常用的工具之一。觉得蛮好用，推荐一下。

安装

1.安装FIREFOX

2.安装FIREFOX FIREBUG

3.安装page speed

正式开刀

1.打开FIREFOX，输入南宁人才网URL地址 0771rc.net

2.打开FIREFOX-》TOOL-》FIREBUG

3.在FILEBUG窗口，切换到PAGE SPEED选项卡，点击“performance”开始分析

4.一会就分析完了，有用的东西立马呈现在我们面前

结果分析

1.学会看符号，这里有三种：叹号，立三角，对勾。

叹号表示完全没优化的，级别很高。

立三角表示已经有优化，但还有可提高。

对勾表示已经优化过了，也就是OK了。

以上符号理解是通俗的理解，我觉得只要懂这个意思就行了。

针对优化

1.Enable gzip compression

使用gzip压缩

下面一句话还会告诉你使用这个优化选项可以让你节约多少时间成本。

Compressing the following resources with gzip could reduce their transfer size by about two thirds（~101.8kb）。

2.Leverage browser caching

让浏览器缓存文件

这个选项下面会列出需要设置缓存过期时间的文件列表，只有设置缓存过期时间之后，浏览器才会缓存列表中的这些文件。

3.Parallelize downloads across hostnames

负载平衡文件的下载主机来源

这个选项如果你有多个服务器就可以把文件分散在各个服务器上了。也就是把压力分摊了。

后面同样会跟着一个列表。

4.Minify javascript

缩小JS文件

后面会紧跟一句话告诉你有多大的JS文件，缩小后可以节省多少

There is 11.6kb worth of javascript.minifying could save 2.4kb（20.6% reduction）

5.Specify image dimensions

指定图像的尺寸

这个很多程序员都忽略掉了。以为只要页面效果达到了就OK，都没太在意设置第张图片的尺寸。

为什么要设置尺寸？

其实呢，如果没设置尺寸，浏览器解析时，都要计算图片的尺寸。

设置了尺寸，自然就省了这一步。像在大南宁人才网这种人才网站上，图片广告只会

越来越多，如果图片不指定尺寸，带来的效果差异还是很大的。

6.remove unused css

移除没用到的CSS

这个在网站发布时应该检查有没有没用到的CSS文件，JS文件。

叹号和立三角的优化建议就以上这些了。针对这些优化就可将页面呈现速度再次提高。

现在打开大南宁人才网的首页只要不到0.01秒

希望对各位从事WEB开发的朋友有所帮助。

后面还会推出一个系列的【案例】文章。

做更好的WEB体验。