网页设计师

网站优化教程 - 第4天


作者:感谢http://www.sohoo.com.cn提供!



当我最近在HotBot工作并试图加速我的网页时,我花了很多时
间查看其它网站,想从他们的成功和失败中学点什么。我学到
很多如何使页面装载和绘制很快的方法,但是也发现非常多的
没有必要的臃肿的东西。

基于我所发现的和没有发现的,我总结了一些使网页紧缩的
方法。既然你已经使你的图像和表格尽可能地苗条,现在让我
们看看优化网站的最后一关。

第二页:与松弛做斗争的最后防线我理解找到完美方法实现好的设计使广告商高兴和每个页
面可用是多么的困难。但是我希望设计者最好避免海啸般的连接。
  很多出版商(如ZDNet和CNET)因为连接太多而使网页阻塞- 每页上都有大量指向其它
页和其它网站的连接。我甚至在我们自己的后院发现了同样的问题(或者是不是可以说我们
的前门?)。
  这样的交叉连接通常是考虑到市场的原因:让读者知道同一公司的其它内容和站点。但
是你也不必象一个人类问题专家那样认为网页上连接越多,单个连接被访问的机会越少。经
过10个左右连接后,读者趋向于只读页中间的文章。这些未读、未被接触的“连接农场”可
以占到网页HTML的一半。并且,不象logo和icon驻留在cache里,调用每页时,它们重新下
载。
  这些连接背后的长URL的累加也很可观。AltaVista为附加查询结果页的“1 2 3 ... 20”
(在每个查询结果页的底部)连接就要浪费4KB的HTML。通过实现更短、更少的URL,最近AltaVista
重新进行了设计,把连接的尺寸平均减少到1KB。结果是,通过拨号modem的页面下载速度明
显提高(就金钱和常识来说,意味着客户更愉悦,每分钟的页面点击率越多)。
  一些同样的网站也为放入大量的交叉连接感到内疚。有时他们故意这么做来增加页面点
击率,但是通常可以加一个附加的页来容纳其它用户感兴趣的内容。
  如果你不想让读者下载他们不需要的字节,同时又不希望他们退回去重新下载读过的页
面,那么你知道他们无论如何也要一页。所以要研究你的服务器日志,发现用户点击最多和
最少的是什么。删掉没人读的内容,把它们替换为日志数据证明有必要的信息。
  把JavaScript当作垃圾
  很多网猴认为页面中的JavaScript不使页面变慢。然而,JavaScript是一种解释语言,
而不是编译语言-这意味着它被装载后还要被分析。我们习惯于在HotBot中使用JavaScript
函数使浏览者的键盘输入聚焦到文本输入框内。这样的一个函数使页面的装载明显变慢,即
使它的初衷是为了加速查询。
  检查你页面中的JavaScript,看看它是如何影响装载和初始化时间的。如果你用JavaScript
控制plug-in或dHTML,应该查看用户手册看看这些组件是如何使用的。你可能会发现你的20
行的JavaScript程序可以用一个内置的装载和运行更快的函数来替代。我们就犯过这样的错
误:我们用JavaScript写了一个“NextTen”函数来改变装载到MSIE4的一个表中的内容。后
来我们知道IE的内置nextPage函数比它快10倍,而且当它运行时不会使页面混乱。如果你的
读者遇到过这样的麻烦,试试这个函数-对每个人都有利。
  扔掉小技巧、计数器和其它活动的部分
  坦白地说,关心你的网站的访问人数的人不会很多(如果是一些令人印象很深的数字,
可以在你的页面中编码,当它突变时再更新之)。初始化Java并装入一个applet只是使页面
中的一些文本滚动-这样的页面不值得去等。今年早些时候,CNN通过移去它的Java大字标题
把页面装载速度从50秒减少到20秒。
  你是怎么想的?- CNN的点击率和观众份额会增加还是减少?

 

第三页:测试你的网页

在过去的四天里,我们为你提供了很多加速网页的方法。为了能
让用户能有所体会,你需要为网页制定一些行为标准并实行之。

制定你的标准

别只自问:“网页现在有多快?”并试图进行改善。应该问“页
面应该有多快?”。或者减少用户的等待时间,或者让用户觉得
他们的等待是值得的。

制定合理指导方针的最佳方法是检查你的竞争对手的网站。查找
与你的网站提供相同内容、服务、价值等的网站,研究它们的
表现。请教你们公司市场部、销售部或其它部门的人,让他们评
价你的竞争对手的网站。可以进行一次角色扮演:把你自己当成
一个用户,进行一次网上漫游。

当你确定了要查看哪些网站后,确定你要进行到哪里。或许整个
页面装载完,但是或许应该确定某个特定条目的装载时间(例
如,一个新网站的顶部标题)。我们研究过的一些站点非常好:
在页面完成装载之前,用户可以看到一些很重要的东西。

如何计算网站的下载时间

