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 别忘了修改小老鼠

你可能感兴趣的:(网站性能优化,WPO,wpo性能优化,网站性能监测与优化,网站数据库优化)