ngx_pagespeed 是Google 推出的一个 Nginx 的扩展模块，可以加速网站，减少页面加载时间，自动将一些提升web性能的实践应用到网页和相关的资源（CSS、JS和图片）上，无需修改内容和流程。有了 PageSpeed，网站开发人员就可以在开发前端页面的时候稍微轻松一点了，当然这会使服务器负载增加，如果服务器性能足够强劲不妨一试。这里以军哥的LNMP作为安装环境，完整记录安装配置过程，仅供参考。

ngx_pagespeed.png

安装

本教程以军哥LNMP1.7一键包作为安装环境，有同样使用军哥LNMP一键包的朋友可以参考。

1、安装依赖

编译安装 pagespeed 前需要先安装依赖：

# CentOS 7
sudo yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel

# Ubuntu / Debian
sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip uuid-dev

2、下载ngx_pagespeed

进入到LNMP目录下的src目录，下载最新版本的压缩包并解压。

cd ~/lnmp1.7-full/src
wget https://github.com/apache/incubator-pagespeed-ngx/archive/refs/tags/latest-stable.tar.gz
tar xzf latest-stable.tar.gz

3、修改 nginx 升级脚本

修改~/lnmp1.7-full/include目录中的upgrade_nginx.sh文件（请根据自己lnmp路径修改）:

cd ~/lnmp1.7-full/src
vim ~/lnmp1.7-full/include/upgrade_nginx.sh

找到下面这段代码（可能有些差异）：

   if [[ "${Nginx_Ver_Com}" == "0" ||  "${Nginx_Ver_Com}" == "1" ]]; then
        ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_spdy_module --with-http_gzip_static_module --with-ipv6 --with-http_sub_module ${Nginx_With_Openssl} ${Nginx_With_Pcre} ${Nginx_Module_Lua} ${NginxMAOpt} ${Nginx_Modules_Options}
    else
        ./configure --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_gzip_static_module --with-http_sub_module --with-stream --with-stream_ssl_module ${Nginx_With_Openssl} ${Nginx_With_Pcre} ${Nginx_Module_Lua} ${NginxMAOpt} ${Nginx_Modules_Options}
    fi

将 else 之后的 ${Nginx_Modules_Options} 追加 --add-module=../incubator-pagespeed-ngx-latest-stable，ESC键输入:wq 保存并退出。

接下来给予upgrade_nginx.sh文件执行权限。

chmod +x upgrade_nginx.sh

4、下载 psol 依赖模块

执行脚本自动编译升级 nginx

cd ~/lnmp1.7-full
./upgrade.sh nginx

这里会弹出一个提示，要求输入Nginx版本号即可。（输当前nginx版本号就行）

iShot2021-04-07 20.32.03.jpg

这时会提示checking for psol ... not found，不同版本的psol 不同，请根据屏幕打印的提示信息下载 psol 依赖模块。

cd ~/lnmp1.7-full/src/incubator-pagespeed-ngx-latest-stable/
wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
tar -xzvf 1.13.35.2-x64.tar.gz

再次执行脚本自动编译升级 nginx

cd ~/lnmp1.7-full
./upgrade.sh nginx

根据提示，要求输入当前Nginx版本号，回车开始执行编译升级。

iShot2021-04-07 20.32.03.jpg

如果操作完成后仍然提示checking for psol ... not found，可能的原因是你的GCC版本太低，这时候只能重新编译升级更至4.8以上版本。

检测 ngx_pagespeed模块是否安装成功

# 若输出 ngx_pagespeed 表示已成功编译此模块

nginx -V 2>&1 | grep -o ngx_pagespeed

配置

cd /usr/local/nginx/conf/
vim pagespeed.conf

拷贝下方配置内容：（更多ngx_pagespeed配置查看 ngx_pagespeed 官方文档 ）

# on 启用，off 关闭
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 moewah.com";

# 开启 https
pagespeed FetchHttps enable;
# 配置证书
pagespeed SslCertDirectory directory;
pagespeed SslCertFile file;
# 加载资源，填写网站完整链接地址对应网站根目录，https站点必须添加否则可能失效
pagespeed LoadFromFile "https://example.com/static/" "/path/to/static/files";

#如果有 Redis 就添加 如果没有就不弄
#pagespeed RedisServer "127.0.0.1:6379";
#如果有 Memcached 就添加 如果没有就不弄
#pagespeed MemcachedServers "127.0.0.1:11211";

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

# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤typecho的/admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/admin/*";

# 移除不必要的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;
# google字体直接写入html 目的是减少浏览器请求和DNS查询
pagespeed EnableFilters inline_google_font_css;
# 压缩js
pagespeed EnableFilters rewrite_javascript;
# 合并js
pagespeed EnableFilters combine_javascript;
# 优化内嵌样式属性
pagespeed EnableFilters rewrite_style_attributes;
# 压缩图片
pagespeed EnableFilters rewrite_images;
# 该过滤器试图压缩图像数据和元数据，如带不必要的缩略图。这是一组滤波器，相当于使 convert_gif_to_png, convert_jpeg_to_progressive, convert_jpeg_to_webp, jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, strip_image_color_profile, and strip_image_meta_data
pagespeed EnableFilters recompress_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
# 图片预加载
pagespeed EnableFilters inline_preview_images;
# 移动端图片自适应重置
pagespeed EnableFilters resize_mobile_images;
# 图片延迟加载
pagespeed EnableFilters lazyload_images;
# 雪碧图片，图标很多的时候很有用
pagespeed EnableFilters sprite_images;
# 扩展缓存 改善页面资源的可缓存性
pagespeed EnableFilters extend_cache;

# 若有 Google Adsense 可开启异步加载
#pagespeed EnableFilters make_show_ads_async;

以上配置非常有用的如合并压缩js、css文件，移除空白和相对URL，图片优化之类的则根据服务器性能酌情开启。

# 修改你自己网站的nginx配置文件
vi /usr/local/conf/vhost/yourdomain.conf

在 server {} 段内添加

# 加载配置
include pagespeed.conf;

# 将 meta 转换为 header 
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_message { allow 127.0.0.1; deny all; }

按ECS 输入:wq保存并退出，运行nginx -t测试配置是否正确。

运行命令 nginx -s reload 或者 service nginx restart 重新载入配置或者重启nginx 使配置生效。

清理缓存

开启 PageSpeed 后，如果原来的 CSS 和 JS 发生变动话的，不清理缓存是不会生效的，需要清理缓存的时候：

touch /dev/shm/ngx_pagespeed/cache.flush

运行上述语句即可， 其中 /dev/shm/ngx_pagespeed/ 为配置文件中，pagespeed FileCachePath "/dev/shm/ngx_pagespeed/"; 设置的目录。

我们可通过Google提供的Pagespeed Insights进行web端性能测试，逐项调整参数进行针对性的优化。

相关推荐

  1. ngx_waf：一款高大全的 Nginx 网站防火墙模块
  2. Typecho 启用 Service Workers 浏览器缓存加速首屏访问
  3. Google AdSense 广告优化，不以拖慢速度为代价！
  4. 隐藏图片如何禁止加载？display none与图片加载的关系
  5. 如何彻底禁止百度等搜索引擎收录
  6. Nginx 查看并发连接数的两种方法
文章作者：喵斯基部落
原文地址：https://www.moewah.com/archives/3705.html
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。非商业转载及引用请注明出处（作者、原文链接），商业转载请联系作者获得授权。