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,图片优化之类的则根据服务器性能酌情开启。
这类优化最好配合 Lighthouse 浏览器插件在业务中优化,直接在 Nginx 优化有些暴力
@不给力的面条 看了眼 Lighthouse,这类的工具不少,大多都是参考,尤其样式表那个优化,感觉及其不实用。不过字体也是SEO 的一个考察项也是学习了。。