前言

用着小水管服务器,最操心的就是网页加载速度了。

pagespeed简介

PageSpeed是Google推出的一项网页加速服务,分别有Apache PageSpeed和ngx_pagespeed两个模块,适用于Apache和Nginx服务器。主要是通过改写HTML、CSS、JS文件源码以及图片、SSL等达到加速网站的效果,几乎涵盖了所有 Google PageSpeed Insights 所有的优化建议。

Brotli压缩算法简介

github上的原版英文介绍
Brotli is a generic-purpose lossless compression algorithm that compresses data using a combination of a modern variant of the LZ77 algorithm, Huffman coding and 2nd order context modeling, with a compression ratio comparable to the best currently available general-purpose compression methods. It is similar in speed with deflate but offers more dense compression.

说的通俗点:Brotli是Google推出的开源压缩算法,通过变种的LZ77算法、Huffman编码以及二阶文本建模等方式进行数据压缩,与其他压缩算法相比,它有着更高的压缩效率,性能也比我们目前常见的Gzip高17-25%,可以帮我们更高效的压缩网页中的各类文件大小及脚本,从而提高加载速度,提升网页浏览体验。

ngx_pagespeed安装

宝塔最新的版本7.1已经内置ngx_pagespeed编译所需的文件,只需要略微修改下编译的脚本,重新执行下编译nginx的命令即可。
首先打开宝塔的文件管理,打开文件路径:/www/server/panel/install.然后找到nginx.sh文件。
IMG_20200302_173805.jpg
点击编辑,然后找到有./configure内容的这一行,我应该在246行。内容大致是途中这样
IMG_20200302_174052.jpg
--add-module=${Setup_Path}/src/ngx_cache_purge后面加入如下字段:--add-module=${Setup_Path}/src/ngx-pagespeed。此处应该注意添加空格作为间隔,与前后的字段应该有一个空格!
记得保存文件。
之后连接SSH,输入命令:

sh /www/server/panel/install/nginx.sh install 1.17

注意1.17那个是编译的nginx版本,可以先去宝塔软件管理里找到nginx,看看nginx是1.16还是1.17(小的版本号可以忽略,比如1.17.28也是直接按1.17来算)。自己选择nginx版本。
另外编译需要一段时间,大约几分钟,需要保持SSH稳定连接,或者使用screen命令直接后台进行编译,具体可以百度。
编译完成后输入

nginx -V

查看是否有ngx_pagespeed模快,有的话就代表编译成功。
IMG_20200302_181446.jpg

使用pagespeed优化网站

首先在宝塔的站点管理处找到站点,在需要优化的网站站点设置里找到配置文件选项。
IMG_20200302_182449.jpg
添加代码开启pagespeed以及优化参数:

#开启pagespeed
pagespeed on;

# 重置 http Vary 头
pagespeed RespectVary on;

# html字符转小写
pagespeed LowercaseHtmlNames on;

# 压缩带 Cache-Control: no-transform 标记的资源
pagespeed DisableRewriteOnNoTransform off;

# 相对URL
pagespeed PreserveUrlRelativity on;

pagespeed XHeaderValue "Powered By ifking.cn";

# 开启 https
pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件,缓存文件夹如果不存在则需要自行创建,建议放在内存中
pagespeed FileCachePath "/tmp/cache/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;

# 过滤规则
pagespeed RewriteLevel PassThrough;

# 过滤WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/admin/*";
pagespeed Disallow "*/wp-login.php*";

# 移除不必要的url前缀,开启可能会导致某些自动加载功能失效
#pagespeed EnableFilters trim_urls;

# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;

# 移除 html 注释
pagespeed EnableFilters remove_comments;

# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;

# 压缩CSS
pagespeed EnableFilters rewrite_css;

# 合并CSS
pagespeed EnableFilters combine_css;

# 重写CSS,优化加载渲染页面的CSS规则
pagespeed EnableFilters prioritize_critical_css;

# 压缩js
pagespeed EnableFilters rewrite_javascript;

# 合并js
pagespeed EnableFilters combine_javascript;

# 优化内嵌样式属性
pagespeed EnableFilters rewrite_style_attributes;

# 压缩图片
pagespeed EnableFilters rewrite_images;

# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;

# 图片预加载
pagespeed EnableFilters inline_preview_images;

# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;

# 图片延迟加载
pagespeed EnableFilters lazyload_images;

# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon/" { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }

这数据是搜来的,有些可能并不完全使用。可以适当删减以及修改,本人博客用的是typecho程序,要设置后台管理界面禁止缓存,那么把wp-admin换成admin(typecho的后台管理程序文件在这个目录)。本人博客的图片放在了图床上,已经设置了压缩文件大小以及修改尺寸等参数。所以图片压缩那个参数本人没有填。
更多优化参数可以看官方文档:https://www.modpagespeed.com/doc/
需要一定英文基础……
记得保存配置文件……

开启Brotli算法支持

宝塔官方并不直接支持Brotli这个扩展。所以需要自己准备文件。
1.准备文件。在SSH界面直接输入命令即可。

cd /www/server
#下载brotli
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
#更新brotli
git submodule update --init

2.修改编译脚本。
文件位置和编译ngx_pagespeed时要修改的一样。/www/server/panel,文件install.sh。
约246行,在./configure后加入--add-module=/www/server/ngx_brotli字段。记得前后要有一个空格。
3.执行编译命令。

sh /www/server/panel/install/nginx.sh install 1.17

注意1.17那个是编译的nginx版本,可以先去宝塔软件管理里找到nginx,看看nginx是1.16还是1.17(小的版本号可以忽略,比如1.17.28也是直接按1.17来算)。自己选择nginx版本。
另外编译需要一段时间,大约几分钟,需要保持SSH稳定连接,或者使用screen命令直接后台进行编译,具体可以百度。
编译完成后输入

nginx -V

查看是否有ngx_brotli字样,有的话就代表编译成功。
IMG_20200302_190132.jpg

开启Brotli压缩

接下来点击面板左侧软件商店-Nginx设置-配置修改,在http段内添加以下内容来启用Brotli压缩。

brotli on;
brotli_comp_level 6;
brotli_min_length 512;
brotli_types text/plain text/javascript text/css text/xml text/x-component application/javascript application/x-javascript application/xml application/json application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype;
brotli_static always;

可以参考我填写的位置:
IMG_20200302_191051.jpg
点击保存后再重载配置即可。
参数详解:

brotli on;              #启用
brotli_comp_level 6;    #压缩等级,默认6,最高11,太高的压缩水平可能需要更多的CPU
brotli_buffers 16 8k;   #请求缓冲区的数量和大小
brotli_min_length 20;   #指定压缩数据的最小长度,只有大于或等于最小长度才会对其压缩。这里指定20字节
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

这里参数默认是Brotli和Gzip共存,并且都启用了,好处就是部分老旧的浏览器不支持Brotli的时候会自动变成Gzip压缩,兼容性更佳。
本人觉得网页打开速度还是有一定提升的……

安装Brotli模块以及使用的参数有部分参考了此篇文章:https://www.moerats.com/archives/954/

Last modification:March 25th, 2020 at 07:28 pm