Nginx部署ngx_pagespeed模块

PageSpeed是Google推出的一项网页加速服务,分别有Apache PageSpeed和ngx_pagespeed两个模块,适用于Apache和Nginx服务器。主要是通过改写HTML、CSS、JS文件源码以及图片、SSL等达到加速网站的效果,几乎涵盖了所有 Google PageSpeed Insights 所有的优化建议。

Github:https://github.com/apache/incubator-pagespeed-ngx

主要功能

  • 图像优化:剥离元数据、动态调整,重新压缩
  • CSS和JavaScript压缩、合并、级联、内联
  • 小资源内联
  • 推迟图像和JavaScript加载
  • 对HTML重写、压缩空格、去除注释等
  • 提升缓存周期

作为Nginx组件,ngx_pagespeed将重写你的网页,让用户以更快的速度进行访问。重写的工作包括压缩图片、缩减CSS和JavaScript、扩展缓存时间,同样还包括其它一些最佳实践:

  • 优化缓存—-整合应用程序的数据和逻辑
  • 最小化round-trip次数—-削减连续的请求/响应周期数
  • 最小化请求开销—-削减上传大小
  • 最小化负载大小—-削减响应、下载及缓存页面大小
  • 优化浏览器渲染—-改善浏览器页面布局
  • 移动方面的优化—-优化站点移动网络和设备方面的相关特性

部署

下载所需软件

1
2
3
4
5
yum install gcc-c++ pcre-devel zlib-devel make unzip libuuid-devel
git clone https://github.com/apache/incubator-pagespeed-ngx.git
# psol扩展
wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
tar -xvf 1.13.35.2-x64.tar.gz -C incubator-pagespeed-ngx

编译Nginx

1
2
3
4
5
6
7
8
9
10
11
12
[root@LWS-NL-NODE sbin]# cp nginx nginx.bak
[root@LWS-NL-NODE sbin]# ls
nginx nginx.bak nginx.old
[root@LWS-NL-NODE sbin]# nginx -V
nginx version: LWS/0.1.9.1
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC)
built with OpenSSL 1.1.1g 21 Apr 2020
TLS SNI support enabled
configure arguments: --prefix=/usr/local/nginx --with-cc-opt=-O2 --add-module=../ngx_devel_kit-0.3.1 --add-module=../echo-nginx-module-0.62 --add-module=../xss-nginx-module-0.06 --add-module=../ngx_coolkit-0.2 --add-module=../set-misc-nginx-module-0.32 --add-module=../form-input-nginx-module-0.12 --add-module=../encrypted-session-nginx-module-0.08 --add-module=../srcache-nginx-module-0.32 --add-module=../ngx_lua-0.10.19 --add-module=../ngx_lua_upstream-0.07 --add-module=../headers-more-nginx-module-0.33 --add-module=../array-var-nginx-module-0.05 --add-module=../memc-nginx-module-0.19 --add-module=../redis2-nginx-module-0.15 --add-module=../redis-nginx-module-0.3.7 --add-module=../rds-json-nginx-module-0.15 --add-module=../rds-csv-nginx-module-0.09 --add-module=../ngx_stream_lua-0.0.9 --with-ld-opt=-Wl,-rpath,/usr/local/luajit/lib --user=www --group=www --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 --with-http_geoip_module --with-openssl=/data/software/openssl-1.1.1g --with-openssl-opt='-g enable-weak-ssl-ciphers' --add-module=/data/software/ngx_brotli --add-module=/data/software/ngx_cache_purge-2.3 --add-module=/data/software/incubator-pagespeed-ngx --with-stream --with-stream_ssl_preread_module

# 复制原有编译参数,并在后面添加--add-module=/data/software/incubator-pagespeed-ngx/
./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 --with-http_geoip_module --with-openssl=/data/software/openssl-1.1.1g/ --with-openssl-opt='enable-weak-ssl-ciphers' --add-module=/data/software/ngx_brotli --add-module=/data/software/ngx_cache_purge-2.3 --add-module=/data/software/incubator-pagespeed-ngx/

配置

过滤器

PageSpeed旨在缩短网页加载的时间,减少网站服务器的带宽使用量。PageSpeed模块可以使用数量众多的重写”过滤器”,每个过滤器都可以选择性地开启/关闭,从而自动进行各种优化(比如,减小文档大小、减少HTTP请求数据、减少HTTP往返次数以及缩短DNS解析时间)。

1
2
3
4
5
6
7
8
9
10
11
12
Collapse Whitespace(压缩空白):通过把HTML网页中的多处连续空白换成一处空白,减少带宽使用量。
Canonicalize JavaScript Libraries(规范化转换JavaScript库):通过自动把流行的JavaScript库换成免费托管的JavaScript库(比如由谷歌托管),减少带宽使用量。
Combine CSS(合并CSS):通过把多个CSS文件合并成一个CSS文件,减少HTTP请求数量。
Combine JavaScript(合并JavaScript):通过把多个JavaScript文件合并成一个JavaScript文件,减少HTTP请求数量。
Elide Attributes(省略属性):通过删除由默认属性指定的标签,缩小文档大小。
Extend Cache(扩展缓存):通过优化网页资源的可缓存性,减少带宽使用量。
Flatten CSS Imports(精简CSS导入):通过删除CSS文件中的@import,减少HTTP请求往返次数。
Lazyload Images(延时加载图片):延时加载在客户端浏览器上看不见的图片。
Minify JavaScript(缩小JavaScript):通过缩小JavaScript,减少带宽使用量。
Optimize Images(优化图片):通过引入更多的内嵌图片、压缩图片,或者将GIF图片转换成PNG图片,优化图片分发。
Pre-Resolve DNS(预解析DNS):通过预解析DNS,缩短DNS解析时间。
Prioritize Critical CSS(优化加载关键CSS规则):重写CSS文件,以便首先加载渲染页面的CSS规则。

Nginx Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
server {
#on 启用,off 关闭
pagespeed on;
###########缓存 ##########
#相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;
#开启使用Redis(和memcached只能先其一)
pagespeed RedisServer "127.0.0.1:6379";
# memcached优化,如果没有memcached优化请删去
#pagespeed MemcachedThreads 1;
#pagespeed MemcachedServers "127.0.0.1:11211";
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "Powered By Lianst";

# 开启 https
#pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/tmp/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的/wp-admin/目录(可选配置,可参考使用)
pagespeed Disallow "*/wp-admin/*";
pagespeed Disallow "*/wp-login.php*";
# 过滤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;
# 不加载显示区域以外的图片
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;

# 不能删
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/ngx_pagespeed_static/" { }
location ~ "^/ngx_pagespeed_beacon[ DISCUZ_CODE_17 ]quot; { }
location /ngx_pagespeed_statistics { allow 127.0.0.1; deny all; }
location /ngx_pagespeed_message { allow 127.0.0.1; deny all; }
}