网站前端页面优化给你的页面减肥

浏览量:223 次

从浏览器输入网址或从别处链接打开的网页,一直到整个网页全部加载完成,这个过程浏览器会加载哪些文件呢,首先来看一下,网页由哪几部分组成的,一。网页文档,即是网页上显示的文本文字,这是一个比较小的部分,二。图片,即是网页上显示的图片,图片占整个页面大小是最大的一部分,三,对象,哪些是对象元素呢,就是如flash,插件视频之类的,这个是比较大的,四,脚本,这个主要是js文件,,五,样式表,控制网页显示效果的。

那么,网页文件越大,浏览器从服务器下载到显示页面的时间会越长。这个对网站seo是非常不好的,具体的内容可以参看SEM一家之言中的一篇文章《网页加载速度是如何影响seo效果的》, 这篇文章写的比较全面,有一些网站本身可能是因为CMS的原因,也可能是服务器的原因,在浏览器的状态栏总是在请求的状态,这个也是要注意的。所以,对于 网站,文件总体积包括,上面提到的内容,html,外部css,外部的javascript,和网页上的图像,声音,视频,flash等一些文件的大小。 这些文件中html,css,javascript,全是文本文件,这些文件在网页编写好候可以去控格,不过现在的web服务器都有压缩文本的功能,管理 员可以设置。

但是像图像,声音,视频,flash这些文件在网站占的比重很大,而且这些文件相对于文本文件要大很多,在网站打开过程中是影响下载速度的重要因素。

 

这是国内某b2c商城首页的大小,

 

这是淘宝首页大小

 

163首页大小,相对于门户型网站,商城网站页面确实是比较大。上图中是firefox中的一个插件,web developer 中有一个功能可以查看网页的大小 ,此工具对于技术分析网站非常有用,功能比较强大,有需要的朋友可以装上用一用,seo很多也是要分析网站底层代码,分析竟争对手的网站等。

一般情况下,要求每页多大才合适呢,即使是所谓的专家在这个问题上, 也普遍存在着分歧,如果你的网站需要专业的品质的图形,那么就不可能遵守“20k定律”,比如现在的电子商务商城,图片的处理效果,给销费的感受是不一样 的,如一些网站制作专题的,大部分是图片,那么这个时候,在设计页面时就可以将大的图片切割成比较小的部分,如国内的moonbas商城,虽然是专题但是 他们把大图分成了很多小的部分,这样用户在打开网页时,网页被加载的就比较快,网站打开速度很大程度上会影响用户的体验,试想,一个网站打开的速度很慢, 你一般情况下会等多久呢,不要让用户等待太久,否则你将失去潜在的用户或定单。

那么,要给网站的网页要减肥,要做到哪些比较好呢?

1. 把大部分的css样式表和javascirpt文件放入到网页的外部文件,将它们单独写在一个文件中,只有在网站第一次被打开时才引用这些文件,才进行加载。然后,网站的 任何页面都可以重复使用这些文件,而不需要再一次的下载,虽然这些文件可能不是很大,但是如果每次打开新的页面都要加载,这些也是节省用户带宽的一部分。

2. 如果可以的话,尽量使用不同页面的图形,音频,视频。这些文件也是在第一次使用时才被加载。

3. 不要使用不必要的图片,动画,声音,不管是出于实用性或是为了增加网站的美观,每个文件都应该有它存在的原因,有些图片是用来填充空白的,像这样的图片可以去掉。

4. 尽量使用小尺寸的图片,而不是大尺寸的图片,因为在相同的情况下,小图片的下载速度更快,如果对图片像素要求不高的,可以使用gif格式的图片,例如,做为背景的图片可以用小尺寸重复,而不用一个大图作背景,如一些商城网 站,专题页面的图片可以切成小尺寸的图片,这样可以让你的网页打开速度加快。

5. 尽量减少导航按钮中用图片作翻转的效果,因为要下载不同的图片,相反,如果,用的是文本链接,用css控制翻转也可以达到同样的效果。

以上基本列出了影响网页大小的相关因素,可能还有一些没有找出来,希望有朋友找出更多的影响网页优化的更多因素

作者信息:刘运威博客

 
®关于本站文章™ | 若非注明原创,默认 均为网友分享文章,如有侵权,请联系我们™
㊣ 本文永久链接: 网站前端页面优化给你的页面减肥