现在对你自己的网站和你确定的网站进行下载时间的测试,并把
结果作成图表。我试过计算页面下载的不同方法,最后在所需的
时间和结果的准确性之间达到了最佳平衡。为了达到事半功倍,
可以用以下方法:

首先,建立一个要比较的页的清单。然后座在你的测试计算机
前,把浏览器的cache清空(除非测试要求在cache中保留一些
图像),装载第一页。然后记录下载时间(我相信双击,用的
是Precise Synchrosport 910跑表)。清除cache,重设跑表,
然后装载第二页。清除cache,重设跑表,然后装载第三页,
等等。每页都装载一遍后,从头再来一遍,直到做完足够的试
验(我一般做五至七次)。对于实验数据,去掉最高值和最低
值,然后对其余的值取平均。比较每个站点的平均值,如下表
所示:

Site Trial 1 Trial 2 Trial 3 Trial 4 Trial 5 Trial 6 Average
HotBot 24.68 17.25 19.91 21.18 26.50 20.92 21.67
InfoSeek 21.30 31.72 19.84 18.38 17.95 34.75 22.81
AltaVista 21.79 14.05 19.71 33.11 32.01 46.88 26.66

我为什么不测试第一页五次,第二页五次,第三页三次呢?因为
在互联网上,服务器峰值和网络阻塞每秒和每秒,每分和每分之
间都不同。通过交叉试验的数据,我把出现的问题(在我的一个
站点、我的ISP或别的什么地方)均匀地分布。

即使这样,每个站点都有“bad hair day”(当表现非常差时)。所以应该重复进行试验,
在一天的不同时刻,一周的不同时间,工程期的不同的周。这也使你能跟踪竞争对手的网站
的变化和改进-有时一个网站在四月时还很慢,到了五月却快起来。
  自动记时?没有这样的事有些开发者使用自动记时程序测量和统计页面下载时间。但是
这些程序只测量文件大小,或至多记录HTML从服务器传过来的时间。这种方法完全忽略了不
同浏览器和不同操作系统之间的差别,这些差别对下载时间影响很大。
  那些告诉你用14KB调试解调器下载页面需要多少时间或测量HTML效率的自动程序根本没
法与严格的人工计量相比。用真人测量屏幕上发生的一切,因为那是你真正要改进的。我的
工作组有自动测量和手工测量的图表。自动测量的结果对于读者来说往往是错误的。我花在
每个人身上的跑表的钱算是值了。
  早期测试和经常测试网站原型一准备好,我就让我的组的成员进行测试。立即测试是发
现问题的最佳时机。你也希望尽可能早地检测网站的高层表现,以在工程进程中得到平衡。
我的组的成员也在第一天测试他们的网页,这样可以马上发现混乱的tag和嵌套表格,避免
产生新的bug。
  加速浏览器当然,不只是快速的HTML使网站奔跑如飞。网站的速度还取决于快速的服务
器和快速的网络连接。多数webmonkey不用花钱买自己的网络连接和机房,但这不是问题。
让专家们去做吧:调查用户从不同地区镜像站点下载的速度。做这件事的一个好办法是与建
这些网站和维护它们的人交谈。
  如果你拥有自己的网站空间,应该对服务器软件进行速度优化。
  Gaudet???Apache HTTPD Server???????????化Microsoft IIS和ASP的文章。目前我们
正在调试,不过几周内我们就会成为这方面的世界级专家。
  我正在试图避免的一个习惯是URL的重定向。这种重定向使用户从点击连接到到达目的
地的时间加倍。经过我的计算,我们最近通过去除查询结果页中的重定向每天为HotBot用户
节省了超过1,000人工小时。
  既然你已经知道了很多,那么就动手吧!还觉得慢吗?向高手请教吧!

第四页:说服你的老板是否你觉得网页不够快,但是你的网站的经理却认为没关系?
  那么你应该给他演示一下。找一个用了两年的计算机,连到电话线上。拨号进入AOL或
其它一般的ISP。让你的网站经理看着你们办公室里最不懂技术的人下载你的网页和你的竞
争对手的网页。让测试人员在快页和慢页之间切换。如果这样简单的演示不能说服任何人
“下载时间直接影响你们站点的品牌和点击率”的话,该是更新你的简历的时候了。
  在你的办公室里宣扬速度的重要性。建立关于页面大小、单位和下载时间的公司标准。
这意味着必需删除一些广告标语和迫使你的合作者砍掉一些想加的新东西。你可能会使一些
人不高兴一段时间,但是你的访问者会用点击率来回报你。做一个优化前和优化后的点击率
的比较图表。我见过的这样的图表很能说明问题。
  回到八十年代,股票市场的亿万富翁到处宣称“贪婪是上策”。在互联网上,速度是上
策。为了给你的访问者提供好处,你需要确定明确的目标,经常测量网页的表现,说服你的
同事这样一个道理:如果没有访问者,你们的工作毫无意义。
  

(完)
  

上一篇 下一篇

GO TOP  返回心得技巧 


这里摘录的文章版权归原作者所有
《网页设计师》阿捷制作©1999-2000