现在的位置: 首页 > 综合 > 正文

(翻译中止)Best Practices for Speeding Up Your Web Site 网站加速最佳实践

2018年10月31日 ⁄ 综合 ⁄ 共 4222字 ⁄ 字号 评论关闭

看到得太晚了,本来想慢慢来……结果被人bs说是古董,郁闷,就此罢手。

 

原文:http://developer.yahoo.com/performance/rules.html

Best Practices for Speeding Up Your Web Site
网站加速最佳实践

性能专家团队确定了一些使网页加速的最佳实践,包括7类34种.

   1. 减少发出HTTP请求
   2. 使用内容分发网络(CDN)
   3. 添加过期(Expires)或Cache - Control标题
   4. 使用gzip或组件
   5. 把css样式表放在顶部
   6. 把脚本放在底部
   7. 避免CSS表达式
   8. 避免内嵌的JavaScript和CSS
   9. 减少DNS查找
  10. 缩小的JavaScriptCSS
  11. 避免重定向
  12. 删除重复的脚本
  13. 配置ETags
  14. 使用Ajax缓存
  15. 尽早刷新缓冲区
  16. 在AJAX请求中使用GET方法
  17. Post-load Components·后负荷组件
  18. 预读组件
  19. 减少DOM元素
  20. Split Components Across Domains·跨域分隔组件
  21. 尽量减少内置页框(iframe)
  22. 不要出现404错误
  23. 减少Cookie大小
  24. Use Cookie-free Domains for Components·为组件使用域无关的Cookie
  25. 最小化的DOM访问
  26. Develop Smart Event Handlers·开发智能事件句柄
  27. Choose <link> over @import·用<link>代替@import
  28. Avoid Filters·避免过滤器
  29. 优化图像
 
 
 
 
 

1. 减少发出HTTP请求
标签:内容

80 %的最终用户响应时间花在前端。其中大部分时间是费在下载的所有组成部分的网页:图片,样式,脚本,闪存等等,减少元件数量就可减少HTTP请求提供所需的页面。这是网页速度更快的关键。

一种以减少网页中的元件数量的方法是是简化网页设计。但是否有办法在建立更丰富的网页内容同时实现快速的反应时间?这里有一些技术减少了HTTP请求,同时还支持丰富的网页设计。

通过把所有脚本结合到一个单一的脚本,类似的把所有的CSS结合到一个单一的样式表来实现以合并文件的方式减少HTTP请求数。 Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.结合脚本和样式不同的网页文件很具挑战性,但这样做会改善响应时间。

CSS Sprites是减少了图像要求的首选方法。 合并您的多个背景图像成一个单一的图像并使用CSS的background-image和background-position属性以显示所需的图像部分。

Image maps 结合多张图片到一个单一的图像。 整体规模差不多,但减少了HTTP请求加速了网页。 Image maps 仅工作在连续图像的网页,如导航栏。 确定image maps的坐标是乏味而又易错的。 使用mage maps的导航也是无法访问的,所以不建议采用。

内置图片使用 data:URL 方案中嵌入图像数据的实际网页。这会增加HTML文件的大小。集成内置图片到您的(缓存的)样式表可以减少HTTP请求,并避免增加您的网页的大小。内置图片还不被所有主要浏览器支持。

在您的网页减少HTTP请求只是开始。提高首次来访的性能是最重要的准则。正如Tenni Theurer的博客帖子《Browser Cache Usage - Exposed!》中所描述,每天到您网站的40-60 %的访客缓存是空的。为这些第一次来访者加速网页是更好用户体验的关键。

 

2. 使用内容分发网络(CDN)
标签:服务器

用户与您的网络服务器接近程度影响了响应时间。在多个地理上分散的服务器部署您的内容将从用户的观点提高您的网页载入速度。但是,您应从何处入手?

第一步,实施内容的地理分散,不要试图重新设计您的Web应用程序工作在分布式体系结构。根据不同的应用改变结构,可包括大任务如同步会话状态和复制数据库事务的服务器位置。试着减少可能造成延迟或从来没有连通的用户和您的内容之间的距离,这是应用体系重构的步骤。

请记住,80-90%的最终用户响应时间花在下载页面所有组件:图片,样式,脚本,闪存等,这是黄金规则。比起重新设计您的应用程序架构这样艰巨的任务,最好是首先分散你的静态内容。这不仅实现了反应时间更大的减少,而且更容易在网络传送内容。

内容分发网络(CDN)是一组分布在多个地点的网络服务器集合,用以更有效地为用户提供内容。为特定的用户选定提供内容的服务器,通常是基于网络距离的量度。例如,最少网络跳数(hop)的服务器或最快响应时间的服务器被选择。

