提高网站打开速度的18点要素和五点建议

我们都清楚,网页的打开速度十分重要,如果网页打开时间超过8秒,那么访客将减少60%。所以,我们需要对网页进行优化,以便能够达到最佳的用户体验。

      下面是18条网站加速方法:

      1、减少HTTP请求

      图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。

      2、设置头文件过期或者静态缓存

      浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东 西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。

      3、Gzip压缩

      Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到这里测试:gzip压缩检测

      4、不要在HTML中缩放图片

      图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB数是不会减少的。

      5、优化图片

      将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG及PNG图片以达到优化效果。

      6、不要出现404页面

      站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。

      7、减小Cookie

      Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率。

      8、减少iframe数量

      需要更有效的利用 ifames。        iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本        iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义

      9、尽早的释放缓冲

      当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。

      10、删除重复脚本

      重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。

      11、减小JS和CSS的体积

      写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。

      12、减少DNS查找

      减少网站从外部调用资源,网页加载效率会大大提高。

      13、将JS和CSS外链

      一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!

      14、避免CSS表达式

      CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!

      15、把CSS放顶部

      让浏览者能尽早的看到网站的完整样式。

      16、把JS放底部

      网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。

      17、用GET方式进行AJAX请求

      Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。

      18、减少DOM的访问次数

      JS访问DOM是很慢的,尽量不要用JS来设置页面布局。
 

加快网页打开速度的五点建议

 

 

      加快网页打开速度,虽然是老生常谈,但不论什么时候都是站长密切关心的问题。其实有不少途径可以加快网页打开速度,例如你可以换一台性能更高的服务器,换一条带宽更多的网络线路,再加上CDN加速服务等等,这些都是从硬性方面来考虑的,但是,毫无疑问,不是每个站长都有这个能力去购买这些服务的,所以,草根站长只能从软性方面来考虑了。

      本文提及的加快网页打开速度的五点建议,就是从网页的优化来考虑的。

      一、优化图片

      优化图片包括减少图片数、降低图像质量、使用恰当的格式。

      1、减少图片数:要尽量避免使用过多的图片,最好不要使用图片,加载10行文字绝对比加载5行高的图片要快得多。

      2、降低图像质量:如果不是很必要,尝试降低图像的质量,尤其是jpg格式,降低5%的质量看起来变化不是很大,但文件大小的变化是比较大的。

      3、使用恰当的格式:一般在网页上使用的图片格式有三种,jpg、png、gif,有时候使用bmp。我们需要知道在什么时候应该使用什么格式,以减少网页的加载时间。       a、JPG/BMP:一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。       b、GIF:提供的颜色较少,可用在一些对颜色要求不高的地方,比如网站logo、按钮、表情等等。当然,gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。       c、PNG:PNG格式能提供透明背景,是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

      二、标明图片高宽

      这点我们非常容易忽略,在写html代码时,很少考虑到要去标明图片的width和height属性。如果浏览器没有找到这两个参数,它需要一边下载图片一边计算大小,如果图片很多,浏览器需要不断地调整页面。这不但影响速度,也影响浏览体验。

      三、不要在HTML中缩放图片

      图片要用多大的就用多大的,1000X1000的图片被width="100″ height="100″以后,本身的KB数是不会减少的。

      四、减少HTTP请求

      当浏览者打开某个网页,浏览器会发出很多对象请求(图像、脚本等等),视乎网络延时情况,每个对象加载都会有所延迟。如果网页上对象很多,这可以需要花费大量的时间。因此,要为http请求减负。如何减负?       1、去除一些不必要的对象。       2、将临近的两张图片合成一张。       3、合并CSS       看看下面这段代码,需要加载三个CSS:       <link rel="stylesheet" type="text/css" href="/body.css" />       <link rel="stylesheet" type="text/css" href="/side.css" />       <link rel="stylesheet" type="text/css" href="/footer.css" />       我们可以将其合成一个:       <link rel="stylesheet" type="text/css" href="/style.css" />       从而减少http请求。

      五、减少DNS查找

      减少网站从外部调用资源,网页加载效率会大大提高,所以,不要使用过多的网页插件。这点建议已经被纳入Google的网站性能分析报告里了。

posted @ 2015-10-27 14:57  MrZou  阅读(353)  评论(0编辑  收藏  举报