部署 Ngx_PageSpeed

2017-5-7 修正步骤。以前的 Google 官方文档更新导致自己也没有成功搭建,这回再次成功。

2016-9-8 重写内容,因为 debian 7 GCC 版本低还需升级编译,还不如直接用 Debian 8 痛快。也尝试了 Apache 的 mod_pagespeed 发现折腾难度对我来说蛮高,还是 nginx 好折腾。

可以使用 Ngx_PageSpeed 来处理全站静态文件:
1.CSS 和 JS 重写压缩;
2.调整加载 CSS 和 JS 优先;
3.转换 PNG 和 JPEG 格式为轻巧的 .webp,这个格式貌似是谷歌开发的,so 在 Firefox 无法看到图片;
4.整理 HTML 代码;
5.等等。

全文步骤基于环境 Oneinstack 操作。学习 PageSpeed 安装用时半天,调试参数半天。试验 nginx 安装模块和调试时问题各种爆现。最后发现 ngx_pagespeed 其实系统资源开销还是蛮大的,建议 1GB RAM!

环境

debian 8 x64 或 Centos 7.2 x64
oneinstack
gcc ≥ 4.8
clang ≥ 3.3

过程

准备软件

apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev unzip
cd /root/oneinstack/src

指定 Pagespeed 版本和 psol 版本,系统自动识别系统位数。

NPS_VERSION=1.12.34.2

下载 ngx_pagespeed、解压、进入目录

wget https://github.com/pagespeed/ngx_pagespeed/archive/v${NPS_VERSION}-beta.zip
unzip v${NPS_VERSION}-beta.zip
cd ngx_pagespeed-${NPS_VERSION}-beta/

下载 psol、解压

psol_url=https://dl.google.com/dl/page-speed/psol/${NPS_VERSION}.tar.gz
[ -e scripts/format_binary_url.sh ] && psol_url=$(scripts/format_binary_url.sh PSOL_BINARY_URL)
wget ${psol_url}
tar -zxvf$(basename ${psol_url})

返回上一级

cd /root/oneinstack/src/

指定 Nginx 版本

NGINX_VERSION=1.12.0

下载 nginx、解压、进入目录、编译

wget http://nginx.org/download/nginx-${NGINX_VERSION}.tar.gz
tar -xvzf nginx-${NGINX_VERSION}.tar.gz
cd nginx-${NGINX_VERSION}/

nginx -V查看编译参数

--prefix=/wp-content/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2k --with-pcre=../pcre-8.40 --with-pcre-jit --with-ld-opt=-ljemalloc

参数前增加 ./configure
末尾增加 --add-module=../ngx_pagespeed-${NPS_VERSION}-beta ${PS_NGX_EXTRA_FLAGS}

举例:

./configure --prefix=/wp-content/local/nginx --user=www --group=www --with-http_stub_status_module --with-http_v2_module --with-http_ssl_module --with-http_gzip_static_module --with-http_realip_module --with-http_flv_module --with-http_mp4_module --with-openssl=../openssl-1.0.2k --with-pcre=../pcre-8.40 --with-pcre-jit --with-ld-opt=-ljemalloc --add-module=../ngx_pagespeed-${NPS_VERSION}-beta ${PS_NGX_EXTRA_FLAGS}

编译 5 分钟

make

备份 nginx 原文件

mv /wp-content/local/nginx/sbin/nginx{,_`date +%F`}

覆盖旧文件

cp objs/nginx /wp-content/local/nginx/sbin

nginx -v

不需要这步,会覆盖 nginx.conf

make install

配置

1.缓存文件夹

mkdir /var/ngx_pagespeed_cache
chown www.www /var/ngx_pagespeed_cache

2.编辑 bpplpp.com.conf

参数可能会太臃肿就采取引用include pagespeed.conf;到 bpplpp.com.conf

