雅虎优化网站加载速度的34条法则

Category:成都网站建设     Time:2013-02-15 13:00     点击:

雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条)详细说明,下载转发ponytail的译文(来自帕兰映像)。下面分享给大家。 1.Minimize HTTP Requests减少HTTP请求 图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应

雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条)详细说明,下载转发ponytail的译文(来自帕兰映像)。下面分享给大家。

  1.Minimize HTTP Requests减少HTTP请求

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

  2.Use a Content Delivery Network利用CDN技术

  CDN确实是好东西,不过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。

  3.Add an Expires or a Cache-Control Header设置头文件过期或者静态缓存

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

  4.Gzip Components Gzip压缩

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

  5.Put Stylesheets at the Top把CSS放顶部

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

  6.Put Scripts at the Bottom把JS放底部

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

  7.Avoid CSS Expressions避免CSS Expressions

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

  8.Make JavaScript and CSS External将JS和CSS外链

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

  9.Reduce DNS Lookups减少DNS查找

  貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。

  10.Minify JavaScript and CSS减小JS和CSS的体积

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

  11. Avoid Redirects避免重定向

  再写入链接时,虽然”www.seo-sh.cn”和”www.seo-sh.cn/”仅有一个最后的”/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias或者mod_rewrite或者DirectorySlash解决。

  12. Remove Duplicate Scripts删除重复脚本

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

  13. Configure ETags配置ETags

  搞不清楚咋回事,总之我是在. htaccess里把它删除了。

  14. Make Ajax Cacheable缓存Ajax

  Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。

  15. Flush the Buffer Early尽早的释放缓冲

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

  16. Use GET for AJAX Requests用GET方式进行AJAX请求

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

  17. Post-load Components延迟加载组件

  最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader是很好的例子。

  18. Preload components预加载组件

  提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。

  19. Reduce the Number of DOM Elements减少DOM元素数量

  复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。

  20. Split Components Across Domains跨域分离组件

  页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。

  21. Minimize the Number of iframes减少iframe数量

  需要更有效的利用ifames。

  iframe优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本

  iframe缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义

  22. No 404s不要出现404页面

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

  23. Reduce Cookie Size减小Cookie

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

  24. Use Cookie-free Domains for Components对组件使用无Cookie的域名

  对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放你的静态组件式一个好方法,或者也可以在Cookie中只存放带www的域名。

  25. Minimize DOM Access减少DOM的访问次数

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

  26. Develop Smart Event Handlers开发灵活的事件处理句柄

  DOM树上过多的元素被加入事件句柄的话,反应效率肯定会低,YUI事件工具有一个onAvailable方法可以帮助你灵活的设置DOM事件句柄

(责任编辑:小胖工作室)



小胖工作室是成都专业的网站制作团队,致力为企业提供高端网站建设SEO网站优化网站推广IDC服务以及APP开发等服务;我们能让企业品牌更有力量,咨询热线:18280009820

下一篇:搜索引擎对网络发展的利弊关系    上一篇:没有了