WordPress交流

如何启用文本压缩来加速网站

—

目录

在 WordPress 上启用文本压缩是保持网站快速加载的最佳性能技术之一。当您在 Google PageSpeed Insights 上运行速度测试时，您可能会看到“启用文本压缩”是 Lighthouse 的建议之一：

Opportunities-section-Lighthouse-report-listing-all-textbased
机会部分 Lighthouse 报告列出了所有未压缩的基于文本的资源 

在本文中，我们将解释数据压缩的工作原理、如何在 WordPress 网站上激活它以及如何检查它是否已启用。

什么是数据压缩

数据压缩是在将文件发送到浏览器之前使用 LZ77 和 Huffman 编码算法减小文件大小的过程。有几种压缩方法，例如 GZIP 或 Brotli，它们在每天向用户显示数十亿个页面方面发挥着关键作用。

How-data-compression-works
带有 GZIP 压缩的文件

举个例子，这就是压缩过程前后压缩的 HTML 文件的样子：

压缩前：329 个字符

<html>
<head>
    <style>
    /* my-banner for desktop only */
    .my-banner { font-size: 150% }
    .my-banner { width: 75% }
</style>
</head>
<body>
    <!-- my banner START -->
    <div>...</div>
    <!-- my banner END -->
    <script>
    my Scripts(); // just some scripts used on the web page
    </script>
</body>
</html>

使用 GZIP 压缩：142 个字符

<html><head><style>.my-banner{font-size:160%;width:65%}</style></head><body><div>...</div><script>myScripts();</script></body></html>

我们来看看 Lighthouse 认可的 2 种压缩算法，即：

  1. GZIP 压缩
  2. Brotli 压缩

什么是 GZIP 压缩？

GZIP 是一种开源压缩算法，可查找并删除文本文件中的重复字符。它的目标是在服务器端压缩网页并在浏览器中解压缩它们。目标是减小网站的文件大小（HTML、JS 和 CSS）以获得更快的代码。

根据 W3Techs.com 的数据，互联网上 88.2% 的网站使用压缩，52.7% 的网站使用 GZIP。

GZIP-compression-on-the-internet-July-2022
互联网上的 GZIP 压缩（2022 年 7 月）

什么是 Brotli 压缩？

与 GZIP 类似，Brotli 是 Google 开发的一种压缩算法，允许对网页进行文本压缩。Brotli 从一开始就被设计为动态压缩流。总体而言，Brotli 在压缩服务器上的内容并在浏览器中解压缩内容的速度比在 GZIP 中更快。

GZIP 压缩的工作原理

Internet 上的每个网页都遵循相同的过程进行数据压缩。在 LZ77 和 Huffman 编码的帮助下，整个技术可以分为 5 个关键步骤：

  1. 当服务器收到对 Web 页的请求时，它会检查请求的标头以确定浏览器是否支持 GZIP。
  2. 如果是这样，服务器将生成网页的标记，然后应用 GZIP。
  3. GZIP 将标记转换为压缩数据流，然后将其传输到浏览器。
  4. 当浏览器收到流时，它会解压缩流并将其显示给用户。
  5. 如果浏览器不支持 GZIP 怎么办？Web 服务器提供未压缩的数据流。
How-data-compression-works
数据压缩的工作原理

为了进一步解释，让我们了解 LZ77 和 Huffman 编码的工作原理。

首先，GZIP 压缩运行 LZ77 算法以删除一小部分原始数据中的冗余：

GZIP-compression-running-the-LZ77-algorithm
运行 LZ77 算法的 GZIP 压缩

然后，GZIP 压缩器使用 Huffman 编码算法进一步压缩它。出现频率越高的字符获得的位数最少，而出现次数越多的字符获得的位数最高：

GZIP-compression-running-the-HUFFMAN-encoding
运行 HUFFMAN 编码的 GZIP 压缩

最后，如果你想看一个真实的例子，下面以 “Bookkeeper” 这个词做了一个有趣的解释。

它有 10 个字符，但只有 6 个唯一的字符（2 个“o”、3 个“e”等）。

Bookkeeper-80-bits-word-encoded-as-a-25-bits-string
“Bookkeeper”中的重复字符

霍夫曼编码算法通过生成一个以每个唯一字母为叶子的二叉树来无损压缩整个文本字符串。它根据字符的频率为每个字符提供二进制代码：

Huffman-algorithm-gives-unique-binary-codes-for-every-character
霍夫曼算法为每个字符提供唯一的二进制代码 

结果：GZIP 为我们节省了近 70% 的内存。多亏了霍夫曼转换，它从 80 位变成了 25 位。

Duplicate-characters-in-bookkeeper
Bookkeeper：由于霍夫曼算法，80 位字编码为 25 位字符串 

数据压缩对性能有何影响

数据压缩对 WordPress 网站的性能有积极影响。启用文本压缩后，您可以向用户提供较小的基于文本的资源。文件越小意味着文件下载速度越快。因此，访问者会很高兴，因为他们不必等待查看您页面上的内容。

