论坛: 网站建设 标题: 网站优化教程全天候 复制本贴地址    
作者: abctm [abctm]    版主   登录
网站优化教程 - 第一天 

  图像可值上千个字-特别在网上,一个简单的图像下载的时间相当于若干页下载的时间。到网上去看看,你会发现大块的下载时间来自于图像文件。
  在以后的四天里,我们会看到使页面趋向完美的所有不同的方法。今天我们从最明显的罪魁开始-图像。
  网页访问者往往没有耐心。你的图像可能很酷,但是如果她们对于快速下载来说太丰满,很少有人会坚持到最后以求一睹她们的尊容。幸运的是,网页设计者可以使用一些技巧和优化来加速图像和页面的下载。
  第二页:不必要的就不要其实没有什么特别的技巧。做其它事之前,从你的页面中把所有多余的图像去掉。这里“多余”不是指你们公司的标志或你们办公室的地图。我们是指那个精明的、在“发邮件”旁边的动画信封。也许在你的页面底部还放着随处可见的NetscapeNavigator和Internet Explorer按钮。说实话,有多少人没听说过这些产品呢?
  在网站中减少一个琐碎的10KB的图形文件可能对整个网站改进不大。但是如果你的整个页面才40KB,减少10KB就可以减少25%的下载时间-减少一个跳舞婴儿的按钮还是合算的。
  如果你的网页确实需要削减,可以考虑用文本“提交”按钮代替图形“提交”按钮。用静态图形代替动态GIF图形可以减少下载时间。最后,一些神奇的“header”图形可以用<FONTSIZE>和<FONT FACE>标记代替。
  第三页:GIF文件和JPEG文件除非你想得到ARCHIE或GOPHER一样的火箭速度,你总会用到一些图形。遵守一些创建图像的规则,你的页面下载的时间就会可行。
  开始时,确定一个图像用GIF格式还是JPEG格式。这看起来很基本,但是还有一大部分网页犯这样的错误。
  GIF用在看起来干脆整洁的小图形上是很完美的,但是不会超过256色。GIF也可存为“透明色”-允许图形有不规则的边界。简单的公司标志、小按钮和导航条是应用GIF图形格式的很好的例子。不象JPEG,GIF是一种无损失的压缩格式,所以你的图形不会变得模糊不清。如果你在扫描有详细细节的地图,应该选择GIF格式。不过,如果图片很大,GIF文件会
很大,下载时间也会很长。
  
  你不能从根本上压缩GIF文件,但是可以减少位深,即限制颜色数。给定位深的颜色数等于2的位深次幂(即,8位=256色)。颜色数越少,图像的字节数越少。假设你正在建一个可口可乐的网站,可以把很多标志的位深减少到3或4位(红、白,或许还需要这两种颜色的阴影色来使边界光滑)。可以用Debabelizer软件改变位深。
  JPEG文件可以显示几千种颜色,而且压缩率比GIF文件高。它们很适合照片方式的图像。不过压缩成JPEG文件时会损失一些照片的细节。
  第四页:合适的尺寸当你使用图形编辑器时,保证图形尺寸(72dpi)与将要在网页上显示的相同。在HTML中,用<IMAGE>标记的WIDTH和HEIGHT属性重述图像的实际尺寸。这可以使浏览器在图像下载时同时呈现页面的其余部分-于是人们在等待图像是有其它东西读- 并且保证在“关闭图像”浏览时可以看到正确的页面布局。
  如果在页面中使用表格,图像尺寸非常重要:因为没有定义尺寸的图像会迫使浏览器清除和重绘页面。这种情况发生在当浏览器按照<TABLE>和<TD>来建造表格,然后却发现表格单元中的图像没有尺寸参数却太大而不能放在表格中时。浏览器只得重绘表格来容纳如此笨拙的图像。效率低下的页面重绘浪费时间,而且用户看到不断消失和重绘的页面时也会不高
