论网站建设过程中的优化策略

【摘 要】网站的优化在竞争日益加剧的互联网时代已变得刻不容缓。网站不仅要求拥有高质量外，打开速度也是一个不可避免的问题，当然改进方法也多种多样。本文从网页设计者的方面进行分析，对网站的优化进行一系列的总结，希望能对相关网站优化工作有所帮助。

【关键词】网站；优化；网页；设计

一、引言

随着网络时代的不断发展，网站方面的建设也越来越融入人们的生活。现在Internet上有众多提供免费存放网页的服务器空间，不少网友自己设计制作网页、在网上信息。随着网页设计技术的发展，丰富多彩的个人网页越来越多地出现在网上。互联网带宽从原来的羊肠小道发展成为现今的高速公路，似乎让网页的加载速度也得到了质的飞跃。其实不然，因为随着带宽的提高，网页上的对象也越来越丰富，因此网页打开速度的加快还是一个值得重视的问题。目前众多搜索引擎已经将网页打开速度列为搜索排名算法的其中一个重要的因素。所以我们说网页的内容不仅要有益于客户外，对下载速度的考虑也应该放在网页设计规划时的重要位置。加快网页的打开速度，一般来说有三个路径，一是提高网络带宽，二是用户在本机做优化，三是对网页做一定的优化。做为一个网站设计者，我们来分享下从怎样从网页设计上实现优化。

二、如何判断一个网页的打开速度

1.网页内容的大小

搜索引擎优化网页打开的最佳速度：2秒！

网页内容所包括的文本、产品的图片、视频、Flash文件等。这里涉及到浏览器的原理，浏览器的技术原理就是将网页下载到客户本地缓存，然后通过浏览器解析源码，以浏览器窗口编译出用户可以正常阅读的图片和文字，因此，网页文件的大小决定了网站是否能快速打开。我们有一个网页访问的时间计算公式：网页打开时间=网页内容大小/最小带宽+解析次数*每次解析时间+服务器处理时间+客户端解析时间。用户最满意的打开网页时间，是在2秒以下。用户能够忍受的最长等待时间的中位数，在6～8秒之间。这就是说，8秒是一个临界值，如果你的网站打开速度在8秒以上，那么很可能，大部分访问者最终都会离你而去。

2.控制页面的总规模

要想把网页做得精彩，内容必须丰富，但不要把所有的内容都放在一个页面上，应控制页面的总规模。首先统计页面中的每个元素，如文字、图像、ActiveX或Java代码以及HTML文本的大小。用28.8Kbps的Modem粗略地估计一下，按每秒3KB的速度下载整页所需的时间，如果整页有5KB的HTML代码和30KB的图像，下载该页大约需要1至2秒，这一般能满足访问者的要求。页面容量最好在50K以下

三、利用网页优化

网页优化是指在设计，使用网页各元素时，能够尽量减少网页元素对下载速度所产生的影响。这些细节我们了解后，是能在日常网页制作中可以进行避免的。

1.让网页符合W3C标准

第一方面，在网页制作中使用结构层同表现层完全分离。也就是布局使用用CSS而不用TABLE。这样做不仅能替换掉专业的表现层的垃圾代码如标签。而且也能让你的网站在重构方面能够轻松实现。几年来的多项研究已证实，如果对一个网站进行重写，使用DIV+CSS布局取代表格布局，那么可以砍掉原XHMTL文档大小的一半。

第二方面，让HTML标记有始有终。不管是我们自己编写或是查看他人的HTML代码时，会发现HTML代码标签写得不规范。有的标记有头无尾，如标签对，

标签对。它并没有妨碍代码的正确执行。但浏览器却会花费时间来判断和计算段落或者列表项目在哪里结束。所以，我们一定要让标记有始有终，这样做不仅使HTML代码格式规范，更可以加速页面的显示速度。

2.优化层叠样式表

层叠样式表（CSS）是HTML的装扮器，一个漂亮的Web页面不可能没有它。一般来说，我们要合并精减CSS代码，移除无用多余代码；图片尽量不要使用CSS的滤镜来渲染；CSS的选择器尽量简单定义。

HTML页面中有多种引用CSS的方法，不同的方法导致的效率也不一样。通常，我们可以将定义于间的样式控制代码提取出来，保存到单独的.css文件中，然后在HTML页面中使用链接外联样式表的方式进行引用CSS。外联样式表是一个和它控制的HTML页面分别在不同的地方的文本文档，HTML页面通过文档顶端的一个超链接调入那个CSS文件。外联样式表能以最低的成本提供最强大的功能。当用户把一个外联样式表下载到缓存中，它仍然是动态的，能控制一个，十几个，几百个，乃至成千上万个站点上的页面，而不需要另外下载，极为方便又功能强大。

