如何通过 GZIP 压缩(Compression)优化你的网站

压缩是一种简单有效的节省带宽和加快网站速度的方法。我在推荐gzip压缩时曾犹豫过，加速你的JavaScript 因为问题在旧版浏览器.

但现在是21世纪。我的大部分流量来自现代浏览器，而且坦率地说，大多数我的用户都相当精通技术。我不希望因为有人在Windows 95上使用IE 4.0缓慢运行而拖慢其他人的速度。谷歌和雅虎都使用gzip压缩。要享受现代网络内容和现代网络速度，需要现代浏览器——因此采用gzip编码。以下是设置方法。

等等，等等，等等：我们为什么要做这个？

在开始之前，我应该解释一下什么是内容编码。当你请求一个文件时，比如 http://www.yahoo.com/index.html，你的浏览器会与Web服务器通信。对话大致如下：

HTTP request regular

浏览器：嘿， GET 我 /index.html
服务器：好，让我看看 index.html 在不在……
服务器：找到了！这是你的响应码（200 OK），我正在发送文件。
浏览器：100KB？哎呀……等待中……好了，已加载。

当然，实际的标头和协议更加正式（可以通过实时 HTTP 请求头监控它们，如果你有兴趣的话）。

但它能工作，你得到了你的文件。

那么问题出在哪里？

好吧，系统能工作，但效率不高。100KB是一个 大量文本，而且坦率地说， HTML 是冗余的。每个 <html>, <table> and <div> 标签都有一个几乎相同的闭合标签。单词在文档中重复出现。无论你怎么切分， HTML （以及它臃肿的表亲 XML）都不精简。

那么当文件太大时该怎么办？压缩它！

如果我们能向浏览器发送一个.zip文件（index.html.zip）而不是普通的index.html，就能节省带宽和下载时间。浏览器可以下载压缩文件，解压，然后展示给用户，用户因为页面加载快而心情愉快。浏览器与服务器的对话可能如下：

HTTP request compressed

浏览器：嘿，我可以要 GET index.html 吗？如果你有压缩版本我就用。
服务器：让我找找这个文件……是的，在这。你要压缩版本？太棒了。
服务器：好的，我找到了 index.html（200 OK），正在压缩并发送。
浏览器：太好了！只有10KB。我会解压并展示给用户。

公式很简单：更小的文件 = 更快的下载 = 快乐用户.

不相信我？雅虎首页的 HTML 部分在压缩后从101kb变为15kb：

（并不那么）复杂的细节

这个交换的棘手部分是浏览器和服务器知道可以发送压缩文件。这个协议有两部分

这个 浏览器发送一个请求头 告诉服务器它接受压缩内容（gzip 和 deflate 是两种压缩方案）： Accept-Encoding: gzip, deflate
这个 服务器发送一个响应 如果内容实际上被压缩： Content-Encoding: gzip

如果服务器不发送 content-encoding 响应头，意味着文件没有被压缩（许多服务器的默认设置）。“Accept-encoding”头只是浏览器的一个请求，而不是要求。如果服务器不想发回压缩内容，浏览器只能使用体积较大的普通版本。

配置服务器

“好消息”是我们无法控制浏览器。它要么发送 Accept-encoding: gzip, deflate 头，要么不发送。

我们的工作是配置服务器，使其在浏览器能够处理时返回压缩内容，从而为每个人节省带宽（并让用户满意）。

对于 IIS, 启用压缩在设置中。

在 Apache 中，启用输出压缩相当简单。将以下内容添加到你的 .htaccess 文件中：

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

Apache 实际上有两个压缩选项：

mod_deflate 更容易设置，而且是标准的。
mod_gzip 看起来更强大：你可以预压缩内容。

Deflate 速度快且有效，所以我使用它；如果喜欢，也可以使用 mod_gzip。无论哪种情况，Apache 都会检查浏览器是否发送了“Accept-encoding”头，并返回压缩或普通版本的文件。然而，一些旧版浏览器可能存在问题（详见下文），你可以添加特殊指令来纠正这个问题。

如果你无法更改 .htaccess 文件，你可以使用 PHP 返回压缩内容。给你的 HTML 文件加上 .php 扩展名，并在顶部添加以下代码：

在 PHP:

<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?>

我们检查“Accept-encoding”头并返回文件的 gzip 压缩版本（否则返回普通版本）。这几乎就像构建自己的 Web 服务器（真有趣！）。但实际上，如果可能的话，尽量使用 Apache 压缩输出。你不希望随便改动文件。

验证你的压缩(Compression)

配置服务器后，检查以确保你确实在提供压缩内容。

在线: 使用在线gzip测试来检查你的页面是否已压缩。
在你的浏览器中: 在Chrome中，打开开发者工具 > 网络标签（Firefox/IE类似）。刷新页面，点击页面本身的网络行（即 www.google.com）。头信息“Content-encoding: gzip”表示内容已压缩发送。

chrome gzip header

点击“使用大行”图标以获取更多详情，包括压缩后的传输大小和真实内容大小。

content size

准备好惊叹于结果吧。 InstaCalc主页从36k缩小到10k，减少了75%的大小。

尝试一些示例

我已经设置了一些页面和可下载示例:

index.html – 无显式压缩（在这个服务器上，我默认使用压缩）。
index.htm – 使用 Apache .htaccess 以 *.htm 为规则显式压缩
index.php – 使用以下方式显式压缩： PHP 头信息

欢迎下载这些文件，放到你的服务器上并调整设置。

注意事项

虽然看起来令人兴奋，但 HTTP 压缩并非全是乐趣和游戏。需要注意以下几点：

旧版浏览器：是的，有些浏览器可能仍然无法正确处理压缩内容（它们声称可以接受，但实际上不行）。如果你的网站必须与Windows 95上的Netscape 1.0完美兼容，那么你可能不应该使用 HTTP 压缩。Apache mod_deflate 有一些规则可以避免对旧浏览器进行压缩。
已压缩的内容：大多数图片、音乐和视频已经压缩过了。不要浪费时间再次压缩它们。实际上，你可能只需要压缩“三大件”（HTML、 CSS 和Javascript）。
CPU-load：实时压缩内容会消耗 CPU 时间并节省带宽。考虑到压缩的速度，这通常是一个很好的权衡。有一些方法可以预压缩静态内容并发送压缩版本。这需要更多配置；即使不可能，压缩输出可能仍然是一个净收益。考虑到网络上用户注意力短暂，使用 CPU 周期来获得更快的用户体验是非常值得的。

启用压缩是提高网站性能最快的方法之一。去设置吧，让你的用户享受好处。