2018-3-20 下载文件后解压名字又变了,再次重新整理。

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 uuid-dev
cd /root/oneinstack/src

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

NPS_VERSION=1.13.35.2-beta

下载 ngx_pagespeed、解压、进入目录

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

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

返回上一级目录

cd ..

指定 Nginx 版本

NGINX_VERSION=1.13.9

下载 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=../$nps_dir ${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=../incubator-pagespeed-ngx-${NPS_VERSION}-beta

编译 5 分钟

make

备份 nginx 原文件

mv /usr/local/nginx/sbin/nginx{,_`date +%F`}

覆盖旧文件

cp objs/nginx /usr/local/nginx/sbin

检查安装情况

nginx -V 2>&1 | grep -o ngx_pagespeed
# 没反应不一定失败

curl https://网址.com -I
############################
HTTP/1.1 200 OK
Server: nginx
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Vary: Accept-Encoding
Set-Cookie: VGOTCN_OnLineCount=U28
Strict-Transport-Security: max-age=15768000
Date: Tue, 20 Mar 2017 10:26:10 GMT
X-Page-Speed: Powered By 网址.com
Cache-Control: max-age=0, no-cache

不需要这步,会覆盖 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;
  ...
  include /usr/local/nginx/conf/pagespeed.conf;

3.重启 nginx 生效

service nginx restart

4.优化结果可在源码查看 CSS,JS 等名称。

跑分 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'

或注释:

#pagespeed EnableFilters lazyload_images;

或添加:

if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }
if ($request_uri ~ "(pagespeed_([^.]+)/(.*)?)") { break; }

4)出现

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

解决:编译条件不够,可能是一些软件要求未达到。

5) 出现找不到 psol,但是已经下载,gcc 版本又很新 checking for psol ... not found ./configure: error: module ngx_pagespeed requires the pagespeed optimization library.

相关解决: 1.从源码编译 psol。https://github.com/apache/incubator-pagespeed-ngx/wiki/Building-PSOL-From-Source 2.https://groups.google.com/forum/?fromgroups&nomobile=true#!forum/ngx-pagespeed-announce 3.https://developers.google.com/speed/pagespeed/psol

文档

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

https://www.coderxing.com/nginx-pagespeed-module.html

具体参数: 下面参数是自己慢慢调试出的,并非所有参数都能用,理解官方文档或有少许偏差,也可能是程序 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;
# 参数不兼容时显示 url 404
if ($request_uri ~ "(ngx_pagespeed_([^.]+)/(.*)?)") { break; }
# 不需过滤目录或文件
pagespeed Disallow "*/wp-admin/*";
###### 未使用参数 ######
# 客户端缓存cache
pagespeed EnableFilters local_storage_cache;
# DNS预取(会产生大量html代码并产生一个404 gif)
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