谈起网页的优化这个问题很多人都没有什么概念,有很多的业内人士都对网页优化一无所知或者知之甚少。说起对网页优化的理解,我曾经去各大搜索引擎上搜索过"网页优化"一类的话题,结果都是介绍如何优化搜索引擎排名的文章,其实这只是优化概念的一个组成部分,而网页的优化工作是由很多方面的优化组成的,作为一名优秀的网页优化工作人员必须具备多方面的知识,不仅仅要掌握网站设计制作技术(包括网站架构设计、网页设计以及制作页面编写代码等等);还要掌握很多计算机其他方面的知识(包括电子商务、人机交互、易用性和一些相关的软件知识等等);甚至需要掌握心理学、商业运作等相关知识。
我认为网页的优化应该是由两个方面组成的:1.技术优化,2.人文优化(这个分类只是我总结的,没有人给出过具体定义)。技术优化指的是代码的优化、目录结构的优化和针对搜索引擎的优化等等针对技术方面的优化工作,一般都是看不见摸不着的但是会给用户带来不少方便也会给网站带来更大的效益,技术优化有一定的模式而且需要优化的东西也比较固定相对简单一些只是时间问题;人文优化指的是交互性优化、易用性优化等等针对用户使用方面的优化工作,这一部分是网站用户看得见摸的着的东西,人文优化是最花经历最困难的因为我们要猜测使用者的心理。下面我就分别对这两个方面进行解释。
1.技术优化:
技术优化主要分为代码优化、目录结构优化和针对搜索引擎的优化三个部分。这一部分的优化工作主要是由网站开发人员测试提出方案完成的,而且有一定的规则,所以相对要简单一些只是时间问题。
(1)代码优化:
代码优化主要解决的问题就是页面浏览速度和适应性的问题。文字和图片是构成页面的两个主要因素,所以我们的优化也要从文字和图片开始。文字我们在制作页面的时候基本上都是定义好的一般使用宋体和12px,随着代码的标准化字体的样式大小等等的指定应该使用css样式表来完成,而现在被广泛应用的、等等标签都是不标准的,也会慢慢被css取代,现在很多大型的网站包括各个门户网站像是这样不标准的问题还是广泛存在几乎每个页面都会有,所以css样式表是我们在优化过程中应该注意检查的问题(其实这个问题应该是在页面制作的时候就解决的)。图片问题主要存在size过大的问题,在这里我们把图片的优化归在代码优化一部分一起介绍而不另分一类,是因为图片优化与代码内容优化的目的是一样的。网页中一般应用两种格式的图片jpeg和gif,这两种图片的应用很多人把握的并不是很好,jpeg适用于颜色比较多、构成比较复杂的图片(比如一些照片、渐变颜色等等),gif适用于颜色比较少、构成比较简单的图片(比如网站的logo、大的色块构成的图片等等)。Gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度。减小网页size提高网页下载速度还有一种简易的方法就是使用一些网页减肥的小工具,我们可以去下载一些这样的工具他们可以使你的网页缩小20%~50%达到事半功倍的效果。表格是页面最重要的排版方式,在浏览器读取网页代码的时候,必须读完一个完整的table才会显示出来,
> 如果一个大的table里边含有很多小的table那么浏览器会在读完整个大的table才将整个的内容显示出来。我们在浏览一些页面的时候经常会出现页面半天才会显示出来,最后是在等不及了按了"停止"按钮,页面一下子显示出来了,这就是在一些小的table外边嵌套了一个大的table,而小table已经读完了就是还没读完整个的table浏览器不会显示,这样会大大减慢页面浏览速度。因此我们要尽量减少表格层次,尽量避免将一些小的表格嵌套在大的表格中间。还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码,注意检查删除一些没有用的代码。网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率,应该最低照顾到800×600的用户(分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600),所以页面最宽不要超过780,一定不要让用户横向拖页面。
半功倍的作用。
念我们言归正传,当我们要对网站进行优化的时候,我们很快的就完成技术优化,因为技术优化有特定的步骤需要优化的项目也比较固定而且有据可依。
下边我们按照"试用"流程分析一下在优化过程中需要注意的问题。从登陆这个网站开始,我们是不是能够清楚的看到这个网站叫什么名字?是干什么的?那里是产品的目录?那里是导航菜单?那里是今天的重点推荐产品?那里是折扣产品专区?这一连串的问号是针对电子商务网站而言的,如果对于别的网站我们会考虑别的因素,比如针对一个新闻页面而言,我们就会考虑那里是今天的头条新闻?我要看昨天晚上中国队足球赛的比分和图片在那里?等等。这种测试并没有特定的规范,任何动作都是随机的都是我们突发的动作,所以这样的测试不能像是那种商场或者专卖店等等地方的测试一样给我们一个很长的表格让我们去画对勾画杈子。一切测试做的都要非常自然,只有这样我们才可以真正了解到用户在使用过程中遇到的困难。我们有的时候也可以给被测试人一个题目让他去完成,比如:让他去网站上买一张最新的大片DVD,或者然他们去查找一个最新的消息甚至是一条一个月以前的消息。整个测试都要在和谐的环境下进行,不要让参与测试的人感到紧张,那样会大大降低测试结果的正确性。测试还需要根据经费、网站规模等等情况制订不同的方案。
下面是一个用户浏览一个网站的过程图,这张图有助于我们了解用户浏览网站的整个过程。我们可以根据这张图列出的步骤细心观察测试时候用户在网站上完成一个工作时候在每一个步骤里所用的时间、都做了些什么,并记录下来认真分析这些数据,这些数据也是我们优化动作的依据。
我们先看一个大多数网站都会犯下的文字错误,文字是构成网页的最重要的元素之一,我们文字可以用文字的颜色、大小和位置来区分他们的重要性,分为标题、内容等等。有很多网站的首页进去我们一眼看到的是黑压压的一片文字,马上我们会对这个网站都没有好感。这就是我们国内很多网站都有的错误,网站会因不同的目的有不同的设计方向,很多企业的领导者并不懂得设计,他们会去参考一些别人的网站来对设计者提出自己网站的设计要求和想法,这样就会造成不管什么方向的网站感觉都一样,从而失去了自己的主题。
比如现在我们去一些企业的网站,上去之后没看到这个企业是干什么的,第一眼就是大片的企业新闻,这样的大片新闻感觉企业网站变成了新闻网站。
有人说了那我们把企业介绍放在首页吧,这样一上网站的首页人家就看见我们公司是做什么的了。看上去真是好主意,但是我们应该明确一点用户是在"浏览网页"而不是在"阅读网页",这样大片的文字根本不会有人有兴趣看,用户只会对自己感兴趣的东西进行阅读,其它基本上都是浏览。
我们可以作一个简单的试验,现在你可以递给你身边的一个人一张报纸,让他们看报纸,细心观察一下他们怎么看报纸,每一个人都会整个把报纸翻一下,起码他会看完一整版的标题然后开始阅读一个文章。绝对没有人会拿起报纸从左上角或者右下角开始一个字一个字的阅读报纸。网站的好处就是在于"链接",我们可以充分的利用链接引导用户阅读他们感兴趣的东西,或者引导他们阅读我们希望他看见的东西。我们现在就可以去优化一下以前的网站了,去掉首页大片的文字,根据需要改成链接。
还有一个各个商业网站都会犯下的错误,就是在让客户填写注册信息的时候需要必填的栏目太多。很多上网的人都有这样的经历,现在大多说商务网站都会有注册一栏,如果注册成为会员就会有什么什么样的服务,很好我们进去注册一下吧。点击注册按钮,打开页面,好家伙怎么要天那么多条,还都是画着红色星号的必填!算了还是不注册了!一下子这个网站会因为注册少了很多顾客。
有的人没被吓跑坚持填写,好吧开始填写了用户名、密码、确认密码……"身份证号码"?"手机号码"?一下子我们停住了,不填这些可以么?但是画着红色星号,算了我不想让别人知道这些信息,我也走吧,看看别的网站有没有同样的服务而且需要的信息少一点,尽管别的网站服务不好而且不如这个网站有名气。这就是很多人上网的经历,很多网站的拥有者急于求成,想马上控制到客户的资料,他们会觉得这样就会占到市场的先机。其实他们错了,想一下我们先让用户都来使用我们的网站慢慢的他们觉得我们这里很安全而且服务很好就会有人想得到更多的服务,他们自然而然的就会注册这些信息了。
但是我们在用户还没有了解这个网站的时候就把他们吓跑了我们就会彻底的失去这部分用户的,这样给网站和企业带来的损失要远远大于那些不管怎么都会注册的用户带来的利益要大。所以当我们在优化过程中看到网站的注册过程中有这些栏目的时候我们要建议他们把必填改为自愿填写,而且在一些关键页面里边添加一些关于注册客户和普通客户会享受不同待遇的提示,这样会起到事半功倍的作用。
我们已经介绍了两个关于人文优化的例子,由于这样的例子很多我们也不一一列举,要在实际的工作中去总结。并不是最好看的网页就是最好的网页,实用性要比艺术性更重要。
上边这些优化的问题适用于我们对一个已有的网站进行优化,如果我们要重新做一个新的网站,最好在初期就考虑一些这样的问题,毕竟做任何事事先考虑要比事后弥补强的多。这些紧紧是我自己的一些经验总结和大家分享,文章还有很多不足之处,希望大家多多提点!我的QQ:250596以后多多交流!希望大家都能够做出最棒的网站,提高中国网站设计制作行业在世界的地位!