闪电加载：博客性能优化全攻略

草帽lufei

发布于 2024-06-06 15:48:39

45900

代码可运行

文章被收录于专栏：程序语言交流程序语言交流

运行总次数：0

代码可运行

巴索罗缪·大熊

前言

这些年积累了很多前端性能优化的知识点和思路，日常工作很少涉及技术层极限优化，近期终于一点点把博客独立搭建并部署了，对之前的一些技术点进行了深度探索，最终结果也达到了预期效果，由于水平有限，写的不好的地方，敬请谅解

服务端优化

Nginx 添加压缩模块设置

gzip

Nginx 的 gzip 模块用于对 HTTP 响应进行 gzip 压缩，以减少传输数据量，提高页面加载速度，表示为 Content-Encoding 参数值为 gzip

使用

在 server 中添加 gzip 模块设置，如下示例中的内容，直接整个复制就能使用

    server {
        listen       443 ssl;
        server_name  yiwuan.xyz;

        ...

        # gzip
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_proxied any;
        gzip_vary on;
    }

参数详解

gzip on; 启用 gzip 压缩

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; 指定要压缩的 MIME 类型

gzip_proxied any; 启用对代理请求的响应进行压缩

gzip_vary on; 在响应头中添加 "Vary: Accept-Encoding"，以便客户端和代理服务器能够缓存不同的压缩版本

gzip 模块的其他参数可以根据需要进行配置，以优化 Nginx 的 gzip 压缩功能

测试结果

添加 gzip 后的 完成 参数需要 3.03 秒

执行 5 次取平均值，最终结果为 3.02 秒

Brotli

Brotli 是一种现代的压缩算法，通常比 gzip 提供更高的压缩率，表示为 Content-Encoding 参数值为 br

Brotli 需要单独手动安装，下面是操作步骤

安装必要依赖

sudo yum install -y epel-release
sudo yum install -y brotli brotli-devel gcc make pcre-devel zlib-devel openssl-devel git

下载 Nginx 源码和 Brotli 模块

wget http://nginx.org/download/nginx-<version>.tar.gz
tar -zxvf nginx-<version>.tar.gz
cd nginx-<version>

git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
git submodule update --init
cd ..

注意 <version> 最好是跟本机安装的 nginx 版本保持一致，执行 nginx -v 查询版本号，然后替换 <version> 后执行上面命令

编译 Brotli 动态模块

./configure --with-compat --add-dynamic-module=./ngx_brotli
make modules

将编译好的模块复制到 Nginx 模块目录

sudo cp objs/ngx_http_brotli_filter_module.so /etc/nginx/modules/
sudo cp objs/ngx_http_brotli_static_module.so /etc/nginx/modules/

在 nginx.conf 文件中配置 Brotli 模块

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    brotli on;
    brotli_comp_level 11;
    brotli_buffers 16 8k;
    brotli_min_length 20;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    brotli_static on;
    # brotli_vary on;
}

注意！ brotli_vary on; 这个参数是老版才有的参数，我查看了Github上的最新版文档，在新版官方似乎把这个参数去掉了我在服务器上测试发现，如果安装的最新版模块，添加这个 brotli_vary on; 参数会报错，可能网上有些教程中有这个参数，遇到报错把这个参数去掉试试看

重启 Nginx

systemctl restart nginx

验证模块加载

在浏览器 开发者工具 中测试响应头 Content-EnCoding 值也已变成 br, 并且整体资源加载速度明显提升则说明这个模块正确安装并加载了

参数详解

brotli on; 启用 Brotli 压缩

brotli_comp_level 11; Brotli 压缩级别，范围 1-11，数字越大压缩率越高，但CPU使用率也越高

brotli_buffers 16 8k; 设置 Brotli 压缩缓冲区的数量和大小

brotli_min_length 20; 设置允许压缩的页面最小长度，单位是字节。通常设置较小的值以确保小文件也能被压缩

brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript 指定要压缩的 MIME 类型

brotli_static on; 启动对预压缩文件的支持

测试结果

注意! load_module 加载配置必须要在 Nginx 配置文件的最顶层使用，否则会出现 load_module 指令过晚的错误

load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

开启 brotli 和 gzip 压缩两种配置，执行 5 次取平均值，最终结果为 3.09 秒

3.92
3.11
2.95
2.63
2.84

只开启 brotli 压缩一种配置，执行 5 次取平均值，最终结果为 3.15 秒

使用 brotli 和 gzip 压缩，以及两种压缩方式混用的方式，这三种情况结果似乎差距不大，可能和目前博客项目的资源体积不大也有关系

开启HTTP3

安装必要依赖

sudo yum install -y gcc gcc-c++ make zlib-devel pcre-devel openssl-devel

下载源码并编译

下载Nginx源代码

wget http://nginx.org/download/nginx-1.26.0.tar.gz
tar -zxvf nginx-1.26.0.tar.gz
cd nginx-1.26.0

下载quiche，下面命令是在 nginx-1.26.0 目录下执行的

quiche库是 Nginx 支持 HTTP/3 所需的库

git clone --recursive https://github.com/cloudflare/quiche

编译 Nginx

./configure --with-http_v3_module --with-cc-opt='-I../quiche/deps/boringssl/include' --with-ld-opt='-L../quiche/deps/boringssl/build/ssl -L../quiche/deps/boringssl/build/crypto' --with-http_ssl_module --with-http_v2_module --with-http_v3_module
make
sudo make install