一些大型互联网公司拥有自己的CDN,但其成本—效益趋向使用CDN服务提供商,如Akamai Technologies 、 Mirror Image Internet 或者 Limelight Networks。对刚起步的公司和私人网站,CDN的费用可以让人望而却步,但由于您的目标受众越来越大,变得更加全球性,为实现快速的反应时间CDN是必要的。 在Yahoo上 ,从网络服务器搬到CDN的静态内容使得终端用户响应时间改善达到20%或更多。切换到CDN是一个相对容易的代码变更,将显着改善你的网站的速度。

3. 添加过期(Expires)或Cache - Control标题
标签:服务器

本规则有两方面:

    * 静态部分:实施“永不过期”的政策定制长远Expires头
    * 动态部分:使用适当的Cache-Control标题,帮助浏览器有条件的请求

网页设计越来越丰富,这意味着更多的脚本,样式,图片和Flash在网页上。访客第一次到您的网页要发出一些HTTP请求,但通过使用Expires头你可以使这些组件被缓存。这可以在随后的页面浏览时避免不必要的HTTP请求。 Expires 头最常用于图像,但它们应该使用到所有组件,包括脚本,样式,和Flash组件。

浏览器(和代理)使用高速缓存,以减少HTTP请求的数量和流量,使网页的载入提速。一个web服务器使用HTTP响应的Expires头告诉客户端的一个组件可以缓存多久。这是一个遥远的Expires头,告诉浏览器直到2010年4月15号才会过时。

    Expires: Thu, 15 Apr 2010 20:00:00 GMT

如果您的服务器是Apache,使用ExpiresDefault指示来设定到期日相对于当前的日期。这个例子的ExpiresDefault指示有效期自请求之开始起10年。

    ExpiresDefault "access plus 10 years"

请记住,如果您使用的是遥远的Expires头,当部件改变时你必须改变原有的文件名。在Yahoo我们常常使这一步成为构建过程的一部份:一个版本编号嵌入到该组件的文件名,例如yahoo_2.0.6.js 。

只有在用户已经访问了您的网站使用遥远的Expires头才会生效。当用户第一次访问您的网站、浏览器的缓存是空的,它对HTTP请求没有效果。因此所产生的影响这一性能的改善取决于用户借助缓存访问您的网页的频度。(“缓存”已包含所有组件的网页。)我们在Yahoo测量并发现借助缓存的浏览数为75-85% 。通过使用遥远的Expires头,您增加的组件被浏览器缓存和重用,而不必在用户的互联网连接中发送一个字节。

4. 使用Gzip组件
标签:服务器

 

…………

…………

…………

 

30. 优化CSS Sprites(用css定位来把若干小图片组成的大图分割显示的技巧)
标签:影像

    * 横向安排小图片通常会得到一个较小的大图文件。
    * 结合在相似的颜色可以帮助您减少颜色计数,最好小于256种颜色,以符合 PNG8 。
    * “移动兼容”,并且在小图片之间没有大的的空间。这并不影响文件的大小,但解压缩图片为像素图时为用户代理节省内存。100x100图片是10万像素,1000x1000就是100万像素。

31. 不要在HTML中放缩图像
标签:影像

不要因为你可以设置宽度和高度就使用比您需要的更大的图片。如果您需要<img width="100" height="100" src="mycat.jpg" alt="My Cat" />那么您的图片( mycat.jpg )应是100x100px而非用500x500px去缩小。

32. 减小favicon.ico并缓存
标签:影像

文件favicon.ico是一个图像,放在你服务器的根路径。这产生了无法避免的问题,因为即使你不关心它,浏览器将仍然会发请求,所以最好不要回应 404 Not Found 。而且由于它在同一台服务器上, 每次发出请求时都会传送Cookie。这个图像也干扰了下载序列,例如,IE浏览器在onload时如果要求额外的组件,该图标将在这些额外的组件之前下载。

因此,要减轻favicon.ico的不利作用要确保:
    * 它很小,最好在1K以下 。
    * 设置Expires头会让你觉得好一点(因为即使您决定要改变它也不能将它重命名)。您可以没有风险地置Expires头为未来几个月后。您可以检查当前favicon.ico的最后修改日期,作出明智的决定。

www.imagemagick.org是一个可以帮助您创建小图示的网站

33. 保持部件小于25K
标签:手机

这种限制是由于iPhone将不缓存大于25K的组件(注意,这是未压缩的大小)。因为Gzip可能不起作用,所以缩小组件很重要。
欲了解更多信息,参阅 Wayne Shea 和 Tenni Theurer 的《 Performance Research, Part 5: iPhone Cacheability - Making it Stick 》。

34. Pack Components into a Multipart Document·把内容打包进多部分文件
标签:手机

把内容打包进多部分文件就像是一封带有附件的电子邮件,它可以帮助你用一次HTTP请求传输若干组成部分(请记住: HTTP请求代价昂贵) 。当您使用此方法前,先检查用户代理是否支持它(iPhone手机就不支持) 。

抱歉!评论已关闭.