server {
  listen 80;
  server_name bpplpp.com;
  index index.html index.htm index.php;
  root /var/www/bpplpp.com;
  ...

  # 直接引用 *.conf 的方式,pagespeed.conf 参数在下面。
  include /wp-content/local/nginx/conf/pagespeed.conf;

3.重启 nginx 生效

service nginx restart

4.优化结果可查看CSS,JS,PNG,JPEG 后缀。

跑分 1
跑分 2
跑分 3

5.手动删除缓存

rm -fr /var/ngx_pagespeed_cache/*

自动删除

// 新建脚本
nano /root/delcache.sh

// 内容为
rm -fr /var/ngx_pagespeed_cache/*

// 修正权限
chmod +x delcache.sh

// 设置定时清理缓存
crontab -e
* 0 * * * /root/delcache.sh

问题

1)make: *** [build] Error 2service nginx restart报错:

Job for nginx.service failed. See 'systemctl status nginx.service' and 'journalctl -xn' for details.

解决:检查 nginx 是否正确安装,检查参数及设定路径

2)Wordpress 编辑器可视化、文本切换失败

pagespeed Disallow "*/wp-admin/*";

Typecho 专用,忽略后台不缓存。

pagespeed Disallow "*/admin/*";

3)URL:ngx_pagespeed_static:404 解决:

--with-cc-opt=’-DLINUX=2 -D_REENTRANT -D_LARGEFILE64_SOURCE -march=i686 -pthread’

4)出现

make: *** No rule to make target build, needed by default. Stop.

编译条件不够,可能是软件版本未达到。

文档

https://developers.google.com/speed/pagespeed/module/build_ngx_pagespeed_from_source

参数

http://ngxpagespeed.com
https://developers.google.com/speed/pagespeed/module/filter-head-add
http://blog.csdn.net/caipeichao2/article/details/26396965

下面参数是自己慢慢调试出的,并非所有参数都能用,理解官方文档或有少许偏差,也可能是程序 Bug。出现无效参数或者出错时就一条条排查,然后 service nginx reload

pagespeed on;
# 缓存位置
pagespeed FileCachePath /var/ngx_pagespeed_cache;
# 清理缓存触发条件
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheInodeLimit 500000;
###### 优化 ######
pagespeed RewriteLevel PassThrough;
# 移除 html 空白和注释
pagespeed EnableFilters collapse_whitespace,remove_comments;
# 禁止出现PageSpeed=noscript
pagespeed SupportNoScriptEnabled false;
# 缩短网址
pagespeed EnableFilters trim_urls;
# 禁用收集信标(ngx_pagespeed_beacon)
pagespeed CriticalImagesBeaconEnabled false;
# 忽略属性
pagespeed EnableFilters elide_attributes;
pagespeed EnableFilters extend_cache;
# HTML载入内联CSS最大bytes
pagespeed CssImageInlineMaxBytes 3072;
# HTML载入内联图片最大bytes
pagespeed ImageInlineMaxBytes 40960;
# HTML规范-移除引号(""和'')
pagespeed EnableFilters remove_quotes;
# meta转为header
pagespeed EnableFilters convert_meta_tags;
###### 优化 ######
###### CSS ######
# CSS嵌内外,in & out
pagespeed EnableFilters inline_css;
pagespeed CssInlineMaxBytes 20480;
# 合并CSS
pagespeed EnableFilters combine_css;
pagespeed MaxCombinedCssBytes -1;
pagespeed MaxSegmentLength 1024;
pagespeed CombineAcrossPaths off;
# 重写CSS
pagespeed EnableFilters rewrite_css;
# rewrite_css启用后压缩CSS
pagespeed EnableFilters rewrite_style_attributes;
# 优先加载将使用到的CSS
pagespeed EnableFilters prioritize_critical_css;
# 没搞懂和rewrite_css搭配使用,类似优先把CSS加载到header
pagespeed EnableFilters fallback_rewrite_css_urls;
# CSS移到header里面
pagespeed EnableFilters move_css_to_head;
# CSS移到相对于JS前面
pagespeed EnableFilters move_css_above_scripts;
# @import
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 102400;
###### CSS ######
###### JS ######
# JS嵌内外,in & out
pagespeed EnableFilters inline_javascript;
pagespeed JsInlineMaxBytes 40960;
pagespeed EnableFilters include_js_source_maps;
# 合并js
pagespeed EnableFilters combine_javascript;
pagespeed MaxCombinedJsBytes 51200;
# 重写js
pagespeed EnableFilters rewrite_javascript;
pagespeed UseExperimentalJsMinifier on;
# HTML代码执行完再执行JS
#pagespeed EnableFilters defer_javascript;
###### JS #######
###### 图片处理 ######
# 重写图片-父项(inline_images, recompress_images, convert_to_webp_lossless(配合jpeg_to_webp适用), and resize_images.)
pagespeed EnableFilters rewrite_images;
# 调整图片到渲染尺寸
pagespeed EnableFilters resize_rendered_image_dimensions;
# JPG转Webp
pagespeed EnableFilters convert_jpeg_to_webp;
# 允许浏览器增量显示图片
pagespeed EnableFilters convert_jpeg_to_progressive;
# 和图片有关,详细未知
pagespeed ImageJpegNumProgressiveScans -1;
pagespeed ImageJpegNumProgressiveScansForSmallScreens -1;
###### 图片处理 ######
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {add_header "" "";}
location ~ "^/pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon$" { }
# 参数不兼容时显示 url 404
if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }
# 不需过滤目录或文件
pagespeed Disallow "*/wp-admin/*";
###### 未使用参数 ######
# 客户端缓存cache(会产生大量html代码)
pagespeed EnableFilters local_storage_cache;
# DNS预取(会产生大量html代码)
pagespeed EnableFilters insert_dns_prefetch;
# 针对浏览器优化(不兼容)
pagespeed EnableFilters in_place_optimize_for_browser;
# 自定义头部(未知)
pagespeed CustomFetchHeader CustomHeader CustomHeaderValue;
pagespeed CustomFetchHeader AnotherCustomHeader AnotherValue;
# 延迟图片加载(产生大量html代码)
pagespeed EnableFilters lazyload_images;
# 优先加载将使用到的CSS(产生大量html代码)
pagespeed EnableFilters prioritize_critical_css;

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; }

参数太多,够用即可。

曾参考过文献:http://blog.icodex.org/2013/05/build-nginx-and-ngx-pagespeed