网友上网都不喜欢用太多的时间等待网页的开启,等待的越长,多用户可能会直接关闭网页,这样就会损失很多流量!其次,关键字的排名与网页的开启速度也有关系,这个主要体现搜索引擎对多用户体验度上,多用户体验度好,排名相对其它网站就好些。因此我觉得我们有必要去提高网页的开启速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!下面给出 20 种方法帮您提高网站访问速度缩短网页载入时间。

1 、减少页面 HTTP 请求数量

比较直接的理解就是要减少呼叫其他页面、档案的数量。

A. 我们在使用 css 格式控制的时候,经常会采用 background 载入很多图形档案,每个 background 的影象至少产生 1 次 HTTP 请求,一般我们为了让页面生动活泼会大量使用 background 来载入背景图,要改善这个状况,可以采用 css 的 1 个有用的 background-position 属性来载入背景图,我们将需要频繁载入的多个图片合成为 1 个单独的图片,需要载入时,采用以下形式载入即可将这部分图片载入的 HTTP 请求缩减为 1 个。

网站载入时间 网站访问速度 网站优化 多用户体验 

B. 采用 Image maps,这个方法也比较常用,只是限于同 1 个区域使用。

C.Inline images,这个方法很少见到,但对于很小很简单的影象却是很实用的,相关语法标准参照:tools.ietf.org/html/rfc2397 。

2 、使用 CDN(Content Delivery Network) 网络加速

现在国内做 CDN 加速业务的公司很多,简单讲,就是将您的图片、视讯扩散到 CDN 网络所能到达之处,让多用户访问时能就近下载到这些档案,从而达到网络提速的目的,这样做,同时能减轻您自己网站的负载。

3 、新增档案过期或快取头

对于同一多用户频繁访问的图片、 Js 指令码档案等可以在 Apache 或 Nginx 设定其缓冲 时间,例如设定 24 小时过期时间,这样多用户在访问过该页面之后再次访问时,同一组图片或 JS 不会再重复下载,从而减少了 HTTP 请求,多用户访问速度明显有 所提升,同时服务器负载也会下降。下面给出 nginx 配置中快取控制的例子:

网站载入时间 网站访问速度 网站优化 多用户体验 

4 、服务器开启 gzip 压缩

这个大家都比较了解,即将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的 资料量会大幅减小。通常在服务器上的 Apache 、 Nginx 可以直接开启这个设定,也可以从代码角度直接设定传输档案头,增加 gzip 的设定,也可以从 负载均衡装置直接设定。不过需要留意的是,这个设定会略微增加服务器的负担。

5 、 css 格式定义放置在档案头部

这项设定对于多用户端是慢速网络或网页内容比较庞大的情况比较有利,可以在网页逐步呈现的同时仍会保持格式资讯,不影响网页美感。

6 、 Javascript 指令码放在档案末尾

很多 Javascript 指令码执行效率低下,或者有的第 3 方域名指令码出现意外无法载入, 如果将这些指令码放置到页面比较靠前的位置,可能会导致我们自己网站的内容载入速度下降甚至无法正常载入,所以一般将这些指令码放置在网页档案末尾,一定要放 置在前面的指令码要改用所谓的 “后载入” 方式载入,在主体网页载入完成后再载入,防止其影响到主体网页的载入速度。

7 、避免使用 CSS 指令码 (CSS Expressions)

有时为了要 css 的引数动态改变,可能会采用 css expression 来实现,但这样做得不偿失,会使多用户端浏览器负担明显加重,所以不建议这样做,如果需要改变,可以使用 Javascript 指令码去实现。

8 、 css 、 javascript 改由外部呼叫

如果 css 、 js 内容比较庞大,尽量不要写到同 1 个页面中去,改由外部载入比较妥当,因为浏览器本身会对 css 、 js 档案进行快取。

9 、压缩 Javascript 、 CSS 代码

一般 js 、 css 档案中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,一般可以保留开发版本,利用工具生成生产版本,2 个档案比较,一般压缩率能达到 50% 以上,减少的资料量还是比较可观的。

我这个博客刚改版完成,各种代码还没有进行优化和压缩,目前 yslow 评级只能达到 D, 等有时间进行部分优化,达到 C 等级应该问题不大。

10 、避免采用 301 、 302 转向

11 、养成良好的开发维护习惯,尽量避免指令码重复呼叫

12 、配置 ETags

13 、 Ajax 采用快取呼叫

这个的使用可以参照 Discuz 论坛代码,里面对于大量使用的 Ajax 呼叫都采用了快取 呼叫方式,一般采用附加特征引数方式实现,注意其中的

网站载入时间 网站访问速度 网站优化 多用户体验

就是特征引数,这个引数不变化就使用快取档案,如果发生变化则重新下载新档案或更新信 息。

14 、合理使用 Flush

多用户端传送浏览请求后,服务器端一般要花销 200-500ms 去处理这些请求,在此期间,多用户端浏览器处于等待状态,如果要减少多用户等待时间,可以在适当的位置使用 flush,将已经就绪的内容推送到多用户端,这在 php 中很容易实现例如:

网站载入时间 网站访问速度 网站优化 多用户体验

15 、 Ajax 呼叫尽量采用 GET 方法呼叫

实际使用 XMLHttpRequest 时,如果使用 POST 方法实现,会发生 2 次 HTTP 请求,而使用 GET 方法只会发生 1 次 HTTP 请求。如果改用 GET 方法,HTTP 请求减少 50%!

16 、尽可能减少 DCOM 元素

这个很好理解,就是尽可能减少网页中各种<>元素数量,例如

的冗余很严重,而我们完全可以用取代之。

17 、使用多域名负载网页内的多个档案、图片

记得有资料说明,IE 在网页载入过程中,在同 1 时刻,对同 1 域名并行加的 HTTP 请求数 量高为 2 个,如果网页需要载入的档案数量超过 2 个 (通常远远超过..),要加快网页访问速度,知名将档案分布到多个域名,例如 19 楼,其 js 档案采用独 立的域名,据说百度的图片服务器数量在 20 台以上。

18 、缩减 iframe 的使用,如无必要,尽量不要使用

iframe 通常用于不同域名内容的载入,这同时也可能因 iframe 内容载入速度影响到主网页载入速度,如果可能,把需要载入的内容抓取到本地直接嵌入。如果实在需要 iframe 载入,采用后载入方式实现。

19 、优化图片档案

优化图片档案,减小其尺寸,特别是缩图,一定要按尺寸生成缩图然后呼叫,不要在网页中用 resize 方法实现,虽然这样看到的图片外形笑了,但是其载入的资料量一点也没减少。曾经见过有人在网页中载入的缩图,其真实尺寸有 10M 之巨…

普通影象、 icon 也要尽可能压缩后,可以采用 web 影象储存、减少颜色数等等方法实现。

20 、当页面内容庞大到一定程度,可以采用分页的方式展现,或者 taobao 的那种翻页后载入方式。