兴。
  使用WIDTH和HEIGHT时,最重要的是不要用它们调整页面图形的大小或形状。通过HTML调整大小是很差劲的,有两个原因。如果你放大图像,你会得到一幅有锯齿的图片。
  
  用HTML使图像变小不是一直很坏,但在表现上很差。因为浏览器下载的数据比实际要显示的图像多,于是增加了下载时间。
  第五课:缓存是你的朋友有一个使图像下载更快的重要技术。那些在网站中重复出现的图像-比如通用标志、页首或导航条-不必一遍一遍地下载。缺省地,Netscape和Internet Explorer在RAM或硬盘上设置缓存来存储最近用到的图像。如果浏览器认识是相同的文件名,它会读缓存,而不是从网上下载。这种方法大大地提高了效率,以至于很多自动记时程序无法识别-你只好用跑表自己测测了。
  既然客户端的缓存如此有用,在设计网页时就应考虑到浏览器的缓存。例如,如果网站有大量相似的页首图形,应试图把它进行分割,使其中不变的部分能从缓存中立刻读出来。虽然在每页还要调用一个新图,因为这个图很小,所以下载很快。
  最后,把你的图像放在一个地方,最好在你的服务器上。这可以减少DNS查找的时间。另外,如果你要存储图像的一个或几个服务器崩溃,将是一件很不幸的事。

第二天
  
昨天Jason告诉了你们如何使用图像来减少网页的下载时间。
  现在,我准备讲一讲如何使这些网页更苗条。
  首先,页面出现在网上时,有三种速度:
  下载时间渲染时间可视性
  用户在做是进行下去还是退回的决定时,主要考虑这三种速度的整体效果。好的设计者需要找到平衡这三者的方法,进而产生理想的下载:从用户点击请求到下一页出现只是一眨眼的瞬间。
  记住:用户的忍耐期限在存取页面的第一秒就结束了,而不是在页面完成渲染时。就用户经验来说,确定渲染时间是很有学问的。我有一辆老车,我不在乎它的外观和声响。我想要的只是能用钥匙打开车,加油,能开走。我的一位有钱的朋友有一辆Saab车,只用一分钟就能达到颠峰速度。我的车要20分钟预热,但是我无所谓-引擎点着火时我用脚踩加速器,
我只要驾驶就够了,加速的事让车自己去考虑吧!
  我用搅拌器轮子的例子说明实际速度与感觉到的速度的重要区别。知道页面要有一定时间渲染用户才能看到,设计者可以从布局的观点出发创建成功的页面。当浏览器窗口一片灰色,什么也不做时,只要用户不问:“喂,到底页面有多大?”,那么页面还在工作。
  我要向你展示我是如何增加页面的可感觉的尺寸的。和Jason一样,我也保持图形和图像的尺寸到最小。但是,不是简单地减少图像的颜色数,而是非常注意颜色的安排。
  
  第一页:网站优化教程-第2天昨天Jason告诉第二页:在一行里不要放入所有颜色GIF只是颜色的列表。如果一个GIF文件有10个像素高,颜色列表就有10行。如果第一行是100个白色像素,GIF格式通过写一次“白”,然后加一条这种颜色再重复99次的注释。这种方法应在每一行中使用,所以如果第二行是粉红色,第三行是兰色都没有关系。换句话说,一行一
行地重复白色并不能减少文件大小。实际上,在一行上有大量颜色的变化。假如第一行在黑和白之间不断交替- GIF格式不会通过加注释来减少文件大小-它只是记住白、黑、白、黑,等等。另外,黑白相间的行在一英尺外看只是灰色。当你沿着水平方向改变颜色时,尽量使用更多的相同颜色的片段:20个白色像素,然后是20个粉红色像素,然后是20个兰色的,20
个红色的,20个绿色的,这样颜色的索引将是#FFFFFF*20、#FF00FF*20、#0000FF*20、#FF0000*20、#00FF00*20,这样可以把文件压缩得更小。
  记住:通过使用HTML的HEIGHI和WIDTH标记简单地放大图像不会增加速度。一个1*1的兰色矩形很小,传输也比100*100的矩形快。但是把一个兰色像素扩展到100*100的矩形,最后却是一个24位的100*100的图像。GIF压缩只趋向于减少存储空间和传输速度。一旦浏览器的渲染引擎解压你的图像并显示到屏幕上,处理实际图像的时间和缩放到相同尺寸的时间差不
