了解如何使用 Nginx 和 Gzip 模块加速网站

即使在全球范围内互联网速度都很高的时代，我们也会张开双臂欢迎为优化网站加载时间所做的一切努力。

在本文中，我们将讨论一种通过压缩减小文件大小来提高传输速度的方法。这种方法带来了额外的好处，因为它还减少了该过程中使用的带宽量，并使支付费用的网站所有者更便宜。

为了实现上段所述的目标，我们将在本文中使用 Nginx 及其内置的 gzip 模块。正如官方文档所述，该模块是一个过滤器，使用众所周知的 gzip 压缩方法来压缩响应。这确保了传输数据的大小将被压缩一半甚至更多。

建议阅读： 保护、强化和提升 Nginx 网站性能的终极指南

当您读到这篇文章的底部时，您将有另一个理由考虑使用 Nginx 来为您的网站和应用程序提供服务。

安装 Nginx Web 服务器

Nginx 适用于所有主要的现代发行版。尽管我们将在本文中使用 CentOS 7 虚拟机 (IP 192.168.0.29)。

下面提供的说明也适用于其他发行版中的少量（如果有）修改。假设您的VM是全新安装的；否则，您必须确保您的计算机上没有运行任何其他 Web 服务器（例如 Apache）。

要安装 Nginx 及其所需的依赖项，请使用以下命令：


----------- On CentOS/RHEL 7 and Fedora 22-24 ----------- 
yum update && yum install nginx

----------- On Debian and Ubuntu Distributions ----------- 
apt update && apt install nginx

要验证安装是否已成功完成并且 Nginx 可以提供文件，请启动 Web 服务器：


systemctl start nginx
systemctl enable nginx

然后打开网络浏览器并转到 http://192.168.0.29（不要忘记将 192.168.0.29 替换为服务器的 IP 地址或主机名）。您应该看到欢迎页面：

我们必须记住，某些文件类型可以比其他文件类型更好地压缩。纯文本文件（例如 HTML、CSS 和 JavaScript 文件）压缩效果非常好，而其他文件（.iso文件、压缩包和图像等）则不需要，因为它们本质上已经被压缩。

因此，可以预期 Nginx 和 gzip 的结合将允许我们提高前者的传输速度，而后者可能几乎没有改善或没有改善全部。

同样重要的是要记住，当启用 gzip 模块时，HTML 文件始终被压缩，但其他文件类型常见于网站和应用程序（即 CSS 和 JavaScript）则不然。

在没有 gzip 模块的情况下测试 Nginx 网站速度

首先，让我们下载一个完整的 Bootstrap 模板，它是 HTML、CSS 和 JavaScript 文件的完美组合。

下载压缩文件后，我们将其解压到服务器块的根目录（请记住，这是 Nginx 相当于 Apache 虚拟主机声明中的 DocumentRoot 指令）：


cd /var/www/html
wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip
unzip -a gh-pages.zip
mv startbootstrap-creative-gh-pages tecmint

您应该在 /var/www/html/howtoing 中有以下目录结构：


ls -l /var/www/html/tecmint

现在转到 http://192.168.0.29/howtoing 并确保页面正确加载。大多数现代浏览器都包含一组开发人员工具。在 Firefox 中，您可以通过工具 → Web 开发人员 菜单打开它。

我们对“网络”子菜单特别感兴趣，它使我们能够监视计算机与本地网络和互联网之间发生的所有网络请求。

建议阅读： 安装 Mod_Pagespeed 将 Nginx 性能提升至 10 倍

在开发者工具中打开网络菜单的快捷方式是Ctrl + Shift + Q。按该组合键或使用菜单栏将其打开。

由于我们有兴趣检查 HTML、CSS 和 JavaScript 文件的传输，因此单击底部的按钮并刷新页面。在主屏幕中，您将看到所有 HTML、CSS 和 JavaScript 文件传输的详细信息：

在大小列（显示各个文件大小）的右侧，您将看到各个传输时间。您还可以双击任何给定文件，在 Timings 选项卡中查看更多详细信息。

请务必记下上图中显示的时间，以便在我们启用 gzip 模块后，您可以将它们与相同的传输进行比较。

在 Nginx 中启用和配置 gzip 模块

要启用和配置 gzip 模块，请打开 /etc/nginx/nginx.conf，找到主服务器块，如下图所示，然后添加或修改以下内容行（不要忘记末尾的分号，否则 Nginx 稍后重新启动时将返回错误消息！）


root     	/var/www/html;
gzip on;
gzip_types text/plain image/jpeg image/png text/css text/javascript;

gzip 指令用于打开或关闭 gzip 模块，而 gzip_types 用于列出该模块应处理的所有 MIME 类型。

要了解有关 MIME 类型的更多信息并查看可用类型，请转到 Basics_of_HTTP_MIME_types。

使用 Gzip 压缩模块测试 Nginx 网站速度

完成上述步骤后，让我们重新启动 Nginx 并按 Ctrl + F5 重新加载页面（同样，这适用于 Firefox，因此如果您使用不同的浏览器，请首先查阅相应的文档）以覆盖缓存，然后让我们观察传输时间：


systemctl restart nginx

网络请求选项卡显示了一些重大改进。比较一下时间，亲自看看，请记住，这是我们的计算机和 192.168.0.29 之间的传输（Google 服务器和 CDN 之间的传输超出了我们的控制范围）：

例如，让我们考虑启用 gzip 之前/之后的以下文件传输示例。计时以毫秒为单位：

index.html（由列表顶部的 /howtoing/ 表示）：15/4
Creative.min.css：18/8
jquery.min.js：17/7

这难道不会让你更加喜爱Nginx吗？就我而言，确实如此！

建议阅读： 提升 Apache Web 服务器性能的 5 个技巧

概括

在本文中，我们演示了可以使用 Nginx gzip 模块来加速文件传输。 gzip 模块的官方文档列出了您可能需要查看的其他配置指令。

此外，Mozilla 开发者网络网站上有一个关于网络监视器的条目，解释了如何使用此工具来了解网络请求幕后发生的情况。

与往常一样，如果您对本文有任何疑问，请随时使用下面的评论表。我们始终期待您的来信！