oneinstack下openresty安装pagespeed

By /

最近折腾了下pagespeed,因为使用的是openresty,所以过程稍微复杂了一些，笔者使用的是oneinstack,因此直接通过其upgrade.sh脚本来升级安装。

1. 首先下载pagespeed，然后放在oneinstack的src/pagespeed目录下

wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz

2. 下载需要的安装包:

  • CentOS: sudo yum groupinstall “Development Tools”
  • Ubuntu: sudo apt-get install build-essential

3. 接着修改include/upgrade_web.sh
找到Upgrade_OpenResty() 方法，这里就是针对openresty升级的部分，找到

./configure --prefix=.....

这一行，在最后面增加这一段:

--add-module=/root/oneinstack/src/pagespeed/incubator-pagespeed-ngx-1.13.35.2-stable

4. 执行升级脚本

./upgrade.sh

根据选项，选择升级OpenResty.这里如果版本不同，那么此处会直接通过。如果版本相同，那么可以修改下include/upgrade_web.sh，找到Upgrade_OpenResty()方法，找到如下这行：

if [ "${NEW_openresy_ver}" != "${OLD_openresy_ver}" ]; then ###修改 “!=”为“==”

5. 此时更新的过程应该会中断并提示需要下载psol.这里不提前下载的原因是psol版本需要与pagespeed对应，因此才会根据提示来下载。

You need to separately download the pagespeed library:
     $ cd /root/oneinstack/src/pagespeed/incubator-pagespeed-ngx-1.13.35.2-stable
     $ wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz
     $ tar -xzvf 1.13.35.2-x64.tar.gz # expands to psol/

6. 下载psol,并解压缩到/root/oneinstack/src/pagespeed/incubator-pagespeed-ngx-1.13.35.2-stable

7. 重新执行升级脚本

./upgrade.sh

8. 手动升级openresty

  • 此时升级依然会出错，(虽然出错，make实际已经成功，可以切换到/root/oneinstack/src/openresty-1.15.8.1目录下执行make进行测试，但先不要执行make install)
  • 测试make成功后，我们来手动备份下当前openresty下的nginx文件（当前nginx在/usr/local/openresty/nginx/sbin目录下）
  • 执行sudo make install, 并重启nginx: sudo systemctl restart nginx
  • 此时pagespeed模块已经安装成功，但并不会被加载，因为我们还没有加入对应的配置文件

9. 创建pagespeed.conf，放在/usr/local/openresty/nginx/conf/rewrite/pagespeed.conf(这里放的基本都是rewrite配置)

# on 启用，off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
#pagespeed DisableRewriteOnNoTransform off;
# 相对URL
#pagespeed PreserveUrlRelativity on;
pagespeed XHeaderValue "born too slow!~";

#cdn后面的服务器可以开启这个选项
pagespeed RespectXForwardedProto on;

# 开启 https
pagespeed FetchHttps enable;

# 配置服务器缓存位置和自动清除触发条件
pagespeed FileCachePath "/dev/shm/ngx_pagespeed/";
pagespeed FileCacheSizeKb 1024000;
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;
pagespeed EnableFilters rewrite_style_attributes_with_url;
# 合并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;
# 压缩mobile图片
pagespeed EnableFilters resize_mobile_images;
# 自动加type中的内容
pagespeed EnableFilters pedantic;
# Flattens @import rules in CSS by replacing the rule with the contents of the imported resource.
pagespeed EnableFilters flatten_css_imports;


# 不能删
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; }

#优化配置,如果有memcacheD,可以缓存
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "127.0.0.1:11211";

pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;

#控制台选项
location ~ ^/pagespeed_admin {
  allow 127.0.0.1;
  #deny all;
}

10. 编辑vhost下对应网站的配置文件，笔者是在这里加的。

 include /usr/local/openresty/nginx/conf/rewrite/wordpress.conf;
 include /usr/local/openresty/nginx/conf/rewrite/pagespeed.conf;

11. 重启nginx，就可以享受pagespeed了带来的好处了。
参考文档：https://www.ngxpagespeed.com
简单说下pagespeed的好处：

  • 合并js,css
  • 优化图片大小适应各种设备(针对手机设备会更改图片尺寸之类的)
  • 图片延迟加载，这个经过笔者测试，在大量图片的页面，全部加载完毕需要7.2秒，但使用延迟方式，只需要1.2秒页面就加载完毕了
  • 其他。。。更多的优势有待各位看官老爷们自己去挖掘，哈哈
Scroll to Top