欢迎访问重庆小谭网站建设官方网站

优化详情

网站页面精简的10个优化技巧

网站页面精简的10个优化技巧

据调查,网页大小在2013年平均增长了32%,平均达到了1.7M,单独的HTTP请求达到96个,说实话,这是一个令人震惊的数字,而且这只是个平均值,有一半的网站会大于这个值。那么,一个“页面超重”的网站有什么影响呢?具体来说,有以下4点:

①、网站代码越多,用户下载的就越多,加载速度就会越慢。在国内,并不是每个人都能享受20M的宽带,每一个开发者心里都很清楚,用户不愿意等。

②、众所周知,移动互联网发展迅速,对于2G网络来说,加载1.7M的页面甚至需要一分钟时间。

③、影响搜索引擎抓取速度将会对网站排名造成很大影响。

④、对于开发者来说,代码量越大,就越不容易更新和维护。

如今已经有很多人开始关注这个问题,并出现了很多优化的工具,而且这些技术都非常容易上手,不需要花太多时间,也不需要重新开发。

网站页面精简的10个优化技巧

在本文中,给大家一些建议,虽说前三个建议实际上不能给“网页减肥”,但它们仍能有效的加快网页加载速度。

1、用GZIP格式压缩

我们在Linux中经常会用到后缀为.gz的文件,它们就是GZIP格式的,现今已经成为Internet上使用非常普遍的一种数据压缩格式,或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术,大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度。

一般对纯文本内容可压缩到原大小的40%,这样传输就快了,效果就是你点击网址后会很快的显示出来,当然这也会增加服务器的负载,一般服务器中都安装有这个功能模块的。

根据W3C组织调查,大部分的网站都没有启用压缩功能。

2、支持浏览器缓存

如果浏览器支持缓存,我们就不用重复下载网页资源,简单的设置缓存方法是在响应头中添加相应的内容,包括:Expires header,Last-Modified等。你可以可以通过配置服务器来自动添加这些属性,比如你在Apache服务器中配置缓存所有的照片一个月:

3、使用内容分发网络 (CDN)

CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。CDN有别于镜像,因为它比镜像更智能,或者可以做这样一个比喻:CDN=更智能的镜像+缓存+流量导流。因而,CDN可以明显提高Internet网络中信息流动的效率,从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题,提高用户访问网站的响应速度。

以上三个方法可以有效地加快页面的访问速度,现在我们将对你的代码进行诊断,帮助我们给页面减肥。

4、删除不需要的资源

当你不再需要一个组件的时候,你应该删掉它的CSS和JavaScript代码,如果这些代码都单独放在一个文件中,那删掉它们也不是难事,但如果已经没有用的代码和其它代码在一个文件中,那你肯定要费不少精力去删掉它们。

5、style和font重复定义的沉余代码

要充分利用好CSS代码定义自己的颜色大小等,有些网站既用了CSS代码定义了之后又去使用style或者是font这样的代码进行定义,这样就无形中增加了无用代码,容易造成代码冗余,因此我们要对这样的代码进行压缩,实现代码精简。

6、通用和最小化CSS

理想情况下,需要一个单独的CSS文件,让每个页面都调用这一个布局,当然,如果你想要支持老版本的IE,你就得多弄一个CSS文件。另外还要提醒大家一点:当你把它们构建到服务器上之前,你应该把代码间所有不必要的格式都删掉。

7、通用和最小化的JavaScript

利用外部文件,我们可以用Javascript代码和CSS代码放在外部文件里面,在我们的HTML代码里面加上调用代码进行调用即可,如果打开一个网站去检查它的源文件,前面如果有大量的Javascript代码和CSS代码就容易使得网站有用的内容文字部分推到后面去了,是不利于搜索引擎抓取的。最好在HTML的body标签后放置JavaScript引用代码,这样能保证JavaScript代码不影响到其它内容的加载。

8、减少页面嵌套的表格

对于表格要尽量少使用,尤其是嵌套的表格部分,虽然CSS排版使得我们编写代码更加的精简容易,但往往也是少不了表格的使用的,我们可以不去避免,但一定要减少使用多层嵌套的表格,不要产生没有用的代码。

9、网站图片的优化

对于一些图片站来说,加载错误的图片格式会对你的网页造成很大影响,所以,马海祥建议图片站的站长一定要多对图片做些优化。

(1)、图片优化原则

一般来说选取图片我们应用遵循如下原则:

①、照片使用JPG格式。

②、其它所有的图片都使用PNG格式。

(2)、调整大图的大小

目前智能机所拍出的照片越来越大,你不可能把原照片直接展示在页面中,普通的编辑器都会直接上传原图,这样会让页面的加载速度慢到另一个级别,在正常的照片处理中,一般都没有必要给用户高质量的图片展示,所以,你需要一个自动调整图片大小的工具。需要注意的是,图片的尺寸是不能超过容量的大小的,这样一来页面加载了全图,却无法展示出来,现在照片的尺寸基本上都超过电脑显示屏的尺寸了。图片的大小在网页总大小中占很大的比重,图片减小50%会导致整体页面大小减少75%,所以你应该认真解决一下图片的加载。

(3)、进一步压缩图片

仅仅调优图片的大小是不够的,你应该通过第三方工具对图片进行分析,进一步压缩图片。比较好用的工具有OptiPNG,PNGOUT,jpegtran和jpegoptim,这些工具大都能安装成独立的工具或是整合到开发过程中,另外像Smush这样的工具,还可以直接在云端处理。

10、删除不必要的字体和注释

Web fonts已经彻底改变了字体的设计,它减少了很多不必要的文本,然而,目前的字体仍然会给你的网页带来多余的字节。如果你使用超过两种字体,这就已经开始对性能造成影响了。网页代码尽量少用注释,我们知道一段程序里面加上注释能够便于我们快速找到和理解具体代码对应的功能,对于编程人员修改网页是有帮助的,但是这样的代码对于搜索引擎来说是没有任何的意义的,只能说是噪声,因此我们要减少网页代码里面出现的注释部分。我相信大部分网站都可以通过以上的优化减小大概30%-50%的重量,但是身为一个完美主义的开发者这是远远不够的,我们在接下来的系列文章中会继续对网站瘦身进行深入研究。

点评:搜索引擎蜘蛛在搜索和爬行我们网站的时候,除了有效地的信息代码之外,其它的基本上对蜘蛛来说都是一个坎坷,垃圾代码过多,只能增加蜘蛛爬行提取网站文字内容的困难度,为了方便搜索引擎提取我们的网站,我们需要尽量降低搜索引擎爬行网站的时候的坎坷,方便蜘蛛更容易提取有效地信息,所以简单的方法就是我们精简html代码,使有效地文字内容所占的比例较高。

编辑:小谭建站 来源:互联网 发布日期:2018/9/9 14:55:42 修改:2018/9/9 属于:网站优化