改善网站页面载入时间以提高SEO排名 - 特别针对 Google 排名

34 views
Skip to first unread message

老K实验室

unread,
Sep 17, 2009, 12:50:07 PM9/17/09
to ee

先来看看谷歌的中文管理员博客里面这样的一篇文章:

如何让网页更快

谷歌公开表明对网页载入时间的关注,这点看来要引起广大SEO的高度重视。

Google 的理念就是——浏览者想要的,也就是搜索引擎提倡的,一切从用户出发。网站和网页载入速度的问题就是浏览者关注的问题之一,每个访问者都希望网站打开速度越快越好,因此 Google 也对页面载入速度提出了要求。这篇谷歌中文管理员博客的文章,只不过再一次从 Google 官方的角度印证了这一要求而已。

为什么访问速度会影响到排名?
1. Google 网站管理员工具里面 有一个指标叫做"平均载入时间" - Time spent downloading a page (in milliseconds)
2. Google 搜索记录这个时间当然会把它作为一个排名的参数,它都作为一个指标摆在那么显眼的地方,自然有它的用意。
3. 更深层次来分析,页面载入时间的减少将会在很大程度上改善用户体验,打开页面用更少的时间来等待,直接的影响就是弹出率的降低,高点击/弹出比意味着此网站或者内容好权重高,或者就是对用户较友好,Google自然将会把此指数作为衡量页面质量的参数,最终结果就是成为其影响排名的因素之一。
4. 页面的载入时间相对其它网站来说,并不是在全球范围做比较,而是分区域,主要是根据服务器所在的国家及地区。所以只要你做的比你所在的地区的其它站长做得好,就会胜出。这就是在 google 不同的区域搜索引擎中,比如 google.cngoogle.com 又或者 google.com.au 搜索相同的内容,排名却不同的原因之一。

如何分析网站及页面载入速度?

之前老K实验室已经提到了 Google 的 Page Speed 网页速度测试工具 ,这个工具是 Google 官方近期才推出的,可以针对网页载入速度,以及载入速度的影响因素进行分析,并提出简单的改善建议,这个工具是基于Firefox以及Firebug的,也就是说需要安装Firefox并安装Firebug插件以后才能使用它。

当然更早之前还有 YAHOO 著名的 网站速度和检测工具 —— YSLOW 此工具同样需要配合Firefox 以及 Firebug 来使用。有趣的是,它的英文谐音就是 Why slow(为啥慢呢)。

[题外话,老K实验室虽然已经用了好几年的 Firefox,深刻体会到 Firefox 的扩展性的强大,不过最近用得比较多的倒是 Google ChromeOpera,个人感觉这两个东西在本身程序打开速度以及浏览网页的速度方面,比 Firefox 快很多,特别是英文版(仔细去体会中英文版本的区别吧),老K实验室的 Firefox 装载了太多的插件导致速度被拖缓。]

此外还有两个不错的网站速度检测工具,老K实验室在此顺带提一下,具体怎么样,自己用过便知: 

如何改善页面载入速度?

这里面什么少用flash图片格式大小压缩之类的技巧就不多说了,现在主要提提以下这几点:

1. 优化、简化代码,使用符合W3C标准的,完全使用 css 的表现层,样式与代码完全分离的页面。这里面主要是将CSS 和 .js 文件用外部文件的形式链入,减少HTML页面本身的代码量。

2. 减少 HTTP 请求数目
每个文件都会产生一个HTTP请求,这里面包括:
减少 CSS 样式表数目,如果链接了多个 CSS文件,尽量将能够合并的合并成一个 CSS样式表文件。

减少 Javascript 条目,同上,能够合并的尽量合并为一个文件。

减少 图片请求,在模板类中使用 CSS Sprites 的方式载入图片。不是什么新技术,雅虎等网站老早就在用了。
简单说就是依靠CSS样式表定义,在模板中大量重复使用一张图片中的不同部分,使得页面整体产生的HTTP请求条目降低。
这里就不再多说,关于 CSS Sprites,参考以下文章:
CSS sprites 技术使用心得
CSS Sprites
CSS Sprites: Image Slicing’s Kiss of Death
14 Rules for Faster-Loading Web Sites
High Performance Web Sites