一项关于 Web.Dev 的研究显示了 GZIP 压缩如何影响最流行的 JavaScript 和 CSS 框架。结果令人印象深刻：GZIP 压缩可以节省 65-88% 的成本。

GZIP-compression-savings
节省 GZIP 压缩

GZIP 压缩对 FID、LCP 和 FCP 的性能影响

数据压缩还会影响一些 Core Web Vitals，这是 Google 开发的三个关键指标，用于衡量网页的性能和整体用户体验。其中，我们有最大的内容绘制 （LCP）、第一次输入延迟 （FID） 和累积布局偏移 （CLS）。另一个值得一提的性能指标是 First Contentful Paint （FCP）。在下一段中，您将理解原因。

首先，让我们了解这些性能指标的用途。

LCP 测量加载主要元素所需的时间，FCP 是任何内容的首次出现，而 FID 则涉及浏览器对用户操作的响应。

现在，您可能想知道这三个指标与 GZIP 压缩之间的相关性是什么。嗯，这些指标衡量数据何时可供用户使用。因此，如果您压缩这些数据，您将获得更轻量级的文件，用户可以更快地使用这些文件。 事实上，GZIP 压缩通过向浏览器提供较小的文件来提高您的 FID、FCP 和 LCP 分数。因此，当您使用压缩时，指标更有可能处于各自的绿色阈值中。

数据压缩对 Lighthouse 性能分数的影响

GZIP 压缩算法可以将资源大小减少高达 90%！因此，您将减少高达 50% 的页面加载时间，并通过 PageSpeed Insights 的特定审核。

如何检查 GZIP 压缩是否已启用并正常工作

在您的网站上启用 GZIP 之前，最好检查它是否已打开。有多种方法可以检查您的主机是否支持 GZIP 压缩。我们将介绍其中的四个。

  1. 速度测试（PSI、GTmetrix 等）
  2. 在线 GZIP 压缩工具
  3. 检查开发者工具中的 “content-encoding： gzip” 响应头
  4. 创建 phpinfo 文件

下面是详细介绍：

1. Lighthouse 的速度测试（PSI、GTmetrix 等）

要检查 GZIP 压缩是否已启用并正常工作，您可以使用 PageSpeed Insights 或 GTmetrix 等性能工具。在其审核部分中，如果某些基于文本的内容未压缩，则会触发审核。

2. 在线 GZIP 压缩工具

检查你的网站是否启用了 GZIP 的最简单方法是前往 Giftofspeed 或 HTTP 压缩测试并扫描你的网站。这两个工具都会检查您的 Web 服务器是否将 GZIP HTTP 标头发送到访问者的浏览器。

只需输入 URL 并单击“测试 URL”按钮即可启动验证。在我们的示例中，启用了 Brotli，并且我们 79% 的数据被压缩。

Checking-data-compression-on-my-website
在我的网站上检查数据压缩

3. 检查开发者工具中的 “content-encoding： gzip” 响应头

检查网站是否提供 GZIP 压缩内容的第三种方法是验证来自开发工具的 content-encoding： gzip HTTP 响应标头。

要进行验证，请打开您的开发工具并前往“网络”部分。转到 “Response Headers” 部分。如果您在内容编码行中看到 “GZIP” 或 “Brotli”，则基于文本的内容已被压缩。

Checking-if-GZIP-or-Brotli-is-activated
检查是否激活了 GZIP 或 Brotli – 来源： Chrome Dev Tools

4. 创建一个 phpinfo 文件

如果您对站点的 PHP 设置感到满意，则可能需要创建一个 phpinfo 页面来激活数据压缩。

A-new-phpinfo-file-was-created
创建了一个新的 phpinfo 文件

为此，您只需为您的网站创建一个新页面。以下是通过 cPanel 执行此操作的方法：

  1. 登录到您网站的 cPanel 并打开文件管理器（来自您的托管服务提供商）
  2. 导航到您正在使用的目录，即您站点的根文件夹，该文件夹应为 public_html。
  3. 创建一个新文件并将其命名为 phpinfo.php
  4. 打开文件并输入以下代码：
    <?php
    phpinfo();
    ?>
  5. 保存更改
  6. 在浏览器中打开一个新选项卡。如果您在站点的根文件夹（即 public_html）中创建了该文件，请转到 yoursite.com/phpinfo.php 查看您的新 phpinfo 页面
  7. 向下滚动页面并查找 mod_gzip 或 mod_deflate 模块。如果它们已列出并启用，则 GZIP 压缩应该可用。

如何在 WordPress 上启用数据压缩（手动）

在 WordPress 上启用文本压缩意味着在基于文本的数据上激活 GZIP 或 Brotli 算法以创建更小的文件并提高性能。

如果您尚未启用 GZIP 压缩，您可以遵循多种技术，例如询问您的主机、设置 CDN 或在您用于托管网站的 Web 服务器上手动执行此操作。

1. 询问您的托管服务提供商

在您的网站上启用 Brotli 或 GZIP 压缩的最直接方法之一是确保您的主机在选择它之前默认执行此操作。例如，Siteground 默认在其所有网站上启用 GZIP 压缩。

2. 设置 CDN

