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

从浏览器输入网址或从别处链接打开的网页，一直到整个网页全部加载完成，这个过程浏览器会加载哪些文件呢，首先来看一下，网页由哪几部分组成的，一。网页文档，即是网页上显示的文本文字，这是一个比较小的部分，二。图片，即是网页上显示的图片，图片占整个页面大小是最大的一部分，三，对象，哪些是对象元素呢，就是如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控制翻转也可以达到同样的效果。

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

作者信息：刘运威博客

标签： 网站结构优化 网站页面优化 网站代码优化 

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。