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至尚国际 ）
版权所有。转载时必须以链接形式注明作者和原始出处
http://www.webusability.cn/wpo-example-for-website-front-end-and-back-end-1354/
如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠
已有 0 人发表留言，猛击->> 这里<<-参与讨论
ITeye推荐
- —软件人才免语言低担保 赴美带薪读研！—