Ngx-pagespeed是一个免费的开源Nginx模块，可用于加快您的站点速度，并减少页面加载时间。 它可以自动将Web性能最佳做法应用于页面和关联资源，而无需修改现有内容或工作流。 您可以使用Ngx-pagepeed模块轻松优化各种文件，如CSS，HTML，png和jpg。
Ngx-pagepeed带有很多功能，其中一些主要功能如下所示：
l 支持图像动态调整大小，重新压缩和优化。
l 小资源内联。
l HTML重写
l 缓存生存期延长。
l 延迟JavaScript和图像加载

一、安装依赖

yum install gcc-c++ pcre-devel zlib-devel zip wget gcc-c++ ncurses ncurses-devel cmake make perl bison openssl openssl-devel gcc* libxml2 libxml2-devel curl-devel libjpeg* libpng* freetype*

二. 下载解压pagespeed模块

查看是否有最新版本：https://www.modpagespeed.com/doc/release_notes

#设置pagespeed最新文档版本
NPS_VERSION=1.13.35.1-beta
wget https://github.com/apache/incubator-pagespeed-ngx/archive/v${NPS_VERSION}.zip
unzip v${NPS_VERSION}.zip
nps_dir=$(find . -name "*pagespeed-ngx-${NPS_VERSION}" -type d)
cd "$nps_dir"
NPS_RELEASE_NUMBER=${NPS_VERSION/beta/}
NPS_RELEASE_NUMBER=${NPS_VERSION/stable/}
psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_RELEASE_NUMBER}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -xzvf $(basename ${psol_url})  # extracts to psol/

三. 下载并构建支持pagespeed的Nginx：

#设置nginx最新文档版本
NGINX_VERSION=1.16.1
wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/
#configure文件中NGX_PREFIX=${NGX_PREFIX:-/usr/local/nginx}可以设置nginx安装位置
#设置关联模块
#例子：   ./configure --add-module=/test/incubator-pagespeed-ngx-1.13.35.1-beta
####步骤1####
./configure --add-module=$HOME/$nps_dir ${PS_NGX_EXTRA_FLAGS}
####步骤2####
make
####步骤3####
make install

步骤1执行成功后如图

./configure

步骤2执行成功后如图

make

步骤3执行成功后如图

make install

四. 开启nginx的pagespeed模块

在nginx的服务的配置文件中加入

pagespeed on;
pagespeed FileCachePath /tmp/ngx_pagespeed_cache;
pagespeed RewriteLevel CoreFilters;
pagespeed UseExperimentalJsMinifier on;
pagespeed EnableFilters add_head;
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters fallback_rewrite_css_urls;
pagespeed EnableFilters flatten_css_imports;
pagespeed EnableFilters inline_css;
pagespeed EnableFilters inline_import_to_link;
pagespeed EnableFilters inline_javascript;
pagespeed EnableFilters local_storage_cache;
pagespeed EnableFilters collapse_whitespace,remove_comments;
pagespeed EnableFilters outline_css;
pagespeed EnableFilters flatten_css_imports;
pagespeed EnableFilters move_css_above_scripts;
pagespeed EnableFilters move_css_to_head;
pagespeed EnableFilters outline_javascript;
pagespeed EnableFilters combine_javascript;
pagespeed EnableFilters combine_css;
pagespeed EnableFilters rewrite_javascript;
pagespeed EnableFilters rewrite_css,sprite_images;
pagespeed EnableFilters rewrite_style_attributes;
pagespeed EnableFilters rewrite_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters resize_images;
pagespeed EnableFilters convert_meta_tags;
pagespeed EnableFilters lazyload_images;
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; }

#如果不知道加到哪，可以加入到 root /home/wwwroot/yourdomain.com; 的后面即可
# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;    
# 启用JavaScript库卸载    
pagespeed EnableFilters canonicalize_javascript_libraries; #谷歌被墙，并不确定这个设置有没有副作用 
# 把多个CSS文件合并成一个CSS文件    
pagespeed EnableFilters combine_css;    
# 把多个JavaScript文件合并成一个JavaScript文件    
pagespeed EnableFilters combine_javascript;    
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 改善资源的可缓存性    
pagespeed EnableFilters extend_cache;    
# 更换被导入文件的@import，精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;    
# 延时加载客户端看不见的图片    
pagespeed EnableFilters lazyload_images;    
# 启用JavaScript缩小机制    
pagespeed EnableFilters rewrite_javascript;    
# 启用图片优化机制    
pagespeed EnableFilters rewrite_images;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 重写CSS，首先加载渲染页面的CSS规则    
pagespeed EnableFilters prioritize_critical_css; 
# Example 禁止pagespeed 处理/wp-admin/目录(可选配置，可参考使用)
pagespeed Disallow "*/wp-admin/*";

五. 创建临时目录

mkdir /tmp/ngx_pagespeed_cache
chmod -R 777 /tmp/ngx_pagespeed_cache

六. 启动nginx

./nginx

七. 验证

重启Nginx后，咱们刷新一下前台，随便搜索下 pagespeed，可以发现源码大部分都已经被替换了：

参考文档：https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source