通过使用像 RocketCDN 这样的 CDN，您将自动在所有数据上激活 GZIP 压缩。RocketCDN 在 StackPath 网络上运行。因此，默认情况下，所有 StackPath CDN 站点都启用了 GZIP 压缩。CDN 会自动压缩 JS、HTML、CSS 和文本文件。

以下三种方法取决于您选择托管网站的 Web 服务器。

3. 在 Apache 上启用 GZIP 压缩

要在 Apache 服务器上启用 GZIP 压缩，您需要使用其 “mod_filter” 和 “mod_deflate modules” 并配置它们。要指导 Apache 在将数据发送到浏览器之前对其进行压缩，您可以使用 “directives”。

根据您的访问级别，有两个选项可以编辑 Apache 的服务器配置：

情况 A：可以访问主服务器配置文件（通常称为 httpd.conf）。伟大！您可以使用它来配置 Apache。

情况 B：无法访问 httpd.conf。在这种情况下，您需要使用 .htaccess 文件配置 Apache。

在大多数情况下，您只能访问 .htaccess 文件，因此我们的教程将是

对于情况 B（通过 .htaccess 文件激活 GZIP）。确保在 .htaccess 文件中已有的任何其他指令之后添加上述代码。

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent </IfModule>

4. 在 Apache 上启用 Brotli 压缩 （brotli_module）

请按照以下步骤在 Apache 上启用 Brotli 压缩：

第 1 步 – 在您的系统上安装 Brotli 软件包

对于 Ubuntu 和 Debian 系统，它在默认存储库中可用。打开终端并键入以下代码：

$sudo apt install brotli -y

第 2 步 – 启用 brotli 模块

Apache 服务器包含 Brotli 模块 default。您可以使用以下命令在 Apache 中启用 brotli 模块：

sudo a2enmod brotli

第 3 步 – 配置 Apache 虚拟主机以启用压缩

只需在虚拟主机配置文件中添加以下代码即可：

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

重要提示：保存配置文件，将其关闭并重新加载 Apache 服务以应用更改。

保存配置文件并将其关闭。然后重新加载 Apache 服务以应用更改：

sudo systemctl restart apache2

就是这样！现在应该在 Apache 服务器中启用 Brotli 压缩。

5. 在 NGINX 上启用 GZIP 压缩

如果您的网站托管在 NGINX 服务器上，则启用 GZIP 压缩相当容易。

  • 打开 nginx.conf 文件。通常，您可以在服务器的 /etc/nginx/nginx.conf 位置找到此文件。
  • 添加以下指令：
gzip on;
  • 使用以下终端命令保存 nginx.conf 文件后重新加载 Nginx：sudo service nginx reload

有关如何在 NGINX 上配置压缩和解压缩的更多信息，请查看 NGINX 网站上的这个方便的指南。你也可以前往 Nginx 官方文档 获取所有 ngx_http_gzip_module 指令的列表。

6. 在 NGINX 上启用 Brotli 压缩 （ngx_brotli）

要在 NGINX 上启用 Brotli 压缩，您需要两个模块：

  • ngx_brotli filter module – 用于即时压缩响应
  • ngx_brotli static module – 用于提供预压缩文件

第 1 步：安装 nginx-plus-module-brotli 模块

对于 Amazon Linux 2 LTS、CentOS、Oracle Linux 和 RHEL：

$ yum install nginx-plus-module-brotli

对于 Debian 和 Ubuntu：

$ apt-get install nginx-plus-module-brotli

对于 SLES 15：

$ zypper install nginx-plus-module-brotli

步骤 2：配置

现在，您可以在 NGINX Plus 配置文件 nginx.conf 中配置 Brotli 模块。

  1. 使用顶级 （“main”） 上下文中指定的 load_module 指令启用 Brotli 模块的动态加载：
load_module modules/ngx_http_brotli_filter_module.so; # for compressing responses on-the-fly
load_module modules/ngx_http_brotli_static_module.so; # for serving pre-compressed files
 
http {
    #...
}

2. 启用 Brotli 压缩并根据 ngx_brotli 模块的要求执行其他配置。可以在 http、server 或 location 级别配置 Brotli 压缩：

http {
    server {
        brotli on;
        #...
    }
}

3. 测试配置并重新加载 NGINX Plus 以启用该模块：

$ nginx -t && nginx -s reload

就是这样！您可以在 NGINX 官方文档中找到更详细的步骤。

7. 在 IIS Web 服务器上启用 GZIP 或 Brotli 压缩

请注意，Microsoft 创建的 IIS Web 服务器与 WordPress 并不完全兼容，因此很少找到任何使用此技术的 WordPress 网站。但是，如果您使用的是此设置，请参阅 Microsoft 官方文档。

如何在 WordPress 上启用数据压缩（使用插件）

如果您不太习惯打开配置文件并运行一些命令，或者您只是想节省时间，那么您可以使用 WordPress 插件在您的 WordPress 网站上启用数据压缩。

大多数缓存和性能 WordPress 插件都带有 GZIP 压缩功能。他们可以开箱即用地激活它，或者直接在缓存设置面板中包含一个选项。

评论

发表回复

必填项已用 * 标注