1.减少 HTTP 请求
- 图片地图
- CSS Sprites
- 内联图片和脚本
- 样式表的合并
图片地图
Image Map 允许在一个图片上关联多个 URL。
服务器端图片地图 将所有点击提交到同一个目标 URL，向其传递用户点击的 x、y 坐标。Web 应用程序将该 x、y 坐标映射为适当的操作。
客户端图片地图 可以将用户的点击映射到一个操作，而无需向后端应用程序发送请求。
映射通过 HTML 的 MAP 标签实现。
缺点 如果采用手工方式则很难完成而且容易出错，而且除了矩形之外几乎无法定义其他形状。
如果正在导航栏或者其他超链接中使用多个图片，将它们转换为图片地图> 是加速页面的最简单方式。
CSS Sprites
CSS Sprites 将多幅图片合并为一幅图片。
图片地图中的图片必须是连续的，而 CSS Sprites 没有这个限制。比图片地图更加灵，而且还降低了下载量。
如果需要在页面中为背景、按钮、导航栏、链接等提供大量图片， CSS > Sprites 是一种优秀的解决方案——干净的标签、很少的图片和很短的响
应时间。
内联图片
通过使用 data: URL 模式可以在 Web 页面中包含图片但无需任何额外的 HTTP 请求。（Internet Explorer 目前还不支持这种方式）
data:[<mediatype>][;base64],<data>
eg:
1
<img alt="red star" src="data:image/gif;base64,R01GOD1hDAA...">
2. 使用内容发布网络
内容发布网络（CDN）是一组分布在多个不同地理位置的 Web 服务器，用于更加有效地向用户发布内容。
优点: 缩短响应时间，CDN 的服务包括备份、扩展存储能力和进行缓存。CDN 还有助于缓和 Web 流量峰值压力，如在获取天气或股市新闻、浏览流行的体育或娱乐事件时。
缺点:（1）响应时间可能会受到其他网站——甚至很可能是竞争对手流量的影响。（2）无法直接控制组件服务器所带来的特殊麻烦。eg: 修改 HTTP 响应头必须通过服务提供商来完成，而不是由你的团队完成。（3）如果 CDN 服务的性能下降，那么也会降低工作质量。
CDN 用于发布静态内容，如图片、脚本、样式表和 Flash。提供动态 > HTML 页面会引入特殊的存储需求——数据库连接、状态管理、验证、硬件> 和 OS 优化等。这些复杂性超越了 CDN 的能力范围。另一方面，静态文> 件更容易存储并具有较少的依赖性。
3.添加 Expires 头
Expires 头会和相应的过期时间组件一起保存到其缓存中。只要组件没有过期，浏览器就会使用缓存版本而不会进行任何 HTTP 请求。
Cache-Control 使用 max-age 指令指定组件被缓存多久。
为组件添加长久的 Expires 头。
4.压缩组件
Accept-Encoding:gzip,deflate 会使客户端列出来的方法中一种来压缩响应。
Web 服务器通过响应中的 Content-Encoding: gzip 来通知客户端。
gzip 是目前最流行和最有效的压缩方法。
压缩的内容包括 XML 和 JSON 在内的任何文本响应，（在此关注脚本和样式表），图片和 PDF 不应该压缩，因为它们本来就已经被压缩了，对它们试图进行压缩只会浪费 CPU 资源，还有可能增加文件大小。
通常对于大于 1KB 或 2KB 的文件进行压缩。 mod_gzip_minimum_file_size 指令控制着希望压缩的文件的最小值，默认值是 500B。
配置 gzip 时使用的模块取决于 Apache 的版本。
代理缓存
Vary: Accept-Encoding 将使得代理缓存响应的多个版本，为 Accept-Encoding 请求头的每个值缓存一份。
边缘情形
如果网站用户很少，并且他们处于一个小圈子中，边缘情形就不需要太多关注。可以压缩内容并使用 Vary: Accept-Encoding。 这样可以通过减小组件的大小和利用代理缓存来改善用户体验。
如果更注意带宽开销，可以和前一种一样——可以压缩内容并使用 Vary: Accept-Encoding。 这样可以降低服务器的带宽开销并提升了代理处理的请求数量。
如果拥有大量的、多变的用户群，能够应付较高的带宽开销，并且享有高质量的名声，请压缩内容并使用 Cache-Control:Private。这禁用了代理缓存但避免了边缘情形的缺陷。
5.将样式表放在顶部
将样式表放在底部，会导致白屏。
@import 也可能会导致白屏现象。
使用 Link 标签将样式表放在文档 Head 中。
6. 将脚本放在底部
这样既页面可以逐步呈现，也可以提高下载的并行速度。
（每个主机名并行下载两个组件的限制只是一个建议，也可以重写： IE 将这个值存放在 Registry Editor 中； Firefox 使用 about:config 页面中的 network.http.max-persistent-connections-per-server 设置来修改，对于 HTTP1.0, Firefox 的默认值是每个主机名并行下载 8 个组件。 Yahoo! 研究表明，使用两个主机名比使用 1、4 或 10 个主机名能带来更好的性能。）
7.避免 CSS 表达式
CSS 表达式可能会出现处理页面加载之后的性能问题，也会影响页面的加载时间。
8.使用外部 JavaScript 和 CSS
9. 减少 DNS 查找
HTTP 构建在 Transmission Control Protocol(TCP) 之上。
在早期的 HTTP 实现中，每个 HTTP 请求都要打开一个 socket 连接。
持久连接 解决了多对一的请求，它使得浏览器可以在一个单独的连接上进行多个请求。浏览器和服务器使用 Connection 头来指出对 Keep-Alive 的支持。浏览器或服务器可以通过发送一个 Connection:close 头来关闭连接。
管道的性能优于持久连接。但是 IE(包括版本 7 在内)， Firefox （自版本 2 开始）就默认关闭了管道的功能。
Keep-Alive 可以通过重用现有连接，从而通过避免 TCP/IP 开销来减少响应时间。确保服务器支持 Keep-Alive 还能减少 DNS 查找，尤其是对 Firefox 用户。
通过使用 Keep-Alive 和较少的域名减少 DNS 查找。
10. 精简 JavaScript 代码
11. 避免重定向
重定向会使页面变慢！
当 Web 服务器向浏览器返回一个重定向时，响应中就会拥有一个范围在 3xx 的状态码。这表示用户代理必须执行进一步操作才能完成请求。
300 Multiple Choices
301 Moved Permanently
302 Moved Temporarily
303 See Other
304 Not Modified
305 Use Proxy
306 (不再使用)
307 Temporary Redirect
“304 Not Modified” 并不真的是重定向———它用来响应条件 GET 请求，避免下载已经存在于浏览器缓存中的数据。
303 和 307 是在 HTTP1.1 规范中添加的。
在 URL 结尾必须出现斜线（/） 缺少时导致了一个 301 响应。
12. 删除重复脚本
13. 配置 ETag
实体标签(Entity Tag, ETag) 是 Web 服务器和浏览器用于确认缓存组件有效性的一种机制。
对 ETag 进行配置，以利用其灵活的验证能力。
eg: 可以使用一段根据浏览器是否为 IE 而变化的脚本。 如果使用 PHP 来生成脚本，可以通过设置 ETag 头来反映浏览器状态——
<?php
if(strops($_SERVER["HTTP_USER_AGENT"],"MSIE"））{
header("ETag: MSIE");
}
else{
header("ETag: notMSIE");
}
如果组件必须通过最新修改日期之外的一些东西来进行验证，则 ETag 是一种强大的方法。如果无须自定义 ETag ，最好简单得将其移除。
配置或移除 ETag。
14. 使 Ajax 可缓存
改善主动 Ajax 请求最重要的方式就是使响应缓存，压缩组件、减少 DNS
查找、精简 JavaScript、避免重定向、ETag 也适用于 Ajax。
确保 Ajax 请求遵守性能指导，尤其应具有长久的 Expires 头。