Yahoo给出的34条网站加速方法
Yahoo 给出的34条网站加速方法Yahoo 给出的包括Yslow 规则(22条)的34条 ,通过这此规则对自己页面进行一次全面的分析优化,可以提高你网站的加载速度。 1.Minimize HTT
Yahoo 给出的34条网站加速方法
Yahoo 给出的包括Yslow 规则(22条)的34条 ,通过这此规则对自己页面进行一次全面的分析优化,可以提高你网站的加载速度。 1.Minimize HTTP Requests 减少HTTP 请求
图片、CSS 、script 、flash 等等这些都会增加http 请求数,减少这些元素的数量就能减少响应时间。把多个JS 、CSS 在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS 里,利用 将小图拼合后利用background 来定位。
2.Use a Content Delivery Network 利用CDN 技术
CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。
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 文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~
使用托管在Google 的JavaScript 库,这是目前富页面设计中比较常用的方法,也是未来web 前端设计的趋势。
因为JavaScript 设计复杂,而使用通用JavaScript 库的话,可以简化设计,并且统一风格,并且设计良好的JavaScript 库有良好的扩展性以增加功能。
但目前一般的JavaScript 库体积都在100K 上下,对于目前的网络来说还是比较大了,为了加快网页载入,减少http 请求数,使用公共JavaScript 库是必要的——事实上未来可能将
,JavaScript 库存储于浏览器端,这将进一步加快网页的载入速度。
所以这没有什么违不违法,也跟道德没关系。
至于css 框架,目前虽然有一些,不过远不像JavaScript 库那样完善,目前还很少看到有css 外链的
9.Reduce DNS Lookups 减少DNS 查找
貌似是要减少网站从外部调用资源,我的Google 分析和picasa 的外链图片都算在里面了。
10.Minify JavaScript and CSS 减小JS 和CSS 的体积
写JS 和CSS 都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。
11. Avoid Redirects 避免重定向
再写入链接时,虽然“http://www. today-s-ooxx. com”和“http://www. today-s-ooxx. com/” 仅有一个最后的“/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache 里用Alias 或者mod_rewrite或者DirectorySlash 解决。
重定向结束于301或302状态码。这里有一个302响应的HTTP 头的例子:


这里有一个301响应的HTTP 头的例子:
HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
浏览器会自动把用户转向Location 域中指明的Url 地址。HTTP 头里包含了重定向所需的所有信息。响应的主体一般是空的。301或者302响应都不会被实际缓存,除非添加额外的头部,比如 Expires或者Cache-Control 指明了它应该被缓存。meta refresh标签和
JavaScript 也可以将用户重定向到不同的URL ,但如果你必须执行重定向,最好的方法是使用标准的3XX HTTP状态代码,以便使后退按钮工作正常。
需要谨记的是,重定向降低了用户体验。在用户和HTML 文档之间插入的重定向延误了页面的呈现和组件下载,因为它们都不可能在获得HTML 文档之前开始。
,一种最浪费性能的重定向频繁发生而网络开发者们却往往没有意识到,那就是当地址中应当有一个左斜线(/)却没有的时候。比如,访问http://astrology.yahoo.com/astrology会导致一个301效应并重定向到http://astrology.yahoo.com/astrology/(注意这里加了一个左斜线)。在Apache 中,这可以使用mod_rewrite,或者在Apache 事件处理中使用DirectorySlash 指令来修补。
使用重定向的另一个常见场景是连接旧网站和新网站。还包括连接网站的不同部分,或者在不同情况下 (比如依据浏览器的类型,用户的类型等)重定向用户。使用重定向来连接两个网站很简单而且需要很少的额外代码。虽然在这些情况下使用重定向减少了开发者的 麻烦,但却降低了用户体验。如果两部分在同一个服务器上,可以使用Alias 和rewrite 来替代重定向。如果域名变更引起了重定向,可以创建一个CNAME (一种可以创建一个别名使一个域名指向另一个的DNS 记录)结合 Alias 或者mod_rewrite来替代重定向
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 事件句柄 27. Choose < link >over @import 使用< link >而非 @import
在IE 中使用@import就和在页面底部用< link >一样,我们前面说要把< link >放顶部的。
28. Avoid Filters 避免过滤器的使用
如果需要Alpha 透明,不要使用AlphaImageLoader ,它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7 用户。 29. Optimize Images 优化图片
将你的GIF 转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG 及PNG 图片以达到优化效果。
30. Optimize CSS Sprites 优化CSS Sprites
在CSS Sprites中竖直并尽量紧凑的排列图片,尽量将颜色相似的图片排在一起,会减小图片本身的大小及提高页面图片显示速度。
,31. Don’t Scale Images in HTML 不要在HTML 中缩放图片
图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB 数是不会减少的。
32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
站点的浏览器ICO 应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K 以下。
33. Keep Components under 25K 保证组件在25K 以下
iPhone 不能缓存25K 以上的组件,并且这还是要在被压缩前。
34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中 就好像在邮件中加入附件一样,一个HTTP 请求就够了,但是这一技术需要确保你的代理支持,iPhone 就不支持