使用CDN 内容分布网络 (Content Delivery Network)
比如jquery.js文件,能引用Google官方的,就引用Google官方的。
现在已经有很好的内容分布服务,比如之前老K提到多次的由 Amazon S3 扩展的CDN内容分布服务 Cloudfront ,把图片,CSS,JS之类的文件都放在Amazon 的 Cloudfront 云分布服务器上,这样每次访客从浏览器端发出请求,Amazon的内容分布服务就会寻找离客户最近的数据中心里面的文件副本,发送到客户端,大大将少了传输所需要的时间。
这对访问量已经行成一个数量级的网站来说,是一个在不升级自身网站服务器配置,或是增加自身网站服务器数量的情况下,大大降低自身服务器负担的好办法。
这与镜像服务器有些不同,镜像服务器是整个网站的镜像副本,而内容分发则是网站引用文件的数据副本(如图片、CSS、JS文件等)在Amazon云集群服务上的分发,对比起来使用 CDN 的成本更低廉,维护和管理起来也更方便和容易,你只需要更新Amazon S3服务上的文件副本,Amazon Cloudfront 就会同步进行全球性的文件更新。当然 Amazon 还有官方的API,只需要一个帐号获得API KEY,你就可以将Amazon的服务整合到你现有的Web程序中去。

设置图片、CSS、JS文件过期时间
这被称作 Expires header 技术,通过设置最少1个月的文件过期时间,使得客户浏览器在刷新的时候对这些缓存未过期的文件不产生HTTP请求,而是直接调用本地浏览器中的图片、CSS和JS文件缓存,减少了HTTP请求,自然就加快了载入速度。

3.动态内容静态缓存化
这里不是指SEO里面的网址伪静态,而是指将动态CMS内容管理系统生成的文件完全静态HTML缓存化。这样当客户端浏览器发生请求的时候,直接调用的是CMS生成的缓存的静态HTML副本文件,而并非每次读取某个地址,CMS都要进行一番查询数据库操作调用某个模块等等消耗时间的操作,最后才将页面内容发送到客户端。这不仅仅能加快用户访问页面时间,也能最大程度上减少服务器在高峰期的CPU占用时间和内存消耗,加快服务器响应速度。

4. 使用 Gzip 压缩后的网页,CSS以及JS文件
此部分设计到技术层面的问题,这里有一篇中文文章《使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度》,仅供参考。
如果想要深入了解,可以自行用Google进行深度搜索。

5. 将CSS文件定义在HTML文件顶部
最标准的做法是使用LINK标记,将CSS文件链接在HTML文档的HEAD标签里。
CSS放置在底部,或是使用@import标记的做法都将降低页面载入速度,或者是产生不良的用户体验,如页面刷新的时候未样式化的元素会以浏览器内置的样式展示出来造成页面样式破碎等等问题。

6. 将Javascript文件链接在HTML文件底部
如果将.js文件放置在页面HEAD里面的话,那么页面载入的时候要等到这些在HEAD标记里的js文件全部载入了以后才能显示HEAD之后的内容,这样就会导致.js文件未下载完成时候页面呈现一片空白,这些js文件越大(比如完整的jquery.js等javascript脚本文件大小都在50K以上),那么页面空白的时间就越长。空白的页面自然会造成不好的用户体验,即使可能只有那么2秒不到,也是追求完美的网站设计者应该尽力避免的。
将.js文件放置在页面底部以后,页面的body部分会先被载入,内容能够先于.js等不可见元素载入,而呈现在访客面前,而.js则继续在后部载入,这样页面虽然整体载入时间并没有减少,但由于页面空白时间的减少,用户感觉上的“页面载入时间”却减少了。

7. 配置并使用ETags
ETags 是服务器和浏览器之间用来对比网页元素版本的一种机制,能够判断浏览器里面的缓存是否跟原始服务器上的一样,若一样的话,就不重新载入服务器上的文件内容,如果不一样,则重新从服务器上下载这些元素内容。
正确的设置ETags,能够最大限度利用浏览器缓存技术,使得页面元素的读取,由从服务器上读取,变为本地缓存读取,从而提高再次访问时页面的载入时间。
关于ETags,详细参考YAHOO的 网站提速最优做法 - Best Practices for Speeding Up Your Web Site  中有关 ETags 的章节
另外这里有来自InfoQ的技术文章,中文:使用ETags减少Web应用带宽和负载

本文参考:
Reply all
Reply to author
Forward
0 new messages