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推荐

• —软件人才免语言低担保 赴美带薪读研！—