如何提高Chrome Lighthouse Performance分数 (1)Node.js 中间件启用gzip 启用文

Node.js 中间件启用gzip

启用文本压缩

基于文本的资源应该通过压缩(gzip、deflate或brotli)来提供，以最小化总网络字节。

lighthouse提示：

Enable text compression Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes. [Learn more about text compression] FCP LCP

解决方案：

在 Node.js 中使用 Express 框架，可以通过 compression 中间件来启用 Gzip 压缩，以减少传输的数据量，从而提高 Web 应用的性能。以下是具体步骤：

1. 安装 `compression` 中间件

首先，需要安装 compression 中间件：

npm

npm install compression --save

yarn

yarn add compression -D

2. 配置 Express 使用 `compression`

在你的 Express 应用中引入并使用 compression 中间件：

const express = require('express');
const compression = require('compression');

const app = express();

// 启用 Gzip 压缩
// 核心点就这一句话
app.use(compression());

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

3. 启用静态资源的 Gzip 压缩

如果你有静态资源文件（如 HTML、CSS、JS 文件等），也可以使用 compression 来对这些文件进行压缩。可以通过 Express 内置的 express.static 中间件来处理静态文件，并结合 compression 进行压缩。

const express = require('express');
const compression = require('compression');
const path = require('path');

const app = express();

// 启用 Gzip 压缩
app.use(compression());

// 提供静态文件服务
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

4. 测试 Gzip 压缩

要验证 Gzip 压缩是否启用，可以使用以下方法：

使用浏览器开发者工具

打开浏览器的开发者工具（通常按 F12 或 Ctrl+Shift+I）。
切换到 "Network" 面板。
加载你的应用程序。
选择一个请求并查看 "Headers" 选项卡，检查 "Content-Encoding" 是否为 gzip。

使用命令行工具

你也可以使用 curl 命令来测试 Gzip 压缩：

curl -H "Accept-Encoding: gzip" -I http://localhost:3000

如果启用了 Gzip 压缩，你应该在响应头中看到 Content-Encoding: gzip。

总结

通过以上步骤，可以在 Node.js 中使用 Express 框架来启用 Gzip 压缩，从而提高 Web 应用的性能。关键步骤包括安装 compression 中间件、配置 Express 使用 compression、并提供静态文件服务。通过浏览器开发者工具或命令行工具可以验证 Gzip 压缩是否启用。

Nginx gzip配置

要在 Nginx 中为文本资源启用 gzip 压缩，并使用全面的最佳配置，请在 nginx.conf 文件的 http 配置块中添加以下内容：

http {
    # 启用gzip压缩
    gzip on;

    # 设置压缩的最小文件大小（单位：字节）
    gzip_min_length 256;

    # 设置gzip压缩的压缩级别，范围是1-9，数字越大压缩比越高，但CPU使用率也越高
    gzip_comp_level 6;

    # 启用对指定的 MIME 类型进行压缩
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/x-javascript
        application/json
        application/xml
        application/xhtml+xml
        application/rss+xml
        application/atom+xml
        image/svg+xml;

    # 启用“gzip_vary”指令，告诉代理服务器缓存的响应根据“Accept-Encoding”头来区分
    gzip_vary on;

    # 告诉Nginx对所有响应启用gzip压缩，即使它们是从代理服务器返回的（如反向代理）
    gzip_proxied any;

    # 启用gzip压缩的缓冲区大小，单位是4k或8k页面大小
    gzip_buffers 16 8k;

    # 对所有 HTTP 版本启用gzip压缩
    gzip_http_version 1.1;

    # 禁用gzip压缩的User-Agent（一些老的User-Agent会有问题）
    gzip_disable "msie6";

    # 添加指定的文件扩展名以进行gzip压缩
    gzip_static on;

    # 最大压缩长度，超过这个长度的内容将不会被压缩（可选）
    gzip_max_length 1048576;

    # 设置响应头告诉浏览器和代理服务器这是gzip压缩后的响应
    add_header Content-Encoding gzip;
}

配置说明

gzip on: 启用 gzip 压缩。
gzip_min_length 256: 设置最小压缩的文件大小，单位是字节。这里设置为 256 字节，意味着小于 256 字节的响应不会被压缩。
gzip_comp_level 6: 设置 gzip 压缩的压缩级别，范围是 1-9，数字越大压缩比越高，但 CPU 使用率也越高。6 是一个平衡性能和压缩率的较好选择。
gzip_types: 指定要压缩的 MIME 类型。这包括常见的文本类型，如 JavaScript、CSS、JSON、XML、SVG 等。
gzip_vary on: 启用 Vary: Accept-Encoding 头，告诉代理服务器缓存的响应根据 Accept-Encoding 头来区分。
gzip_proxied any: 告诉 Nginx 对所有从代理服务器返回的响应启用 gzip 压缩。
gzip_buffers 16 8k: 设置 gzip 压缩的缓冲区大小。
gzip_http_version 1.1: 对 HTTP 1.1 及更高版本启用 gzip 压缩。
gzip_disable "msie6": 禁用对某些老旧浏览器（如 Internet Explorer 6）的 gzip 压缩。
gzip_static on: 启用对预压缩文件（.gz）的支持。
gzip_max_length 1048576: 设置最大压缩长度，超过这个长度的内容将不会被压缩（可选）。
add_header Content-Encoding gzip: 添加响应头，明确告诉浏览器和代理服务器这是 gzip 压缩后的响应。