多。在使用每一个技巧时看看它是否节省时间。
  
  第三页:全是文本,没有图像和Jason一样,我尽可能用文本而不用图形,但是我的观点更极端:我认为应对每个使用GIF显示文本的设计者罚款15美圆。用户花钱上网,很慢的下载和渲染速度意味着时间和金钱的损失。设计者应为选择最适合文本意义的字体而骄傲。因为用户的计算机上不存在“灰姑娘的水晶鞋”这样的字体。(有多少人的机器上安装了Wiese
字体?)-这样GIF格式的文本就产生了。如果你用图像表示文字只是保持字型的一致或控制字型大小和间隔,对于你的页面来说没有任何意义。所以别这样做。
  要真正地减少下载时间,把渲染留给用户的操作系统。如今,浏览器通过解释HTML文档来渲染页面依赖于操作系统。利用用户的计算机产生神奇的字体或形状是最有效地利用带宽和处理器的最有效方法-把信息包含在GIF图像中是一种资源的浪费。用HTML定义矩形(table or layer),用ASCII表示文字,把字体留给操作系统,给每种颜色一个十六进制的值(例如#FF0000代表红色)。
  此时,我们还不能画圆,我们只有Times, Courier和Helvetical/Arial几种字型可用。但是用好这几种字型是我们设计快速页面的关键。对于复杂的多边形,漂亮的字体和照片,只好用GIFJPEG图形来牺牲下载时间了。
  愿意付出这样的代价吗?你不得不把文字放在图像中吗?哎!
  下面是一些折中的办法。

第三天

  <LAYER>和<DIV>也许是布局页面的理想方式,但是你将失去运行2.x和3.x浏览器的用户。如果想得到一个真正跨浏览器、跨平台的设计方案,还得用表格进行布局。
  不是所有表格都那么坏。大多数设计者需要使用网格进行设计,所以使用表格就很自然。我们也很喜欢它们的二元性:表格既可以定义布局,又可以应付页面中不可预知的因素。作为一个设计者,既要处理不确定性,又要在你的设计和用户的灵活性(例如,用户要使字体变大)之间取得平衡。不幸的是,表格同时也增加了显示页面的时间,有时这样的时间很长。
  因为浏览器需要在填充表格的内容之前完全理解表格的结构,在大部分(如果不是全部)表格的内容下载之前,浏览器什么也不能渲染。当表格变大时,需要处理的信息将呈指数性增长。在先前的计算机上,这些处理性工作很不容易,表格渲染需要大量时间。
  幸运的是,可以找到避免这些缺陷的方法。
  第二页:快速表格的技巧处理表格使用表格时间长了,你会发现大量小表格渲染起来比一个有很多行的大表格快。至少看起来是这样-真象那么回事(记住:是感觉到的速度,而不是实际速度)。
  如果你在用一个九行的表格(每个单元有很多信息),可以把它分成三个各有三行的小表格。如果你的网页很长,这种策略特别有益-在后面的表格下载时用户可以看前面的表格。
  使用Width属性为使你的HTML尽量对浏览器友好,应该对<TABLE>和<TD>标记适当地使用Width属性。这种属性允许你定义整个表格的宽度,也可以定义单元格的宽度。如果事情并没有好起来,你应该怀疑浏览器-是它的原因。所以只要检查你是否算对了就行了- 如果你把一个单元格设为100个像素宽,可是却把一个110个像素宽的图像插入其中,结果是:表格暂时出现,然后当重绘自己以便能容纳图像时又消失了。不用说,浏览器的这种过滤作用同它的慢速一样令人讨厌。
  把窗体放在表格里不幸的是,不同的浏览器和操作系统对窗体元素的处理方式不同。Mac上的下拉菜单比Windows中的要宽很多。Netscape 4处理可写的文本框和处理文本一样,所以如果增加浏览器的缺省字体大小,所有的文本框都会变大。Netscape 4中的可写文本框比其它浏览器中的宽20%,而且受字体标记的影响。所以,总而言之,你的窗体在一些用户看来会很奇怪-除非你有意支配它们。

看看下面的表格:

现在假设用户增加了缺省字体的大小。当表格放大以容纳变大了的文字时,布局依然没变。

不要相信所见即所得的编辑器

表格真令人痛苦,这就是为什么所见即所得的HTML编辑器流行起来的原因。但是,在这些编辑器使建表格变得容易的同时,它们也产生了一些令人吃惊的低效率的代码。特别是GoLive的CyberStudio使用了一种产生梦魇般臃肿表格的布局系统(尤其当你没有认真按用户手册操作时)。
  所见即所得编辑器的布局和预览窗口在处理不必要的嵌套表格、没有设置合适大小的表格的列或奇怪的、转弯抹角的HTML代码时感到力不从心。因此,如果你希望你的表格尽可能地苗条和高效,同时又舍不得放弃所见即所得的编辑器,那么只好最后花些时间清理你的代码。一旦所有内容看起来都象那么回事,用文本编辑器打开HTML代码看看,你会发现你的表格漂亮而且干净。

第三页:要不要嵌套?

永远不要嵌套表格

使网页读起来很慢的首犯是嵌套的表格:即把表格放在另一个表格的单元格里。因为浏览器必须从里到外进行处理-在计算外层表格之前必须先估算内层表格的大小-嵌套表格的表现真令人讨厌。
  所以尽量避免使用嵌套表格,即使意味着页面布局会有一些小的变化。如果你不得不使用嵌套表格,至少应保持被嵌套表格尽量简单,而且,不要用三层嵌套。我们是在建网站,不是做俄罗斯娃娃。

除非......

嵌套表格:最后的禁忌。不过,简单表格之间的嵌套的代码会是简单的几行 - 浏览器消化起来比一个超级复杂的表格更容易。

下面的西洋跳棋盘不涉及嵌套表格,但是由于它的复杂性,下载起来很慢。


通过使用嵌套表格,可以使问题简单。结果相同,但是下载时间会缩短。

使用表格的关键是找到安排它们的最有效的方法。有时嵌套表格就是答案,有时却不是。
 

第四页:结构越好,页面越快

下面是一个典型网页的例子:商标在顶部,导航在左边,内容在其余部分。对于这样的页,一般用一个大表格定义整个网格。在整个框架表格内嵌套商标、导航和内容表格,使浏览器渲染起来很困难。

下面是相同的页面结构,只是商标、导航和内容分别定义在独立的表格内。

通过使每个表格独立和简洁,浏览器可以每读完一个元素就渲染之。因此页面的第一个元素最早出现,用户可以马上利用页面最顶端的信息。
  在上面的第二个例子里,商标表格最早出现,然后是导航表格,然后是内容表格。整个页面下载很快,用户马上就有可以看到的东西。
  和处理图像一样,使表格达到最佳效果需要试用不同的方案,直到找到令你和你的用户都满意的布局。你可能怀疑为了省几秒钟就要花费这么多的精力是否值得,但是随着对用户的争夺越来越激烈,这些努力还是值得的。

第四天

  当我最近在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,重设跑表,然后装载第三页,等等。每页都装载一遍后,从头再来一遍,直到做完足够的试验(我一般做五至七次)。对于实验数据,去掉最高值和最低值,然后对其余的值取平均。比较每个站点的平均值,如下表所示:

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

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

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



地主 发表时间: 04-04-10 22:07

论坛: 网站建设

20CN网络安全小组版权所有
Copyright © 2000-2010 20CN Security Group. All Rights Reserved.
论坛程序编写:NetDemon

粤ICP备05087286号