加快您的网站的最佳实践（Best Practices for Speeding Up Your Web Site）
以下为机器自动翻译
最小化的 HTTP 请求
标记： 内容
80%的最终用户响应时间花在前端上。 这次的大部分捆绑在下载页中的所有组件： 图像、 样式表、 脚本，闪速，等。 又减少的组件数减少所需呈现页的 HTTP 请求的数量。 这是更快的页的关键。
减少页中的组件的一个方法是简化页面的设计。 但是，是有一个，创造更丰富的内容的页面，同时也实现快速响应时间的方法吗？ 以下是一些技术 HTTP 的请求的数目减少同时仍然支持丰富的页面设计。
联合文件 是一种减少通过合并到单个脚本的所有脚本和同样都组合到一个单一的样式表的所有 CSS HTTP 请求的方式。 结合文件是更多的挑战，当在脚本和样式表各有不同的页，但制作您发布过程的这一部分提高了响应时间。
CSS Sprite 是图像请求的数目减少的首选的方法。 将您的背景图像合并为单个图像并使用 CSS 背景图像 及 背景位置 要显示所需的图像段的属性。
图像映射 将多个图像合并为单个图像。 整体大小，与但减少 HTTP 请求页加快速度。 如果图像是连续的在页如导航栏中，图像映射唯一的工作。 定义的图像映射坐标可以是乏味和容易发生的错误。 使用图像映射为导航不是可访问太，因此不建议使用。
内联图像 使用该 数据： URL 方案 在实际的页中嵌入图像数据。 这可以增加你的 HTML 文档的大小。 内联图像组合到你 （缓存） 的样式表是一个方法减少 HTTP 请求和避免增加您的页面的大小。 跨所有主要的浏览器还不支持内联图像。
在您的页中的 HTTP 请求的数目减少是开始的地方。 这是提高性能的第一次访客的最重要指南。 如 Tenni Theurer 博客文章中所述 浏览器缓存使用-揭露 ！ ，40 60%的每日访问您站点来在一个空的缓存。 使您的页快，这些第一次访客是更好的用户体验的关键。
使用内容的传递网络
标记： 服务器
您的 Web 服务器的用户的接近，均对响应时间造成影响。 在多部署您的内容，地理位置分散的服务器会从用户的角度来看加载速度更快的网页。 但是，其中应启动呢？
作为第一步，实施在不同地理位置分散的内容，不要尝试重新设计您的 Web 应用程序在分布式体系结构中的工作。 取决于该的应用程序体系结构的更改可能包括令人生畏任务如同步会话状态和跨服务器位置复制数据库事务。 尝试减少用户与您的内容之间的距离可能由，延迟或不能通过此应用程序体系结构的步骤。
请记住 80 90%的最终用户响应时间用于下载页中的所有组件： 图像、 样式表、 脚本，闪速，等。 这是 性能金规则 。 而不是从重新设计您的应用程序体系结构的困难任务开始，最好先分散染料你静态内容。 这不仅能达到大减少响应时间，但内容分发网络更容易感谢。
一个内容分发网络 (CDN) 是 Web 服务器，分布在多个位置更有效地为用户提供内容的集合。 为将内容传递给一个特定的用户选择的服务器通常基于网络邻近的措施。 为例是选择用最少的网络 hops 服务器或服务器的最快的响应时间。
一些大型的网络公司拥有自己的 CDN，但这是为使用 CDN 服务提供程序如 Akamai Technologies 、 镜像图像 Internet 或 舞台网络 具成本效益。 启动公司及私人网站 CDN 服务的成本可以是牵涉极大，但您的目标受众增长较大和变得更全球，一 CDN 有必要实现快速响应时间。 Yahoo!，在了他们的应用程序 Web 服务器的静态内容移动到一个 CDN 的性能改进的 20%或以上的最终用户响应时间。 切换到一个 CDN 是一种相对比较简单的代码更改，将会大大改善您的网站上的速度。
添加一个过期或一个 cache-control 标头
标记： 服务器
有此规则两件事：
- 为静态的组件： 通过设置远的将来实现永不过期策略
过期标头 - 动态组件： 使用一个适当
Cache-Control获得帮助浏览器的条件请求标头
网页设计越来越更丰富、 更丰富的这意味着更多的脚本、 样式表、 图像和 Flash 页中。 首次访客到的网页可能要几个的 HTTP 请求，但通过使用 Expires 标题您使这些组件缓存。 这可以避免不必要的 HTTP 请求对后续页视图。 过期标头最常与图像，一起使用，但他们应可以用于包括脚本、 样式表和闪速组件的 所有 组件。
浏览器 （和代理） 请使用一个缓存可以更快地减少数，以及制作网页负荷的 HTTP 请求的大小。 一个 web 服务器使用 HTTP 响应中的 Expires 标题告诉的客户多长时间的一个组件可以被缓存。 这是告诉浏览器此响应不到 2010 年 4 月 15 陈旧的远未来的 Expires 标题。
15 四月 2010年过期： 四 20： 00： 00 GMT
如果您的服务器 Apache 使用 ExpiresDefault 指令设置一个相对于当前日期的过期日期。 此示例 ExpiresDefault 指令的设置 Expires 日期出 10 年从请求的时间。
ExpiresDefault"访问加 10 年"
请牢记情况下，如果您使用您需要更改组件的文件名，只要该组件更改的远未来 Expires 标头。 我们谨此陈 Yahoo! 在经常作出的生成过程的这一步一部分：，例如 yahoo_2.0.6.js 的组件的文件名中嵌入一个版本号。
一个用户已访问过您的网站后，才使用远未来的 Expires 标题会页意见的影响。 当用户首次访问您的网站，并是空的浏览器的缓存不会有 HTTP 请求的数目没有影响。 因此此性能改进的影响取决于如何经常用户打与 primed 的缓存的网页。 （一"引的缓存"物已包含的所有组件在页中。 我们 来衡量这在 Yahoo! 和发现 primed 的缓存页意见的数目是 75 85%。 利用远未来的 Expires 标题您增加组件由浏览器缓存和重新使用对后续页视图不通过用户的 Internet 连接发送单个字节。
Gzip 组件
标记： 服务器
它采用要传输的 HTTP 请求的时间，并决定提出前端工程师可显著减少通过网络的响应。 这是真的最终用户的带宽速度、 Internet 服务提供商、 窥视交换点等接近是无法控制的开发团队。 但其它影响响应时间的变量。 压缩减少响应时间通过减少 HTTP 响应的大小。
Web 客户端从 HTTP/1.1 开始表示支持 HTTP 请求中 Accept-Encoding 头压缩。
接受-编码： gzip，deflate
如果 Web 服务器看到此请求中的标头，它可能会压缩响应使用客户端按列出的方法之一。 Web 服务器通知这 Web 客户的端通过在响应中的内容编码标头。
内容编码： gzip
Gzip 这个时候是最受欢迎和最有效的压缩方法。 它是由 GNU 项目开发，并由 RFC 1952 规范。 只其他压缩格式您可能看到是 deflate，但也是较有效和使用率较低。
Gzipping 通常将响应大小减少约有 70%。 约 90%的今天的 Internet 通信穿梭自称支持 gzip 的浏览器。 如果你使用 Apache，配置 gzip 的模块取决于您的版本： Apache 1.3 使用 mod_gzip 而 Apache 2.x 使用 mod_deflate 。
存在一些已知浏览器和可能会在浏览器的期望和它在压缩内容方面的收到中造成的不匹配的代理的问题。 幸运的，这些边缘个案萎缩，较旧的浏览器的使用眼液关闭。 Apache 模块帮助自动添加适当的 Vary 响应标头。
服务器选择什么 gzip 文件基于键入，但是通常在他们决定压缩太限制。 大多数 Web 站点 gzip 他们的 HTML 文档。 它也是值得 gzip 您的脚本和样式表，但很多网站错过这个机会。 事实上，这是值得的压缩任何文本响应，包括 XML 和 JSON。 图像和 PDF 文件，应不会 gzipped，因为他们已被压缩。 试图 gzip 他们不仅废物 CPU，而且可能可以增加文件大小。
Gzipping 尽可能多的文件类型是容易途径减轻页重量和加快用户体验。
将样式表放在该置顶
标记： css
在 Yahoo! 演出的研究，我们发现将样式表移动到文档的 HEAD 使页 显示 会更快地加载。 这是因为样式表放在 HEAD 允许页面逐步呈现。
性能关心想要加载逐步 ； 即的页的前端工程师，我们希望浏览器以显示它能尽快有任何内容。 这一点很大的内容页和较慢的 Internet 连接上的用户的尤其重要。 井研究此给予用户如进度指示器的视觉反馈的重要性和 记录 。 在我们的情况下，HTML 页是进度指示器 ！ 浏览器加载页逐步标头，该徽标，在该的顶部栏导航时等所有作为为正在等待页的用户的视觉反馈。 这可以提高整体的用户体验。
将文档的底部附近的样式表的问题是它禁止许多浏览器，包括 Internet Explorer 中的渐进式呈现。 这些浏览器阻止避免必须重绘的页面元素，如果他们的样式更改呈现。 用户被粘滞查看空白页。
HTML 规范 清楚订明样式表是要包括在页的 HEAD 中："与 A，不同 [LINK] 只能出现一的文档的 HEAD 部分中，虽然它可能出现的任何次数" 不选择、 空白白屏幕或 unstyled 内容的闪烁的值得风险。 最佳的解决方案是按照 HTML 规范，并加载您 HEAD 文档中的样式表。
放在底部的脚本
标记： javascript
脚本引起的问题是他们砌块并行下载。 HTTP/1.1 规范 建议浏览器下载每个主机名并行不超过两个组件。 如果您为服务您从多个主机名的图像，您可以获取发生在并行的两个以上下载。 而脚本正在下载，但是，浏览器不会启动任何其他下载甚至上不同的主机名。
在某些情况下，它是不容易移动到底部的脚本。 如果该脚本的使用，例如 document.write 将页的内容的一部分它不能移动下在页中。 那里可能也会范围问题。 在很多的情况下有方法替代方法，这些情况。
一个替代的建议，经常上来是使用延迟的脚本。 在 押后 属性表示该脚本不包含 document.write，是他们可以继续呈现浏览器的线索。 遗憾的是，Firefox 不支持在 押后 属性。 InternetExplorer 中, 脚本可能押，但不是多达所需。 如果押可以到一个脚本，它可以也将移动到该页的底部。 这会使你的网页加载速度更快。
避免 CSS 表达式
标记： css
CSS 表达式是一种动态设置 CSS 属性的功能强大的 （和危险的） 的方式。 他们是从 版本 5 开始的 Internet Explorer 中支持。 为例，背景颜色可能被交替使用 CSS 表达式每小时的设置。
background-color： 表达 ((新 Date()).getHours () %2 吗？ "# b8d4ff"："# f08a00") ；
如下所示， 表达 方法接受一个 JavaScript 表达式。 CSS 属性设置为计算 JavaScript 表达式的结果。 在 表达 因此，对于跨浏览器中创建一致的体验所需的 Internet Explorer 中设置属性非常有用，其他的浏览器忽略方法。
表达式的问题是他们计算比大多数人期望更频繁。 他们不只被评估，当呈现页并将其调整大小，也当滚动页和甚至当用户将鼠标页上。 将一个计数器添加到 CSS 表达使我们能够跟踪的时间和频率 CSS 表达式进行求值。 移动页面周围鼠标可以轻松地生成一万多评估。
减少您 CSS 表达式的次数的一个方法是使用一次性的表达式，其中第一次在计算表达式它样式属性设置为一个显式的值，替换 CSS 表达。 如果整个页的生命，必须动态设置样式属性，使用事件处理程序而不 CSS 表达式是另一种方法。 如果使用必须 CSS 表达式请记住他们可能会评估的数以千计的时间，并可能会影响您的页面的性能。
使 CSS 和 JavaScript 外部
标记： javascript，css
很多这些性能规则处理与如何外部组件进行管理。 但是，这些考虑因素出现之前你应该问一个更基本的问题： 应该 JavaScript 和 CSS 是包含在外部的文件或内联页本身中？
通常在现实世界中使用外部文件产生更快的页，因为 JavaScript 和 CSS 文件用浏览器缓存。 每次请求在 HTML 文档时，获取下载 JavaScript 和是内联在 HTML 文档中的 CSS。 这会减少所需，但会增加的 HTML 文档大小的 HTTP 请求的数。 在另一方面如果 CSS 和 JavaScript 由浏览器缓存的外部文件中，不会增加的 HTTP 请求数被减小 HTML 文档的大小。
在关键的因素然后，是哪些外部的 JavaScript 和 CSS 组件会被缓存的请求的 HTML 文档数相对于频率。 这项因素虽然难量化，可以被衡量使用不同的度量。 如果您的网站上的用户有每个会话的多个页视图，您的页面的许多重复使用相同的脚本和样式表，有缓存的外部文件一更大的潜在好处。
很多网站落在这些度量的中间。 这些网站，最好的解决办法通常是部署为外部文件的 CSS 和 JavaScript。 唯一的例外凡内联的应聘者优先考虑有如 Yahoo! 的头版 和 我的 Yahoo! 举行的网页。有几个 (可能只有一个) 页查看每个会话的主页可能会发现内联 JavaScript 和 CSS 导致更快的最终用户响应时间。
通常是很多页意见的第一的前页，有技术的 HTTP 请求，内联减少提供，以及透过使用外部文件缓存的好处，杠杆。 这样一项技术内联 JavaScript 和 CSS 处于前的页，但后页已完成加载动态下载外部的文件。 后续页会引用应该已经在浏览器的缓存中的外部文件。
减少 DNS 查找
标记： 内容
域名系统 (DNS) 将主机名映射到 IP 地址中,，正如 phonebooks 映射到他们的电话号码的人的名称。 当您的浏览器中键入 www.yahoo.com 联系到浏览器的一个 DNS 解析程序将返回该服务器的 IP 地址。 DNS 具有一个的开销。 它通常需要 20 120 毫秒的 DNS 查找为给定的主机名的 IP 地址。 浏览器不能下载任何从此主机名直到完成 DNS 查找。
更好的性能被缓存 DNS 查找。 此缓存由用户的 ISP 或局部区域网络维护一个特殊缓存服务器上可以出现，但有亦缓存，发生在个别用户的计算机上。 DNS 信息仍保留在操作系统的 DNS 缓存 ("DNS 客户端服务"在 Microsoft Windows 上）。 大多数浏览器有他们自己缓存分开操作系统的缓存。 只要浏览器保持其自己的缓存中的 DNS 记录，它不会打扰带有记录的请求的操作系统。
Internet Explorer 缓存 DNS 查找 30 分钟由指定的默认情况下， 按 注册表设置。 Firefox 缓存 DNS 查找 1 一会儿由控制， network.dnsCacheExpiration 配置设置。 （Fasterfox 更改这为 1 小时）。
空 （用于浏览器和操作系统） 客户端的 DNS 缓存时 DNS 查找的数目是等于在网页上的唯一的主机名的数目。 这包括在图像、 脚本文件、 样式表、 闪速对象、 等的页的 URL 中使用的主机名。 唯一的主机名的数目减少减少 DNS 查找的数量。
唯一的主机名的数目减少有潜力以减少发生在页中的并行下载量。 避免 DNS 查找削减响应时间，但减少并行下载可能会增加响应时间。 我的指引，这些组件拆分至少两个但不是超过四个主机名。 这将导致降低 DNS 查找并允许高度的并行下载的好折衷。
minify JavaScript 和 CSS
标记： javascript，css
缩小是从代码，以减少其大小，从而提高加载时间删除不必要的字符的做法。 当代码缩小则是所有评论意见都将删除，以及不必要的空白字符 （空间、 换行符和选项卡）。 在 JavaScript 的情况下这提高响应时间性能，因为下载的文件的大小减少。 JSMin 和 YUI 压缩机 两个受欢迎的工具，为削减 JavaScript 代码。 YUI 压缩机，也可以 minify CSS。
模糊处理是一个另类的优化，可应用于源代码。 这是比缩小复杂和因此更容易生成的 bug，作为在本身的模糊处理步骤的结果。 十顶部美国网站综述微细化达到 21%大小减少与模糊处理的 25%。 虽然模糊处理高大小减少但风险更低削减 JavaScript。
除了 minifying 外部脚本和内联的样式外，还 <script> 及 <style> 砌块可以和应该也会缩小。 即使你 gzip 你的脚本和削减他们的样式将仍然减少 5%或以上大小。 如使用和 JavaScript 和 CSS 增加的大小，也将节省所得削减您的代码。
避免重定向
标记： 内容
重定向是通过使用 301 和 302 状态代码完成。 以下是在 301 响应 HTTP 头的示例：
HTTP/1.1 301 Moved 永久位置: http://example.com/newuri 内容类型： text/html
浏览器自动将用户需中指定的 URL， 位置 字段。 所需的重定向的所有信息都为标头。 该响应的正文是通常空的。 尽管他们的名字既不一的 301，也不 302 响应缓存在实践除非附加的标头如 过期 或 Cache-Control显示它应该是。 刷新元标记和 JavaScript 是其他方法直接到不同的 URL 的用户，但如果你必须重定向首选的技术是使用标准 3xx HTTP 状态代码，主要以确保正常工作的后退按钮。
最重要来记住的是重定向减慢用户体验。 插入 HTML 文档延迟与用户重定向中由于并不在页可以呈现页并没有组件的所有内容可以开始直至到达 HTML 文档被下载。
其中一个最浪费重定向经常发生，而且不一般能知道它 Web 开发人员。 缺少一个 URL，否则应该有一个尾部斜杠 (/) 时是它发生的。 为例去 http://astrology.yahoo.com/astrology 301 响应包含一个重定向到 http://astrology.yahoo.com/astrology/ （注意添加了斜杠） 中的结果。 这被修复的 Apache 中的使用 别名 或 mod_rewrite或 DirectorySlash 如果使用 Apache 处理程序的指令。
连接到一个新的一个旧的网站是重定向的另一个常见用途。 别人包括连接的一个网站不同部分和指导用户根据特定条件 （浏览器类型)、 类型的用户帐户，等等。 使用重定向连接两个网站很简单，需要小其他编码。 虽然在这些情况中使用重定向降低了为开发人员的复杂性，它会降低用户体验。 用于此重定向的请使用的替代方法包括使用 别名 及 mod_rewrite 如果两个代码路径在同一台服务器上承载的。 如果域的名称更改使用重定向的原因的替代方法是在联合中创建 CNAME （指向一个别名创建从一个域名到另一个 DNS 记录） 别名 或 mod_rewrite.
删除重复的脚本
标记： javascript
疼两次在一页中包括同一个 JavaScript 文件的性能。 这不是你可能认为不寻常的。 一十顶部美国网站的检讨显示两个包含重复的脚本。 两个主要因素增加单个 Web 页中被重复的脚本的赔率： 团队大小和数量的脚本。 时发生重复的脚本将损害通过创建不必要的 HTTP 请求和浪费的 JavaScript 执行的性能。
Internet Explorer，而不是 Firefox，会发生不必要的 HTTP 请求。 在 Internet Explorer 中，如果一个外部的脚本是包含两次，并不缓存，它生成两个 HTTP 请求页加载期间。 即使脚本是缓存，额外的 HTTP 请求发生时，用户重新加载页。
除了生成浪费 HTTP 请求外,，是评估多次脚本浪费时间。 此冗余的 JavaScript 执行的脚本是否缓存无论发生 Firefox 和 Internet Explorer 中,。
为了避免意外地包括同一个脚本两次一个方法是在您的模板化系统中实现脚本管理模块。 在典型的方式包括一个脚本就在你的 HTML 页中使用 SCRIPT 标记。
<script type="text/javascript"src="menu_1.0.17.js"> </script>
在 PHP 中的替代方法就是创建一个称为函数 insertScript.
<吗？ php insertScript("menu.js")？ >
在同一个脚本防止被插入多次，此函数能处理脚本的其他问题，如依赖项检查，并将版本号添加到支持远的未来的脚本文件名过期标头。
配置 ETags
标记： 服务器
实体标记 (ETags) 是一个机制，以确定是否在浏览器的缓存中的该组件与匹配源服务器上有 Web 服务器和浏览器使用。 (一个实体是另一个 Word 一个组件： 图像脚本、 样式表等) ETags 已添加到提供一个比上次修改日期更灵活的机制来验证实体。 一个 ETag 是组件的一个字符串，唯一地标识特定版本。 唯一的格式约束是字符串被引述。 原服务器指定组件的 ETag 使用， ETag 响应标头。
上次修改的 HTTP/1.1 200 确定： 2006 12 月 12 星期二 03： 03： 59 GMT ETag："10c24bc 4ab 457e1c1f"内容长度： 12195
稍后，如果浏览器来验证一个组件具有，它使用， 如果没有匹配 将该 ETag 传递回原始服务器的头。 如果在 ETags 匹配，304 状态代码由返回减少响应 12195 字节，对于此示例。
GET /i/Yahoo.gif HTTP/1.1 主机： us.yimg.com If-修改-自： 2006 12 月 12 星期二 03： 03： 59 GMT 如果没有-匹配： 不修改"10c24bc 4ab 457e1c1f"HTTP/1.1 304
ETags 的问题是他们通常兴建使用到特定服务器承载一个站点唯一使的属性。 浏览器从一个服务器获取原始组件并稍后尝试验证该组件是太普遍使用的服务器群集来处理请求的网站上的情况的不同服务器上时，就不会匹配 ETags。 默认情况下，Apache 和 IIS 都在大大减少了成功在与多个服务器的网站上的有效性测试的赔率的 ETag 中嵌入数据。
Apache 1.3 和 2.x ETag 的格式是 inode protection mode-inode 大小时间戳. 虽然给定的文件可能驻留在同一目录中跨多个服务器，和有相同的文件大小、 权限、 时间戳、 等，及其 inode 有到下一台服务器不同。
IIS 5.0 和 6.0 出现 ETags 类似问题。 在 IIS 上 ETags 的格式是 Filetimestamp:ChangeNumber. A ChangeNumber 是一个计数器用于跟踪到 IIS 的配置更改。 这是不可能，在 ChangeNumber 是相同的跨 Web 网站背后的所有 IIS 服务器。
最终结果是由 Apache 生成 ETags 和精确的同一组件为 IIS 不会匹配从一个服务器，到另一个。 如果不匹配，ETags，该用户不会收到 ETags 设计为在小型的、 快速 304 响应 ； 而是，他们将获得一个正常的 200 反应，沿与所有的数据组件的。 如果您托管在你只是一台服务器上的网站这不是一个问题。 但是如果您有多个服务器承载您的网站，并且您使用 Apache 或 IIS 使用默认的 ETag 配置，您的用户越来越慢页、 服务器将拥有高负载，你要消耗更大的带宽，代理不有效地缓存您的内容。 即使您的组件具有远的未来 过期 标头，一个条件 GET 请求仍付款时，用户点击 Reload 或刷新。
如果你不利用 ETags 提供的灵活验证模型，最好只是完全删除该 ETag。 在 最后修改 标头验证基于组件的时间戳。 并删除该 ETag 减少响应和后续请求中的 HTTP 头的大小。 此 Microsoft 支持文章 介绍如何删除 ETags。 在 Apache 下，这是通过只需添加到您的 Apache 配置文件的以下行：
FileETag none
使 Ajax Cacheable
标记： 内容
被引 Ajax 的好处之一是它向用户提供瞬时反馈，因为它以异步方式从后端 Web 服务器请求信息。 但是，使用 Ajax 是不能保证用户不会被玩弄等待这些异步的 JavaScript 和 XML 响应返回他拇指。 在许多的应用程序是否或没有用户是否保持轮候取决于如何使用 Ajax。 例如在基于 Web 的电子邮件客户端用户将会保持等待一个 Ajax 请求，若要查找与他们的搜索条件匹配的所有电子邮件邮件的结果。 很重要要记住"异步"并不表示"瞬时"。
若要提高性能，很重要优化这些 Ajax 响应。 提高 Ajax 的性能，最重要方法是使响应缓存，如所述 添加一个 Expires 或一个 Cache-Control 标头 。 一些其他规则也适用于 Ajax：
让我们看一个示例。 Web 2.0 电子邮件客户端可能使用 Ajax 下载 autocompletion 的用户的通讯簿。 如果用户没有修改她的通讯簿自上次她用电子邮件 Web 应用程序，能从缓存读取以前的地址簿响应，如果该 Ajax 响应了缓存与未来的 Expires 或 Cache-Control 标头。 浏览器必须了解何时使用先前缓存的地址簿响应与请求一个新。 可以这样做通过将一个时间戳添加到通讯簿，该值指示用户修改她的通讯簿最后一次的 Ajax URL 例如 (& T) = 1190241612. 如果通讯簿还没有被修改，自上次下载，时间戳会相同，并将从消除一个额外的 HTTP 往返的浏览器的缓存读取通讯簿。 如果用户已修改她的通讯簿，时间戳可确保新的 URL 不匹配，缓存的响应，并在浏览器将请求更新的地址簿条目。
即使你 Ajax 响应动态，创建，并且可能只适用于单个用户，他们仍然可以缓存。 这样做会更快地使您的 Web 2.0 应用程序。
早刷新缓冲区
标记： 服务器
当用户请求了一个页面时它可以去任何地方由 200 500ms 以便后端服务器缝 HTML 页。 在这一次浏览器是怠速的正如它在等待到达数据。 在 PHP 必须函数 flush() 。 它允许您发送到浏览器你部分准备好的 HTML 响应，以便在浏览器可以开始提取组件，而你的后端是忙于 HTML 页的其余部分。 上忙的后端或光 frontends 可见主要到效益。
因为头 HTML 通常要容易产生，它使您可以包括任何 CSS 和 JavaScript 的文件，开始时在后端仍在处理中并行的提取浏览器的右后，HEAD 考虑冲厕的好地方。
示例：
... <!-- css, js --> </head> < 吗？ php flush() ；？ > <body>...了解 <!---> 的内容
Yahoo! 搜索 率先研究和测试，以证明使用此技术的优点的真实用户。
将 GET 用于 AJAX 请求
标记： 服务器
Yahoo! Mail 团队发现，使用时 XMLHttpRequestPOST 作为两步过程实现中，浏览器： 首先，发送标头，然后发送数据。 因此它的最大努力使用 GET，只需一个 TCP 数据包发送 （除非您有大量的 Cookie)。 最大的 URL 长度，在 IE 中是 2 K，所以，如果您发送超过 2 K 数据你可能不应该能够使用 GET。
一个有趣的侧影响是没有实际过帐任何数据的 POST 行为像 GET。基于 HTTP 规格 ，GET 是为了检索信息，所以使用 GET，你只请求数据，有别于发送的数据会存储的服务器端时 （语义） 有意义。
后的组件
标记： 内容
您可以看一看在您的页面和问自己："什么是绝对要求，以最初呈现页？"。 其余的内容和组件可以等待。
JavaScript 是一个理想的候选人分裂之前和之后 onload 事件。 如果你有 JavaScript 代码和做拖的图书馆的示例和下降及动画，那些可以等待，因为在页上拖动元素来后初始的呈现。 其它地方寻找 post-loading 候选人包括隐藏的内容 （用户操作后出现的内容） 和图像，褶皱下面。
工具，帮助你出你的努力中： YUI 图像 Loader 使您可以延迟，褶皱下面的图像和 YUI 获取实用程序 是一种容易的动态中包括 JS 和 CSS 的方法。 有关野生以看一下 Yahoo! 主页 Firebug 的网络与示例打开。
很好的绩效目标时与其他 Web 开发的最佳实践内联。 在这种情况下的理念逐步增强告诉我们，JavaScript，支持时, 可以改善用户体验，但你要确保即使没有 JavaScript 该页工作。 所以您做出确保后该页正常工作，您可以提高一些给你更多的点缀如拖动，并将的 post-loaded 的脚本和动画。
预加载组件
标记： 内容
预载荷可能看起来像 post-load 的相反，但它实际上有一个不同的目标。 通过预压组件，您可以利用的浏览器处于空闲状态的时间，并请求组件 （如图像、 样式和脚本），您将在未来需要。 当用户访问下一页这种你能有大部分的组成部分已在缓存中，您的页面将为用户加载快得多。
有的预压实际上几种类型：
- preload Unconditional -尽快 onload 激发您前进，并提取一些额外的组件。 检查字词的一种 Sprite 图像是如何示例要求 onload。 于字词网页上，此 Sprite 图像不需要，但它需要连续的搜索结果页上。
- 条件 预加载-基于您进行有见地猜测下一步领导用户是一个用户操作，并据此预加载。 search.yahoo.com 上可以看到一些额外的组件如何被请求后你开始在输入框中键入。
- 预 Anticipated 载荷-推出重新设计前预先预载荷。 它经常发生后你听到的重新设计： 「 新网站是酷，但这是较前 」。 用户所访问的一个完整的缓存的旧网站，但新始终是空的缓存的经验，可能是问题的一部分。 您可以通过预压某些组件，您甚至推出了重新设计之前缓解此副作用。 您的旧网站可以使用浏览器处于空闲状态的时间，并请求图像和将由新的网站使用的脚本
减少 DOM 元素的数目
标记： 内容
复杂的页面意味着要下载更多字节，而这还意味着在 JavaScript 中的慢 DOM 访问。 如果您依次通过页上的 500 或 5000 DOM 元素，当您要添加事件处理程序，例如，它使不同。
DOM 元素的一个高编号可以是一个应该加以改善使用页的标记而不一定删除内容的症状有个东西。 你是否在使用嵌套的表布局用途吗？ 你投掷在更多 <div>s 只以修复布局问题？ 也许还有一个更好，并更多语义更正您的标记的方法。
很有帮助的布局是 YUI CSS 实用程序 ： grids.css 可以帮助您以整体的布局，fonts.css 和 reset.css 可以帮助您去除格式的浏览器的默认值。 这是启动新鲜和想想你的标记，例如使用一次机会 <div>s 只时语义上，有意义，并不是因为它呈现一个新行。
DOM 元素的数目很容易测试，只需键入 Firebug 的控制台中：document.getElementsByTagName('*').length
而多少 DOM 元素是太多吗？ 检查其他类似的页面具有良好的标记。 例如 Yahoo! 主页 是一个很忙的页和仍下 700 元素 （HTML 标记）。
跨域拆分组件
标记： 内容
分裂组件允许您最大化并行下载。 确保您由于 DNS 查找罚款的使用不超过 2-4 域。 您可以为例上承载您的 HTML 和动态内容 www.example.org 和拆分之间的静态组件 static1.example.org 及 static2.example.org
更多信息请查看 Tenni Theurer 和 Patty 志中" Maximizing 并行下载 Carpool 里中 "。
最小化 iframes 的数
标记： 内容
Iframes 允许要父文档中插入 HTML 文档。 很重要，了解如何 iframes 工作以便他们可以有效地使用。
<iframe> IT 专业人员：
- 帮助解决慢的第三方内容 （如徽章和广告
- 安全沙盒
- 下载中并行的脚本
<iframe> 缺点：
- Costly 即使空白
- 砌块页 onload
- 无语义
否 404s
标记： 内容
HTTP 请求是昂贵的如此发出一个 HTTP 请求和获取无用的响应 (即 404 找不到) 是完全不必要的而且会降低没有任何利益的用户体验。
一些网站都有很有帮助 404s年"吗你是说 X？"，是很大的用户体验，但亦浪费服务器资源 （如数据库等）。 特别是坏的是当是错误的链接以一个外部的 JavaScript，结果是一个 404。 首先，此下载将阻止并行下载。 下一步浏览器可能会尝试分析 404 响应正文，如同它是想找的东西可用的 JavaScript 代码。
减少 Cookie 大小
标记： Cookie
HTTP Cookie 用于各种原因如身份验证和个性化设置。 在 Web 服务器和浏览器之间的 HTTP 标头中交换有关 Cookie 的信息。 很重要保持 Cookie 的大小以尽量减低对用户的响应时间的影响尽可能低。
更多信息请查看 "时，Cookie 碎" Tenni Theurer 和 Patty 志。 这项研究，以主页:
- 消除不必要的 Cookie
- 保持 Cookie 大小以尽量减低对用户响应时间的影响尽可能低
- 会注意到在相应的域级设置 Cookie，因此其它子域不受影响
- 相应地设置一个 Expires 日期。 更早的 Expires 日期或不删除该 Cookie 越早，提高用户响应时间
为组件使用无 Cookie 的域
标记： Cookie
当浏览器使静态图像的请求，并发送 cookie 与请求一起时，服务器没有任何的那些 Cookie 的使用。 因此他们只创建网络通信没有充分的理由。 您应确保静态组件被请求无 Cookie 的要求。 创建一个子域和主机所有静态组件那里。
如果您的域是 www.example.org你可以上承载您静态的组件 static.example.org. 但是，如果了已在顶级域上设置 Cookie example.org 相对于 www.example.org然后所有请求到 static.example.org 将包括这些 Cookie。 在这种情况下可以买一个全新的域、 承载静态组件那里，并保持此域无 Cookie。 Yahoo! 用途 yimg.comYouTube，使用 ytimg.comAmazon 使用 图像 amazon.com 等等。
承载一个无 Cookie 的域上的静态组件的另一个好处是某些代理可能会拒绝缓存在请求与 Cookie 的组件。 对相关的注释如果您不知道是否您应使用 example.org 或 www.example.org 进行您的主页，考虑 Cookie 影响。 省略 www 离开你无奈写入到 Cookie * ＊ example.org那么的性能原因，最好使用 www 子域和写入该子域的 Cookie。
最小化 DOM Access
标记： javascript
访问 DOM 元素使用 JavaScript 是慢，因此要一个响应更快的页，你应该：
- 访问元素的缓存提
- 更新"脱机"节点，然后将它们添加到树
- 避免使用 JavaScript 固定布局
更多信息请查看由 Julien Lecomte YUI 剧院 "高性能 Ajax 应用程序"。
发展智能事件处理程序
标记： javascript
有时由于的太多事件处理程序附加到的 DOM 树，然后过于频繁执行的不同元素页感觉不到响应。 这就是为什么使用 事件代表团 是一个好方法。 如果您有 10 按钮内的一 div将只有一个事件处理程序附加到该 div 包装的每个按钮的一个处理程序而不是。 事件冒泡了等，这样您就能够捕获事件，并找出它来自哪个按钮。
你也不必等待 onload 事件，以开始做某事与 DOM 树。 通常所需的全部是您要访问可在树中的元素。 您不必等待要下载所有图像。 DOMContentLoaded 是你可以考虑的 onload，而不是使用的事件，但直到是在所有浏览器中可用您可以使用了 YUI 事件 实用程序一个 onAvailable 方法。
更多信息请查看由 Julien Lecomte YUI 剧院 "高性能 Ajax 应用程序"。
选择 <link> 上 @ 导入
标记： css
以前的最佳实践之一明 CSS 应在顶部以便允许进步的呈现。
在 IE 中 @ 导入 行为相同，使用 <link> 在页的底部，因此最好不使用它。
避免筛选器
标记： css
IE proprietary AlphaImageLoader筛选旨在修复半透明真彩色 PNG IE 版本 < 7 中的问题。 此筛选器的问题是它砌块呈现，并冻结浏览器，而正在下载图像。 它也增加内存消耗，并因此问题乘以每个元素，不是每图像，应用。
最好的方法是避免 AlphaImageLoader 完全和使用优雅而，降解 PNG8 哪些细在 IE 中。 如果绝对需要 AlphaImageLoader使用下划线黑客 _filter 以不惩罚你 IE7 + 用户。
优化图像
标记： 图像
设计器通过创建您的网页，图像完成后，仍有一些可以尝试在你面前的东西 FTP 这些到您的 Web 服务器的图像。
- 您可以检查，GIF，并查看是否他们使用的一个相对应的图像中的颜色数的调色板大小。 使用 imagemagick 很容易检查使用
标识-详细 image.gif
在看到一个图像掉电 4 颜色与调色板中角子机的 256 色时有空间改进。 - 尝试将 GIF 转换为 PNG，看看是否有一个保存。 往往不，有。 开发人员经常犹豫了，使用 PNG 由于在浏览器，有限的支持，但这现在是一件事的过去。 只有真正的问题是 alpha 透明度在真彩色 PNG，但又中 GIF 不是真彩色，也不支持可变的透明度。 所以一 GIF 可以做任何事情，调色板 PNG (PNG8) 可以做太 （除了用于动画)。 此简单 imagemagick 命令会导致完全安全使用 PNG：
转换 image.gif image.png
"我们所说的是： 授予 Ping 一个机会 ！" - 所有您 PNG 示例上运行 pngcrush （或任何其它 PNG 优化器工具）：
pngcrush image.png-rem alla-减少-迫法 result.png - 所有您式 JPEG 上运行 jpegtran。 此工具并无损 JPEG 操作如旋转，并也可用于以优化和从您的图像中删除批注和其它无用的信息 （例如，EXIF 信息）。
jpegtran-复制没有-优化-完善 src.jpg dest.jpg
优化 CSS 子画面
标记： 图像
- 安排中水平相对于垂直通常较小的文件大小中的结果 Sprite 图像。
- 结合类似中您保持低的颜色计数一 Sprite 帮助，以适合在一个 PNG8 理想情况下根据 256 色的颜色。
- "，移动友好型"，不要在一个 Sprite 图像之间离开大差距。 这不会影响尽可能多的文件大小，但需要内存较少，使用户代理解压缩到像素地图的形象。 100 x 100 图像是 10 千像素，1000 x 1000 所在 1 万像素
不要在 HTML 中缩放图像
标记： 图像
不要使用比您需要，只是因为您可以在 HTML 中设置宽度和高度的一大图像。 如果您需要 <img width="100"height="100"src="mycat.jpg"alt="My Cat"/>
然后您的映像 （mycat.jpg) 应 100x100px 而非一个规模下 500x500px 图像。
使 favicon.ico 及缓存
标记： 图像
在 favicon.ico 是服务器的保持您的根目录中的图像。 这是必要之恶，因为即使你不关心它浏览器会仍然要求它，所以是更好，不使用响应一 找不到的 404. 此外因为它在同一台服务器上，会每次请求的发送 Cookie。 此图像也干扰，下载序列的例如的 IE 请求中，onload 额外组件时，该图标将下载前这些额外的组件。
因此，以减轻有确保一个 favicon.ico 的缺点：
- 最好是根据 1K 很小。
- 设置与你感觉舒适 （因为如果您决定更改它，您不能重命名） Expires 标题。 您可以可能安全设置 Expires 标题在未来几个月。 您可以检查作出知情的决定您当前的 favicon.ico 的最后修改的日期。
Imagemagick 可以帮助您创建小 favicons
保持组件下 25 K
标记： 移动
此限制被有关该 iPhone 不会缓存组件大于 25 K 这一事实。 请注意这是 未压缩 的大小。 这是缩小所在重要因为 gzip 独自可能不足够。
更多的信息检查" 性能研究、 第 5 部分： iPhone 可缓存性-厂务它 Stick "Wayne Shea 和 Tenni Theurer。
组件打包到一个由多部分组成的文档
标记： 移动
包装到一个由多部分组成的文档的组件就像带附件的电子邮件，它可帮助您获取一个 HTTP 请求的几个组件 (请记住： HTTP 请求昂贵)。 在使用此技术时首先检查是否用户代理支持它 (iPhone 不)。