部署配置

编辑 Nginx 配置文件：打开你的 Nginx 配置文件（通常是 /etc/nginx/nginx.conf）。
添加上述配置：将上述配置添加到 http 配置块中。
测试配置：运行以下命令测试 Nginx 配置文件是否有语法错误：
```
sudo nginx -t
```
重启 Nginx：如果测试通过，重启 Nginx 使配置生效：
```
sudo systemctl restart nginx
```

这样，你的 Nginx 就配置好了 gzip 压缩，可以有效地压缩常见的文本资源，提高网站的加载速度。

浏览器不支持Gzip，怎么办？

Nginx 不会自动降级为不使用 Gzip 压缩。然而，Nginx 会根据客户端的 Accept-Encoding 头决定是否启用 Gzip 压缩。如果客户端不支持 Gzip（即请求头中不包含 Accept-Encoding: gzip），Nginx 将不会对响应进行压缩。

工作原理

当客户端发出请求时，它会在请求头中包含 Accept-Encoding 字段，告知服务器它支持哪些压缩格式。例如：

GET /index.html HTTP/1.1
Host: example.com
Accept-Encoding: gzip, deflate, br

如果客户端支持 Gzip 压缩，它会在 Accept-Encoding 中包含 gzip。Nginx 会检测这个头，并根据配置决定是否进行压缩。如果客户端不支持 Gzip（即 Accept-Encoding 不包含 gzip），Nginx 就不会对响应进行 Gzip 压缩。

配置示例

确保 Nginx 的 Gzip 配置如下：

http {
    gzip on;
    gzip_min_length 256;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/javascript application/x-javascript application/json application/xml application/xhtml+xml application/rss+xml application/atom+xml image/svg+xml;
    gzip_vary on;
    gzip_proxied any;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_disable "msie6";
    gzip_static on;
}

验证配置

你可以使用工具（如 curl）来验证 Nginx 的 Gzip 配置是否生效，并观察 Nginx 对不同 Accept-Encoding 请求头的响应行为。

支持 Gzip 的请求

curl -H "Accept-Encoding: gzip" -I http://your-domain.com

你应该看到 Content-Encoding: gzip 响应头。

不支持 Gzip 的请求

curl -H "Accept-Encoding: identity" -I http://your-domain.com

你应该看到响应头中没有 Content-Encoding: gzip。

结论

Nginx 不会强制对不支持 Gzip 的客户端进行压缩，而是根据客户端的 Accept-Encoding 头来决定是否进行压缩。如果客户端不支持 Gzip，Nginx 将自动发送未压缩的响应，因此无需担心兼容性问题。

哪些浏览器不支持Gzip

大多数现代浏览器都支持 Gzip 压缩，包括以下主流浏览器及其较新的版本：

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera

不支持 Gzip 的浏览器

以下是一些不支持 Gzip 或可能存在问题的浏览器：

老旧的 Internet Explorer 版本：
- Internet Explorer 4 及更早版本
- Internet Explorer 5 和 6 在某些情况下可能会有问题（例如，在特定的 SSL 配置下）。
非常旧的移动浏览器：
- 很早的移动设备浏览器，特别是那些基于 WAP 的浏览器（如早期的 Nokia 浏览器）。
非常旧的嵌入式设备浏览器：
- 一些非常旧的嵌入式设备可能使用不支持 Gzip 压缩的浏览器。

验证 Gzip 支持的方法

你可以通过观察客户端请求的 Accept-Encoding 头来验证它是否支持 Gzip 压缩。支持 Gzip 的浏览器会发送包含 gzip 的 Accept-Encoding 头。例如：

Accept-Encoding: gzip, deflate, br

如果请求头中没有 gzip，则浏览器不支持 Gzip 压缩。

Nginx 配置中的兼容性设置

为了避免对不支持 Gzip 的浏览器启用压缩，你可以在 Nginx 配置中使用 gzip_disable 指令。例如：

http {
    gzip on;
    gzip_min_length 256;
    gzip_comp_level 6;
    gzip_types text/plain text/css text/javascript application/javascript application/x-javascript application/json application/xml application/xhtml+xml application/rss+xml application/atom+xml image/svg+xml;
    gzip_vary on;
    gzip_proxied any;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_disable "msie6";  # 禁用对 IE6 的 gzip 压缩
    gzip_static on;
}

总结

尽管绝大多数现代浏览器都支持 Gzip 压缩，但仍有一些非常旧的浏览器和设备不支持。在配置 Nginx 时，可以使用 gzip_disable 指令来禁用对特定浏览器的压缩，以确保兼容性。

如何提高Chrome Lighthouse Performance分数 (1)