文章目录
展开
宝塔官方一直没有在面板里面默认集成PageSpeed模块，大鸟估计是PageSpeed模块在国内有点水土不服，但是这并不能影响小伙伴么尝鲜。大鸟自己也憋不住给nginx编译了这个模块，发现速度提升还是很明显的。
大鸟昨天说了如何编译ngx_lua_waf web 应用防火墙模块，那么今天编译PageSpeed模块也还是一样。ngx_pagespeed 是一个非常不错的 Nginx 拓展，大鸟也就不去多介绍这玩意了，如果不懂，就自己百度去。
第一、备份nginx
你可以使用SSH工具以ROOT权限登陆之后下载备份nginx，也可以直接使用命令备份nginx。
1、查看nginx位置
ps -elf | grep nginx
2、进入宝塔面板的nginx目录
cd /www/server/nginx/sbin/
3、备份宝塔nginx
cp nginx nginx.bak
4、进入root目录
cd /root
第二、自动安装
- 安装文档
https://www.modpagespeed.com/doc/build_ngx_pagespeed_from_source - 使用谷歌给出的自动安装脚本安装！
bash <(curl -f -L -sS https://ngxpagespeed.com/install) \
--nginx-version latest
如果有选择的时候，我们需要选择Y,回车即可继续安装。大鸟的宝塔面板环境是nginx1.14.1 php7.2，貌似低版本的pagespeed安装会有错误，大鸟这里安装的是page-speed 1.13.35.2。如果我们安装新版本的不成功，可以试试低版本的（ 1.13.3 降至 1.12.0）或者更低的版本。
第三、重新编译 nginx
查看当前nginx的加载所的模块，在编译加载的PageSpeed模块的时候仍需加载这些模块（下面的路径是宝塔默认的nginx的路径，其他面板请自行更改路径）
cd /www/server/nginx/src
查看宝塔编译好的nginx加载模块，在重新编译加载新模块时候仍需加载这些模块
nginx -V
注意这个命令是大写的V，如果小写v是不会显示模块的，这里会显示出所有的已经编译的模块。将./configure arguents：之后的内容复制到记事本备用。大鸟这里是：
--user=www --group=www --prefix=/www/server/nginx --with-openssl=/www/server/nginx/src/openssl --add-module=/www/server/nginx/src/ngx_devel_kit --add-module=/www/server/nginx/src/lua_nginx_module --add-module=/www/server/nginx/src/ngx_cache_purge --add-module=/www/server/nginx/src/nginx-sticky-module --add-module=/www/server/nginx/src/nginx-http-concat --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_image_filter_module --with-http_gzip_static_module --with-http_gunzip_module --with-stream --with-stream_ssl_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --with-pcre=pcre-8.40 --with-ld-opt=-ljemalloc
第四、编译内容
./configure 上一步记事本中的备用内容 --add-module=/root/incubator-pagespeed-ngx-latest-stable
注意–add-module前面是有空格的，./configure后面也有空格。全部代码如下：
--user=www --group=www --prefix=/www/server/nginx --with-openssl=/www/server/nginx/src/openssl --add-module=/www/server/nginx/src/ngx_devel_kit --add-module=/www/server/nginx/src/lua_nginx_module --add-module=/www/server/nginx/src/ngx_cache_purge --add-module=/www/server/nginx/src/nginx-sticky-module --add-module=/www/server/nginx/src/nginx-http-concat --with-http_stub_status_module --with-http_ssl_module --with-http_v2_module --with-http_image_filter_module --with-http_gzip_static_module --with-http_gunzip_module --with-stream --with-stream_ssl_module --with-ipv6 --with-http_sub_module --with-http_flv_module --with-http_addition_module --with-http_realip_module --with-http_mp4_module --with-ld-opt=-Wl,-E --with-pcre=pcre-8.40 --with-ld-opt=-ljemalloc --add-module=/root/incubator-pagespeed-ngx-latest-stable
/root/incubator-pagespeed-ngx-latest-stable，这里是编译文件放的路径，如果你是存放到别的地方，注意修改路径。我们回车，等待命令结束，输入编译命令：
make
编译安装过程大概要5分钟左右，还是有点长的。完成后将系统中原有的nginx用重新编译生成的nginx文件替换。
1、停止nginx
service nginx stop
2、删除原来的nginx，操作之前请确认自己的nginx已经备份
rm -rf /www/server/nginx/sbin/nginx
3、复制新编译的nginx
cp /www/server/nginx/src/objs/nginx /www/server/nginx/sbin/
4、启动nginx
service nginx start
第五、检查模块pagespeed
我们可以在root目录，用命令nginx -V来查看所有的编译模块里面是否有我们刚刚编译的pagespeed模块。
这里已经能看到心编译的模块了，既然已经安装好，下面就来配置，测试啦。
第六、配置pagespeed
在网站-设置-网站配置里面添加配置代码。
下面是我用的pagespeed配置，缓存路径为/var/cache/ngx_pagespeed，手动刷新缓存可以删掉这个目录然后重启nginx： pagespeed on; pagespeed FileCachePath /var/cache/ngx_pagespeed; # setting # X-Header 值，用于判断是否生效 pagespeed XHeaderValue "Powered By www.xxx.com"; # 压缩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; # 重置 http Vary 头 pagespeed RespectVary on; # html字符转小写 pagespeed LowercaseHtmlNames on; # 开启 https pagespeed FetchHttps enable,allow_self_signed,allow_unknown_certificate_authority,allow_certificate_not_yet_valid; # 过滤规则 pagespeed RewriteLevel PassThrough; # 移除 html 空白 pagespeed EnableFilters collapse_whitespace; # 移除 html 注释 pagespeed EnableFilters remove_comments; # DNS 预加载 pagespeed EnableFilters insert_dns_prefetch; # 优化内嵌样式属性 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 sprite_images; # 扩展缓存 改善页面资源的可缓存性 pagespeed EnableFilters extend_cache; pagespeed EnableFilters combine_javascript; pagespeed XHeaderValue "Powered By ngx_pagespeed"; pagespeed SupportNoScriptEnabled false; # filters pagespeed RewriteLevel CoreFilters; pagespeed EnableFilters remove_comments,collapse_whitespace; # admin直接访问 <域名>/pagespeed_admin 就可以打开管理员界面了。 pagespeed Statistics on; pagespeed StatisticsLogging off; pagespeed LogDir /var/log/pagespeed; pagespeed AdminPath /pagespeed_admin; # Configuring the File Cache pagespeed FileCacheSizeKb 1024000; # 1GB pagespeed FileCacheCleanIntervalMs 3600000; # 1h pagespeed FileCacheInodeLimit 500000; # Configuring the in-memory LRU Cache pagespeed LRUCacheKbPerProcess 1024; pagespeed LRUCacheByteLimit 16384; pagespeed HttpCacheCompressionLevel 3; pagespeed EnableCachePurge on;
防止网站出现问题，我们最好把压缩，合并js这个功能禁用掉。这里大家注意下。大鸟这里用的是wordpress，这贴一个wordpress的版本的配置代码！
# 启用ngx_pagespeed pagespeed on; pagespeed FileCachePath /var/cache/ngx_pagespeed; # 禁用CoreFilters pagespeed RewriteLevel PassThrough; # X-Header 值，用于判断是否生效 pagespeed XHeaderValue "Powered By www.daniao.org"; # 过滤规则 #pagespeed RewriteLevel OptimizeForBandwidth; # 不需过滤的目录或文件 pagespeed Disallow "*/wp-admin/*"; pagespeed Disallow "*/wp-login.php*"; # 启用压缩空白过滤器 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;
第七，测试效果
打开网页看源码，刷新下，看看有没有什么变化。
随便搜索下 pagespeed，可以发现源码大部分都已经被替换了，可以看到确实是生效了。
第八、总结
这个模块还是挺占用资源的，如果是什么单核的低配置的，就不要搞了。不过启用之后，效果确实不错。如果想折腾的，不妨去试试看！