3.优化图片

图片可以说是影响网页加载速度最大的因素，不管是使用图片优化工具，还是减小图片大小。在质量和文件大小之间必须找到一个合适的均衡点。主要有以下几个需了解的方面。

1）一般在网页上使用的图片格式有三种，jpg、png、gif。我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。

JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。

PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

2）图片的使用显示。需要显示图片时，尽量使用背景图片，而不是直接加载。也需要注意的是尽量不要用一个很小的图片当背景，这样做会加大客户端CPU处理时间。比如说预载入下一页的主要内容时。在用户看到大图之前先把小图展开，让用户不至于在等待的过程中太焦虑。

3）图片在HTML代码里要标明大小。这样浏览器就能事先留好空。当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是参数。如果浏览器没有找到height和width这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

4.优化脚本语言

网页的效果离不开脚本程序的支持，我们经常会在页面中嵌入多种脚本语言，比如常用到的javascript与VBScript语言。动态脚本代码在使用中也可以进行一定的优化。

1）在网页中使用同一种脚本语言。不知你发觉没有，在一个网页中使用到多种脚本代码时，这样的混合使用会减慢页面的访问速度。原因在于：要解释并运行多种脚本代码，就必须在内存中装载多种脚本引擎。所以，请尽量在页面中使用同一种脚本语言编写代码。

2）能用层叠样式表实现效果时，不使用脚本语言。如必须使用动态脚本代码时，尽量将代码外放。我们知道搜索引擎是不能读取脚本语言的。如果你觉得往外放太过麻烦，我们可以将脚本代码与网页分离，单独放到底部来。对于访客来说，网站打开至加载到底部的代码时间很短，有时可以忽略不记，所以不会影响什么。而对于搜索引擎来说它不认识的代码越少当然越好了。

3）将多个页面都用到的脚本程序编写成独立存在的脚本文件，然后再在页面中通过JAVASCRIPT等脚文语言调用它。将多页面共有部分提取出来减少web页面下载时间的关键就是设法减小文件大小。当多个页面共用一些成分内容时，就可以考虑将这些公用部分单独分离出来。这样，公用文件只需要下载一次，然后就进入缓冲区。等下次再次调用包含公用文件的html页面时，下载时间明显减少。

5.其它技巧的优化

1）巧用IFRAME布局

巧用iframe加快网页打开速度。如果网页上插入一些广告代码，又不想让这些广告网站影响速度的话，那么，使用iframe最合适不过了。例如在某个首页上插入一些广告代码方法：将这些广告代码放到一个独立的页面去，然后在首页用iframe代码将该页面嵌入即可，这样就不会因为广告页面的延迟而拖了整个首页的显示。又比如，开发一个文档预览页面，可以在左边放置一系列主题，在右边放置一个IFRAME，其中包含要预览的文档；当鼠标掠过左边的每一个主题链接时，就在右边建立一个预览文档。我们只需使用单一的IFRAME，修改它的SRC属性即可。这样做，不仅代码效率高效，而且简化了处理过程。

2）不要让计数器代码影响速度

很多网站都有计数器，为站长和广告商家提供访问依据，但是，不管功能有多强大的网站统计系统，都会有出问题的时候。都要运行时间，如果直接把统计代码放到页面内容的前面，或者放在一个Table或者div标签里，那么在计数器不能访问的时候，你的页面上那个Table或者div就会产生几十秒钟的延迟，导致页面很长时间才能访问。所以，要提高网站的速度，就要讲究统计代码放置的位置，推荐的做法是：把统计代码放到页面的最下面，并且不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码，或者在最下方单独做一个Table或者div来放置计数器。这样，在计数器不能访问的时候，你的网站速度也不会受到丝毫影响。

3）有些内容可以静态化就将其静态化，以减少服务器的负担。如用图片代替flash，这对SEO也有好处。同理，能用静态HTML页面实现的，尽量用静态网页。因为数据更新的原因，ASP、PHP、JSP等程序实现了网页信息的动态交互，运行起来的确非常方便，因为它们的数据交互性好，能很方便存取最新内容、更改数据库的内容，使网站“动”起来，如：论坛、留言板等。但是这类程序必须先由服务器执行处理后，生成HTML页面，然后再“送”往客户端浏览，这就不得不耗费一定的服务器资源。如果在虚拟主机上过多地使用这类程序，网页显示速度肯定会慢，所以如何可能，为了网页打开速度加快，请尽量使用静态的HTML页面。

四、结语

对于网页设计者来说。每一个页面都应该是精雕细刻，尽其可能优化每一个细节，加快网页下载的速度，以提高用户体验的感受。本文针对网页制作中的优化策略进行了详细的讨论。通过多方便的优化，力求用户最终能获得最优的体验。