1737972071 brotli pagespeed cover

本文写于 2021 年 2 月,是本人旧博客上的内容,内容可能已经过时,部分内容有更改和补充

前言

本篇教程将讲述如何在宝塔面板下,编译并配置 Brotli 和 Pagespeed 模块来提高 Nginx 网站速度。Brotli 和 PageSpeed 分别是 Google 开发的文本压缩算法和网页加速服务,对于网络条件不好的 VPS,访问速度可能会有明显改善。

Brotli 是 Google 开发的文本压缩算法,用于压缩网页,提高加载速度,比起默认的 gzip 算法可能会有高达 37% 的提升。Brotli 压缩只能在 https中生效。

PageSpeed 是 Google 推出的一项网页加速服务,分别有 Apache PageSpeed 和 ngx_pagespeed 两个模块,分别适用于 Apache 和 Nginx 服务器。主要是通过改写 HTML、CSS、JS 文件源码以及图片、SSL 等达到加速网站的效果。但它会增加主机的 CPU 占用,请根据实际需要,自行决定是否使用。

所有操作均使用root账户完成。

源代码下载

# Brotli 源代码
git clone https://github.com/google/ngx_brotli  # 下载源代码
cd ngx_brotli
git submodule update --init  # 建立当前项目与子模块之间的依赖关系
# Pagespeed 源代码
cd ~
bash <(curl -f -L -sS https://ngxpagespeed.com/install)

用这条命令可以直接下载 Pagespeed 源代码并部署好编译环境,出现第一个需要你按回车的时候按 CTRL+C 终止程序。

编译并安装

准备

cd /www/server/panel/install
rm nginx.sh
wget http://download.bt.cn/install/0/nginx.sh  # 下载新脚本并替换旧脚本
mv ~/incubator-pagespeed-ngx-latest-stable /usr/src/  # 移动源代码位置
mv ~/ngx_brotli /usr/src/  # 移动源代码位置

在脚本上添加编译命令

在宝塔面板上打开 /www/server/panel/install/nginx.sh 这个文件,在大概 254 行的位置添加 --add-module=/usr/src/incubator-pagespeed-ngx-latest-stable 和 --add-module=/usr/src/ngx_brotli,然后保存,如图。

修改宝塔 Nginx 编译选项
修改宝塔 Nginx 编译选项

编译 Nginx

如果你未安装Nginx,请使用以下命令来安装Nginx。

bash /www/server/panel/install/nginx.sh install <版本号> # <版本号> 比如 1.18

如果你已安装Nginx,请使用以下命令来更新Nginx。

bash /www/server/panel/install/nginx.sh update <版本号>

随后,你可以使用 nginx -V 检验是否安装成功,如图。

检查 Nginx 模块
检查 Nginx 模块

配置

配置 Brotli

在宝塔面板的「网站」「设置」中,打开网站的配置文件,在 server 块中添加以下代码(来自朱培彬),缩进可忽略,如图。

# 覆盖默认gzip设置
gzip on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 1;
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;
gzip_vary on;
gzip_proxied any;
gzip_disable "MSIE [1-6]\.";

# brotli 配置开始
brotli on;
brotli_comp_level 6;  # 压缩等级,默认6,最高11,太高的压缩水平可能需要更多的 CPU
brotli_buffers 16 8k;  # 请求缓冲区的数量和大小
brotli_min_length 100;  # 指定压缩数据的最小长度,只有大于或等于最小长度才会对其压缩。这里指定100字节
brotli_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml text/html application/json image/svg application/font-woff application/vnd.ms-fontobject application/vnd.apple.mpegurl image/x-icon image/jpeg image/gif image/png image/bmp;  # 指定允许进行压缩类型
brotli_static always;  # 是否允许查找预处理好的、以.br结尾的压缩文件,可选值为on、off、always
brotli_window 512k;  # 窗口值,默认值为512k
proxy_set_header Accept-Encoding "";
# brotli 配置结束
宝塔面板配置 Brotli
宝塔面板配置 Brotli

验证:在你的网站主页上,右键「检查」,在「网络」选项卡中,按 Ctrl+R 重载网页,刷新完毕后,往上翻到第一项,一般是你网站的域名,点击,在右侧「响应标头」一栏看见 content-encoding 中有一项是 br 则成功(只有 HTTPS 站点有效),如图。

检查 Brotli 是否工作
检查 Brotli 是否工作

配置 Pagespeed

创建服务器缓存目录。

mkdir /tmp/ngx_pagespeed_cache/

打开 Nginx 配置文件(宝塔默认是 /www/server/nginx/conf/nginx.conf),在 http 代码块部分插入以下代码(配置大部分来自挖站否),如图(缩进可忽略)。

# 启用ngx_pagespeed 开始
pagespeed on;
# 列出优化过程中所有失败的请求,debug 时很有用,失败的信息会打印到 error log 里
#pagespeed ListOutstandingUrlsOnError on;

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
# 路径请提前创建好,可以放在内存也可以放在临时文件夹中
pagespeed CreateSharedMemoryMetadataCache /tmp/ngx_pagespeed_cache 51200;
pagespeed DefaultSharedMemoryCacheKB 51200;
pagespeed FileCachePath /tmp/ngx_pagespeed_cache;
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;

# 过滤器级别(自定义模式)
pagespeed RewriteLevel PassThrough;
# 一个标识而已(若在浏览器开发者工具里的链接请求响应标头看到此标识,则说明 PageSpeed 生效)
pagespeed XHeaderValue "Powered By Google PageSpeed";
# HTML页面链接转小写(SEO 优化,推荐)
pagespeed LowercaseHtmlNames on;
# 重置 HTTP Vary 头 除非有特殊需求,建议不开启,默认配置往往是最佳配置
# pagespeed RespectVary on;
# PageSpeed能够根据响应头中指定的任何内容安全策略调整其优化
pagespeed HonorCsp on;
# PageSpeed 默认遵守 Cache-Control: no-transform 协议, 表示不可被中间代理软件改写,如果想让优化效果最大化,可以关闭
# pagespeed DisableRewriteOnNoTransform off;

# 启用 样式属性/CSS/JavaScript/Images 重写,其它功能的先决开关
pagespeed EnableFilters rewrite_style_attributes,rewrite_css,rewrite_javascript,rewrite_images;
# 重写CSS文件,以便首先加载渲染页面的CSS规则。
pagespeed EnableFilters prioritize_critical_css;

###########缓存 ##########
# 相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;
# 开启使用Redis(和memcached只能先其一)
# pagespeed RedisServer "127.0.0.1:6379";
# memcached优化,如果没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "127.0.0.1:11211";

######## 过滤规则 ########

# 过滤不需要启用的目录或文件
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
pagespeed Disallow "*/admin/*";
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace; 
# 预解析DNS查询
pagespeed EnableFilters insert_dns_prefetch;

########JS和CSS########
# 启用JavaScript库卸载 #谷歌被QQ,并不确定这个设置有没有副作用 
# pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多个CSS文件合并成一个CSS文件(比较容易引起主题版面混乱,所以我禁用了
# pagespeed EnableFilters combine_css;
# 重写CSS,首先加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;
# 把多个JavaScript文件合并成一个JavaScript文件,禁用原因同上,大家可以酌情开启
# pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 更换被导入文件的@import,精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 启用JavaScript缩小机制
pagespeed EnableFilters rewrite_javascript;

pagespeed SupportNoScriptEnabled false;

####### 图片########
# 延时加载图片
pagespeed EnableFilters lazyload_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://wzfou.cdn.bcebos.com/1.gif";
# 启用图片优化机制(主要是 inline_images, recompress_images, convert_to_webp_lossless(这个命令会把PNG和静态Gif图片转化为webp), and resize_images.)
pagespeed EnableFilters rewrite_images;
# 组合 convert_gif_to_png, convert_jpeg_to_progressive, convert_jpeg_to_webp, convert_png_to_jpeg, jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, #strip_image_color_profile, and strip_image_meta_data.
pagespeed EnableFilters recompress_images;
# 将JPEG图片转化为webp格式
pagespeed EnableFilters convert_jpeg_to_webp;
# 将动画Gif图片转化为动画webp格式
pagespeed EnableFilters convert_to_webp_animated;

pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;

# 让JS里引用的图片也加入优化
pagespeed InPlaceResourceOptimization on;   
pagespeed EnableFilters in_place_optimize_for_browser;
# 启用ngx_pagespeed 结束
添加 Pagespeed 配置
添加 Pagespeed 配置

然后打开网站配置文件,添加下列代码,如图。

# 启用ngx_pagespeed 开始
# 确保对pagespeed优化资源的请求进入pagespeed处理程序并且没有额外的头部信息
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_global_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
location /pagespeed_console { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }
# 启用ngx_pagespeed 结束
1737971812 edit website config
修改网站配置

都配置并保存后,执行 systemctl restart nginx 来重启 Nginx。

验证:在你的网站主页上,右键「检查」,在「网络」选项卡中,按 Ctrl+R 重载网页,刷新完毕后,往上翻到第一项,一般是你网站的域名,点击,在右侧「响应标头」一栏看见 x-page-speed: Powered By Google PageSpeed 则成功,如图。

1737971856 check pagespeed working
检查 Pagespeed 是否工作

参考资料

欢迎到我主页看更多内容。

最后修改日期: 2025-01-27

作者

留言

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。