WPO实例：纯文字网站的前台和后台WPO
?
帮一个朋友的网站?www.dirs.cn?做WPO优化。这个网站提供DNS解析、WHOIS查询、MX和A记录查询等免费服务。为什么要做WPO呢，因为网站经常出现很慢的情况，有的时候网页打不开。
?
笔者使用Pagespeed和YSLow工具查询，得分分别是91分和84分，已经是比较高的得分。
再分析一下网页组件，几乎全是文字，图片非常少。粗略分析了一下，
?
前端存在如下问题：
1. 没有gzip压缩
2. 大多数页面组件，缺少expires header
3. ?书签采用了外部js插件（见上图红色框），js脚本来自 addthis.com，有的时候这个网站被墙，整个dirs.cn的页面载入就变得非常慢了。
4. 首页不统一，（见上图蓝色框）链接指向了 index.html 而不是 /，造成解析额外的负担。
5. 没有favicon.ico文件，既不美观，也影响性能。
?
前端对应解决方法：
1. 设置Gzip压缩。因为网站服务器是IIS6，设置有些麻烦，参见《WPO基础：在IIS下设置Gzip压缩》
2. 将?dirs.cn?所有的图片、脚本、样式表所在的目录，设置200天的expires header。也就是200天内，浏览器缓存都有效。将其他目录的expires header设置为2天后过期。
3. 将书签插件修改成超链接形式，取消js脚本。
4. 统一所有的首页URL为 /index.html
5. 在/images/ 目录下添加 favicon.ico 文件，并在所有页面Head区添加如下代码
<link href=”/content/images/favicon.ico” rel=”icon” type=”image/x-icon” />?<link href=”/content/images/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />为什么放在/images目录，而不是根目录呢？images目录有200天的expires header，而根目录只有2天。favicon.ico 一旦建立，长久都不会改变，所以我们给予较长的expires header，放到images目录。
为了满足一下老版本浏览器和特殊的手机浏览器的兼容性，我们在根目录也放一个favicon.ico文件。
?
经过前端的设置，再经过gtmetrix的检测，分数大大提高，见下图
?
PageSpeed和YSlow的得分都提升到了94分。
?
还有些减分因素，是哪些呢？
- Leverage browser cashing
——http://www.google-analytics.com/ga.js
?
这是谷歌的分析脚本，我们处理不了。这里说多一句，谷歌分析最新的脚本，已经采用了异步调用，如果还没有更新的，最好更新一下，对于性能会有帮助的。而且谷歌服务由于众所周知的原因，经常发生被墙的状况，说不定你的网站某天打不开，真正原因是谷歌被屏蔽了。参见《WPO实验：如果Google被墙，网站会出现怎样的杯具？》
- Use efficient CSS selectors?
这是说CSS里面有些效率不高的选择器。比如
table tr td 这样个选择器，用 td代替就可以了，因为td的父元素肯定是tr，tr的父元素肯定是table，不用重复标注。
CSS选择器对性能的影响不大，所以忽略。
- Minify CSS
这是说要压缩CSS。为了可读性考虑，就没去改动了。
- Minify Javascript
这是说要压缩Javascript。为了可读性考虑，就没去改动了。
当然还有一项没做的WPO，就是使用CDN。这一点估计很多国内个人网站都无法做到。
?
完成上述改动后，首次和第二次打开网页的速度大大提升。但还是无法解释之前出现的网页超时的问题。
?
后端存在问题和解决方法：
于是进入系统后台，进入数据库，看到有两个表
visitlog 记录访客信息
querylog 记录访客查询信息
select count看了一下，好家伙，每个表都有上亿条数据！
确认后，将数据清空，呵呵网站又一次变得费宽。
?
以上是一个简单的WPO例子，包括前台和后台。
?
作者:?谭砚耘@用户体验与可用性设计-科研笔记
版权属于:?谭砚耘 （TOTHETOP至尚国际?）
版权所有。转载时必须以链接形式注明作者和原始出处
如果你希望与作者交流，请发送邮件到?tanyanyun/at/163.com?别忘了修改小老鼠
- Minify Javascript
- Minify CSS
- Use efficient CSS selectors?