待翻译...
http://code.google.com/intl/zh-CN/speed/page-speed/docs/payload.html
最小化有效荷载的尺寸
每个服务器响应所发送的数据量都会对你的应用造成严重的延迟，尤其在那些宽带受限的地区。除了传输实际字节产生的网络成本以外，还有因为 IP 数据包越界而产生的赔偿费用（罚金）。（以太网（ethernet）上最大包尺寸，或曰最大传输单元（MTU，Maximum Transmission Unit）是 1500 字节，但是其他类型的网络会有所不同。）不幸的是，因为不知道究竟会多几个字节就会跨越一个包的边界，最好的方法只有简单缩减传输包的数目，并且努力将每个包的大小控制在 1500 字节以内。
不论对于动态的还是静态的资源，最小化有效荷载的尺寸都能极大缩减网络延迟。另外，对于那些缓存的脚本，缩减脚本的尺寸能加速浏览器解析和执行代码，从而提高页面渲染速度。
- 启用压缩（Enable compression）
- 移除无用的 CSS（Remove unused CSS）
- 缩减 JavaScript（Minify JavaScript）
- 缩减 CSS（Minify CSS）
- 缩减 HTML（Minify HTML）
- 延迟加载 JavaScript（Defer loading of JavaScript）
- 优化图像（Optimize images）
- 缩放图像（Serve scaled images）
- 资源来自固定的 URL（Serve resources from a consistent URL）
启用压缩（Enable compression）
概览
用 gzip 或 deflate 压缩资源能缩减通过网络传输的字节数。
详情
许多现代浏览器支持 HTML、CSS 和 JavaScript 的数据压缩（原文：Most modern browsers support data compression for HTML, CSS, and JavaScript files. ）。数据压缩使得通过网络传输的内容更为紧凑从而戏剧性的缩减下载时间。
许多 WEB 服务器都有这样的功能：在发送文件给客户端下载之前，调用第三方模块或者使用内建的程序，用 gzip 格式压缩待发送的文件。为了启用压缩功能，需要配置你的 web 服务器，为所有可压缩的资源设置 Content-Encoding 头为 gzip 格式。你也可以使用 deflate ，这也是一种压缩算法，不过使用的不是很广泛，因此我们还是推荐 gzip。如果流压缩给服务器施加了过多的压力，通常可以配置预压缩文件并把他们缓存起来以备未来下载只用。
注意，gzip 压缩只对大尺寸的资源有较好的收益。由于压缩和解压会造成开销和延迟，应当只压缩超过尺寸限制的那些文件；为我们推荐最小的尺寸范围在 150 到 1000 字节之间。低于 150 字节的文件，实际压缩之后的尺寸会更大。
推荐
-
编写你的网页内容，使压缩最有效（Write your web page content to make compression most effective）
-
为了确保你的内容压缩的好，请按照下列步骤去做：
- 确定 HTML 和 CSS 代码的一致性。为了达到一致性：
- 在任何可能的地方以同样的顺序具体指定 CSS 的“键-值”对（key-value pairs），例如：把他们按照字母顺序排列。
- 以同样的顺序具体指定 HTML 属性，例如：把他们按照字母顺序排列。对于链接，把
href放在第一位（因为一般这个最重要），剩下的部分按照字母顺序排列。例如，在 Google 的搜索结果页上，如果 HTML 属性按照字母顺序排列，gzip 压缩输出的大小能缩减 1.5%。 - 统一大写或者统一小写，例如尽量统一小写。
- 给 HTML 标签属性使用统一的引号，例如：总是单引号，或者总是双引号，或者都没有引号。
- 缩减 JavaScript 和 CSS 。不论是引用的外部 JavaScript 和 CSS 还是 包含在 HTML 页面内的 JS 代码和样式块，缩减 JavaScript 和 CSS 都能显著提高压缩量。
- 确定 HTML 和 CSS 代码的一致性。为了达到一致性：
- 同视频、PDF以及其他二进制格式一样，web 支持图像文件格式文件是已经经过压缩的，故而用 gzip 压缩他们是没有效果的，实际上，这样做可能会使他们更大。要压缩图像，请参见 优化图像 。
不要用 gzip 压缩图像或其他二进制文件（Don't use gzip for image or other binary files）
附加资源
- 有关用压缩格式下载网页内容的更多技巧请参见：用压缩技术使网页更快 。
移除无用的CSS（Remove unused CSS）
概览
移除或者推迟使用文档没有用到的样式规则可以避免下载不必要的字节，并让浏览器尽早开始渲染页面。
详情
在浏览器开始渲染页面之前，必须下载并解析所有的布局页面所需的样式。即使样式文件是被缓存了的外部文件，也要等到浏览器从磁盘上加载完样式才会开始渲染。此外，一旦样式表被加载，浏览器的 CSS 引擎就得开始评估样式文件中的每条规则，即使定义的规则实际并没有被页面采用。通常，许多 web 站点会让自己的页面重用同样的外部 CSS 文件，即使许多定义的规则没有用在引用它的页面里。
要最小化加载样式表和渲染页面的延迟时间，最佳的方法是移除或者推迟那些当前页没有用到的样式规则。
提示： 当你针对一个页面引用的 CSS 文件运行 Page Speed 时，Page Speed 会给出所有的那个页面没有用到的样式规则。
推荐
- 移除所有没有被当前页面使用的样式块。
- 缩减 CSS 。
- 如果站点的多个页面共享了外部的 CSS 文件，请依据具体的页面把这些 CSS 文件分割成更小的文件。
- 如果页面引用的样式规则在页面启动的时候不是必须的，把它们放到单独的 .css 文件中并延迟 到
onload事件完成之后再加载。 - 如果你用 JavaScript 生成样式，请确保那些不使用这些样式的页面不会调用 JS 函数。这里可能会需要重构 JS 代码。
缩减 JavaScript（Minify JavaScript）
概览
压缩 JavaScript 代码能节省许多字节并提高下载、解析的速度，减少执行时间。
详情
“缩减”代码指排除不必要的字节，例如额外的空白、缩进。保持 JavaScript 代码紧凑的好处很多。首先，对那些你不想缓存的内联 JS 和外部文件，越小的文件尺寸更能缩减每次下载页面的网络延迟。其次，缩小文件尺寸能更多压缩外部 JS 文件和内嵌了 JS 代码的 HTML 文件。第三，较小的文件能被 web 浏览器更快的下载和执行。
有几个免费的工具可以缩减，例如 Closure Compiler , JSMin 或者 YUI Compressor 。你可以创建一个生成过程，用这些工具缩减并重命名开发文件并把他们存到产品目录之中。我们推荐缩减所有超过 4096 字节的 JS 文件。你会发现任何文件都能被缩减 25 字节或者更多（或更少，这点差异不会有明显的性能增益）。
提示： 当你针对一个页面引用的 JS 文件运行 Page Speed 时，Page Speed 会自动针对文件运行 Closure Compiler （如果可用的话）和 JSMin（给内联块用的，或者前述的编译器不可用) 并保存输出结果到一个可配置的目录 。
缩减 CSS（Minify CSS）
概览
压缩 CSS 代码能节省许多字节并提高下载、解析的速度，减少执行时间。
详情
缩减 CSS 的好处同 JS：缩减网络延迟，提高压缩量，浏览器加载和执行的更快。
有几个缩减 CSS 的免费工具，如：YUI Compressor 和 cssmin.js .
提示： 当你针对一个页面引用的 CSS 文件运行 Page Speed 时，Page Speed 会自动运行 cssmin.js 并保存输出结果到一个可配置的目录 。
缩减 HTML（Minify HTML）
概览
压缩 HTML 代码，包括其中内联的 JavaScript 和 CSS，能节省许多字节并提高下载、解析的速度，减少执行时间。
详情
缩减 HTML 的好处同 CSS 和 JS：缩减网络延迟，提高压缩量，浏览器加载和执行的更快。此外，HTML 经常包含内联 JS 代码（包含在<script>标签内）和内联 CSS （包含在<style>标签内），所以 Moreover, HTML frequently contains inline JS code (in <script> tags) and inline CSS (in <style> tags)，因此对缩减它们是也有用的。
注意： 这个规则是试验性的，当前只是聚焦在缩减文件尺寸上，而不是限制格式良好的 HTML。该规则的未来版本还将考虑正确性（原文：Future versions of the rule will also take into account correctness）。当前版本的更多细节参见Page Speed wiki 。
提示： 当你针对指定的 HTML 文件运行 Page Speed 时，Page Speed 会自动运行 Page Speed HTML compactor（它会对所有内联的 JavaScript 和 CSS 依次应用 JSMin and cssmin.js）并保存输出结果到一个可配置的目录 。
延缓加载 JavaScript（Defer loading of JavaScript）
概览
延缓页面启动不需要的 JavaScript 函数的加载会缩减初始化时要下载的页面尺寸，使得其他资源可以并行下载，从而加速页面执行、减少页面渲染时间。
详情
在浏览器开始渲染页面之前，必须下载、解析和执行样式表和脚本。再次说明，即使是包含在外部文件中的脚本已经被缓存了，对脚本控制下所有元素的处理仍将被阻塞，直到浏览器从磁盘上加载了脚本代码并执行。而且，对某些浏览器，这种情况可能更严重：当 JavaScript 正在处理的时候，所有在下载的其他资源全部被阻塞。对于使用了很多 JavaScript 代码的 AJAX 应用，将产生严重的延迟。
对许多脚本敏感的应用，会用大量的 JavaScript 代码处理用户初始化时间，例如鼠标点击和拖拽， 从进入到提交，以及元素的隐藏与展开，等等。所有这些用户触发事件都出现在页面加载完成之后，且在页面的 onload 时间触发之后。因此，大多数处于“关键路径（critical path）”上的延迟（初始化主要页面的加载时间）是可以避免的，方法是：延缓加载 JavaScript，只在实际用到的时候再加载。然而这种“偷懒”的方法并不能缩减总的 JS 负载，缩减页面初始化时必须加载的代码的字节数是至关重要的，让那些不影响页面初始化的代码在后台异步下载。
要使用这项技术，应当首先确定出那些在文档的 onload 事件之前没有实际用到的 JavaScript 函数。对于任何一个含有超过 25 个未调用函数的文件，把这些函数统统搬到一个单独的外部 JS 文件中。这样一来，可能需要重构一些代码，以便相关文件在新的依赖关系下正常工作。（如果一个文件包含的为调用函数不到 25 个，不值得做这样的重构工作。）
然后，你再在包含这些 js 的文档头部插入一个 JavaScript 事件监听器，迫使这个外部文件在 onload 事件之后加载。任何一段常用的脚本方法就可以实现，不过我们还是推荐简单的脚本 DOM 元素（避免跨浏览器和同域名政策等问题）。这里有个例子（deferredfnctions.js 含有几个需要延迟加载的函数）：
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src="http://singlefamilies.blog.163.com/blog/deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
优化图片（Optimize images）
概览
合适的图片格式和压缩图片能节省许多字节。
详情
图片可以用 Fireworks 之类的图像存储。Fireworks 包含几千字节的扩展comment（原文：kilobytes of extra comments）、丰富的色彩，即使减少调色板也不会明显降低图片质量。不恰当的优化图片会占用比实际需要多得多的空间；对慢速连接的用户来说，最小化图片尺寸显得十分重要。
所有的图像都需要执行基本的和高级的优化。基本优化包括裁剪不必要的空白、缩减颜色深度到可接受范围的底线、删除图片注释（原文：removing image comments）、用合适的尺寸存储图片。任何图片编辑器（例如 GIMP ）都可以做到基本的优化。高级优化包括进一步（无损）压缩 JPEG 和 PNG 文件。你会发现，任何图片文件都能缩减 25 字节或者更多（或更少，这点差异不会有明显的性能增益）。
推荐
-
选择合适的图片文件格式（Choose an appropriate image file format）
-
图片文件的类型直接影响文件的尺寸。请使用下列指南：
- PNG 图像比 GIF 图像要好，通常也是最佳选择。IE 4.0b1+、Mac IE 5.0+、Opera 3.51+ 和 Netscape 4.04+ 以及 Safari 和 Firefox 的其他版本完全支持 PNG，包括其透明特性。IE 4 到 6 的版本不支持 alpha 通道的透明模式（部分透明）但是他们支持 256 及以下色彩的 1-比特透明（256-color-or-less PNGs with 1-bit transparency）（同样被 GIF 支持）。IE 7 和 8 支持 PNG 的 alpha 透明，除非该元素同时应用了 alpha 不透明滤镜（alpha opacity filter）。你可以用 GIMP 的 Indexed 模式（而不是 RGB 模式）制作或者转化合适的 PNG 图像。如果你必须维护兼容 3.x 以下的版本的浏览器的页面，对这些浏览器用 GIF 替换 PNG。
- 对一些非常小或者非常简单的图（例如，不到 10x10 像素，或调色板少于 3 种颜色）以及包含动画的图使用 GIF 图像。如果你认为图片存储为 GIF 格式可能会更小，把它存为 PNG 和 GIF 两种格式再从中挑选小的。
- 对所有照片风格的图片采用 JPG 图像。
- 绝不要使用 BMP 和 TIF 图像。
-
有几个可用的工具可以更进一步的无损压缩 JPG 和 PNG 文件，而不影响到图片质量。对 JPG，我们推荐
jpegtran 或
jpegoptim （仅 Linux 可用；在
--strip-all选项下运行）。对 PNG，我们推荐 OptiPNG 或 PNGOUT 。提示: 当你针对页面引用的 JPEG 和 PNG 文件运行 Page Speed 时，Page Speed 会自动压缩这些文件并保存输出结果到一个可配置的目录 。
使用图片压缩机（Use an image compressor）
缩放图像（Serve scaled images）
概览
合适的图像尺寸可以存储更多的数据。
详情
有时，你可能想用不同的尺寸呈现同一张图像，因此你会做一张图，然后用页面里的 HTML 或 CSS 来缩放显示。例如，你需要一张 10 x 10 的小图，它是 250 x 250 大图的缩略图，为了不迫使用户下载两张单独的文件，你用会使用上述标记来缩放显示缩略图。如果实际图片尺寸至少有一个匹配页面需要的图片尺寸（通常是最大的），本案例中是 250 x 250 像素，适当缩放其他显示尺寸是有道理的。但是，如果你提供图像的尺寸超过了页面上所有可能匹配的尺寸，你就向网线发送了不必传输的字节。你应当用图像编辑器缩放图像以便匹配网页实际需要的最大尺寸，同时也要确保页面上具体定义了图片的不同尺寸 。
同一资源来自同一个 URL（Serve resources from a consistent URL）
概览
同一资源来自个同一个 URL是十分重要的。这样会避免不必要的下载，减少额外的 RTT。
详情
有时，一个页面会有好几个地方引用同一份资源（图片就是一个典型的例子），更常见的是：站点通过 .css 和 .js 文件让多个页面共享同一份资源。如果你的页面确实需要引用同样的资源，应当保证这些资源 URL 的一致性。确保一份资源总是分配给一个 URL 的好处很多。这样会全面缩减有效荷载的大小，浏览器不必额外下载相同资源的多份拷贝。同时，大多数浏览器不会在一次会话中为一个资源发送超过一个 HTTP 请求，不论资源是否可缓存，所以你要节省额外的往返时间。尤其重要的是确保不要让来自不同的域提供同一个资源，以避免产生额外的 DNS 查询。
如果绝对 URL 的主机名匹配文档内容，相对 URL 和绝对 URL 是一致的（原文：Note that a relative URL and an absolute URL are consistent if the hostname of the absolute URL matches that of the containing document.）。例如，如果 www.example.com 上的主要页面引用资源 /images/example.gif 和 指引 www.example.com/images/example.gif 这两种方式是一致的。但是，如果页面指引 /images/example.gif 和指引 mysite.example.com/images/example.gif，这个就不一致了。
推荐
-
一个站点上的所有页面共享资源统一的 URL（Serve shared resources from a consistent URL across all pages in a site）
- 对于那些被多个页面共享的资源，要确保每个资源仅有唯一的 URL。如果某资源被多个页面/站点所共享，这些页面/站点相互之间有引用、且在运行在不同的域名或主机名上，这种情况下，比较好的做法是把这个资源文件放在一个单独的主机名上，而不要把它重复放在每个父级文档的主机名（原文：If a resource is shared by multiple pages/sites that link to each other, but are hosted on different domains or hostnames, it's better to serve the file from a single hostname than to re-serve it from the hostname of each parent document.）本案中，使用缓冲的好处是可以减少 DNS 查询的开销。例如，如果 mysite.example.com 和 yoursite.example.com 使用同一个 JS 文件，而且 mysite.example.com 链向 yoursite.example.com （无可避免的需要 DNS 查询），可以把这个 JS 文件 放在 mysite.example.com 上。用这种方式，当用户去 yoursite.example.com 时，这个 JS 文件很可能已经在浏览器缓存中了。
1889
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
