1 、减少页面 HTTP 请求数量
比较直接的理解就是要减少呼叫其他页面、档案的数量。
A. 我们在使用 css 格式控制的时候,经常会采用 background 载入很多图形档案,每个 background 的影象至少产生 1 次 HTTP 请求,一般我们为了让页面生动活泼会大量使用 background 来载入背景图,要改善这个状况,可以采用 css 的 1 个有用的 background-position 属性来载入背景图,我们将需要频繁载入的多个图片合成为 1 个单独的图片,需要载入时,采用以下形式载入即可将这部分图片载入的 HTTP 请求缩减为 1 个。
2
网站载入时间 网站访问速度 网站优化 多用户体验
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 配置中快取控制的 例子:
1
网站载入时间 网站访问速度 网站优化 多用户体验
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 等级应该问题不大。