雅虎给出了优化网站加载速度的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 确实是好东西,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文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~
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解决。
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就不支持。
分享到:
相关推荐
以上就是雅虎给出的34条优化网站访问速度的方法,涵盖了从代码编写、资源管理、服务器配置到用户体验设计的各个方面。通过实施这些建议,你可以显著提高网站的访问速度,为用户提供更快、更流畅的浏览体验。
【雅虎最佳实践之加速网站速度法则】是针对提升网页加载速度的一系列技术措施,旨在优化前端页面和后台代码,从而提高用户体验。以下是对这些法则的详细解释: 1. **前端页面优化** - **减少HTTP请求次数**:HTTP...
**雅虎优化34条规定详解** 雅虎作为全球知名的互联网公司,其在网站优化方面有着丰富的经验和独到的见解。为了提升网页的搜索引擎排名、提高用户体验以及网站的可访问性,雅虎制定了一系列的优化规则。这些规则不仅...
《雅虎助手:曾经的经典与浏览器修复技术》 在互联网早期,雅虎助手(Yahoo! Assistant)是一款备受用户青睐的工具软件,它为用户提供了一系列的在线浏览辅助功能,包括网页加速、广告拦截、隐私保护等。这款软件在...
在那个网络速度较慢、安全威胁日益增长的时代,雅虎助手提供的网页加速、广告拦截、恶意网站防护以及下载管理等功能,极大地改善了用户的上网体验。对于不少早期网民来说,雅虎助手就如同一位可靠的助手,帮助他们...
本文通过作者在雅虎的面试经历,揭示了一些关键的面试知识点和经验教训。 首先,面试官通常会从基础问题开始,比如在本文中要求编写快速排序算法。快速排序是一种基础但重要的算法,它基于分治法,通过选取一个基准...
的Exceptional Performance团队通过对Web性能的深入研究,总结出了34条黄金守则,这些守则涵盖了网站内容、服务器、Cookie、CSS、JavaScript、图片以及移动应用等多个方面。以下是对这34条守则中部分内容的详细解释...
前端优化-雅虎军规35条 网页内容上 1 减少http请求次数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各种组件:图片,样式表,脚本,Flash等等。减少组件数必然能够减少页面提交的HTTP请求...
然而,随着前端技术的发展,现代框架如React、Vue和Angular等已经取代了YUI的部分角色,但YUI仍然是一份宝贵的历史遗产,它的设计理念和解决问题的方法对于理解现代前端开发仍然具有重要的参考价值。
wp-rocket-3.2.2,界面细腻调整。... YouTube和Facebook,雅虎等各大网站都采用这种技术。现在,你也可以做到。 正版插件,本地使用没有问题,如需激活用于正式网站,请联系作者或者chunxiaqiu13@gmail.com。
"Android 仿雅虎新闻超炫过渡动画"项目正是一个专注于此的示例,它展示了如何利用Android的动画系统来创建类似雅虎新闻应用中的精彩过渡效果。这个项目采用模板设计模式,确保代码结构清晰,易于理解和复用。 模板...
wp-rocket-3.0.5.1,界面细腻调整。... YouTube和Facebook,雅虎等各大网站都采用这种技术。现在,你也可以做到。 正版插件,本地使用没有问题,如需激活用于正式网站,请联系作者或者chunxiaqiu13@gmail.com。
同时,从亚马逊、雅虎等网站访问相关经济效益分析看,毫秒级的加速将会带来高达亿元级的收益、高达10%的访问流量,给企业带来巨大的经济价值。 网络直播催生动态CDN爆发,市场潜力百亿只是开始。2016年网络直播视频...
这个名为"雅虎中国首页全屏可伸缩可关闭flash广告代码.zip"的压缩包文件显然包含了与前端开发相关的代码,特别是针对Flash广告的设计和交互功能。以下是基于这个主题的详细知识点解释: 1. **Flash技术**:在过去的...
【网易雅虎滑动门效果特效代码】是一种常见的网页交互设计技术,主要应用于网站导航菜单或者展示区域,为用户提供平滑、动态的视觉体验。这种效果最初由网易和雅虎等知名互联网公司采用,因此得名。在网页设计中,...
虽然现代搜索引擎通常能够自动发现并抓取新网站的信息,但主动提交网站链接可以加速这一过程,使网站更快地出现在搜索结果中。 #### 二、常见搜索引擎网站提交入口 以下是一些主流搜索引擎的网站提交入口,以及...