Nginx 部署 PageSpeed 模块

pagespeed

ngx_pagespeed 是Google 推出的一个 Nginx 的扩展模块,可以加速网站,减少页面加载时间,自动将一些提升web性能的实践应用到网页和相关的资源(CSS、JS和图片)上,无需修改内容和流程。

讲道理,PageSpeed 中的优化项目我本身已经使用了不少,根本用不上部署PageSpeed,但是抱着学习的态度,我还是尝试部署了一番,踩坑那也是必然的。

安装

下载最新版本的压缩包并解压,实际上编译pagespeed 还需要下载psol 依赖模块,不同版本的psol 不同,如果没找到psol 会打印出你如何下载相应的模块。

wget https://github.com/pagespeed/ngx_pagespeed/archive/latest-beta.tar.gz
tar xzf latest-beta.tar.gz

下载最新版本的Nginx 并解压

wget --no-check-certificate -c http://nginx.org/download/nginx-1.13.9.tar.gz
tar xzf nginx-1.13.9.tar.gz
cd nginx-1.13.9

使用nginx -V 查看之前安装nginx的编译信息并在末尾加上下面这段

--add-module=../ngx_pagespeed-latest-beta

添加完大致如下

./configure --prefix=/usr/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-openssl=../openssl-1.0.2k --with-pcre=../pcre-8.39 --add-module=../ngx_pagespeed-latest-beta

这时会提示checking for psol ... not found,并提示你如何操作,操作如下,注意版本号可能不同。

cd ngx_pagespeed-latest-beta/
wget https://dl.google.com/dl/page-speed/psol/1.12.35.2-x64.tar.gz
tar xzf 1.12.34.2-x64.tar.gz

如果操作完成后仍然提示checking for psol ... not found,非常可能的原因是你的GCC版本太低,这时候只能重新编译升级更至4.8以上版本。

之后常规操作并验证是否安装成功

make
mv /usr/local/nginx/sbin/nginx{,_date +%F}
cp objs/nginx /usr/local/nginx/sbin
nginx -V 2>&1 | grep -o ngx_pagespeed

配置

官网 官网列出了最使用的参数配置,下面的配置文件可供简单参考。

server {
    # 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 “Powered By Fatesinger.com”;

    # 开启 https
    pagespeed FetchHttps enable;

    # 配置服务器缓存位置和自动清除触发条件,缓存文件夹如果不存在则需要自行创建,建议放在内存中
    pagespeed FileCachePath “/dev/shm/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*";

    # 移除不必要的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;

    # 压缩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 extend_cache;

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

以上配置非常有用的如合并压缩js css文件,移除空白和相对URL,图片优化之类的则根据服务器性能酌情开启。

Bigfa

computer loser

Comments : 2

  1. 这类优化最好配合 Lighthouse 浏览器插件在业务中优化,直接在 Nginx 优化有些暴力

    1. @不给力的面条 看了眼 Lighthouse,这类的工具不少,大多都是参考,尤其样式表那个优化,感觉及其不实用。不过字体也是SEO 的一个考察项也是学习了。。

发表留言

人生在世,错别字在所难免,无需纠正。

Smilies powered by wp-alu

Post Comment