Ngx_Pagespeed模块简介
Ngx_PageSpeed是Nginx的一个扩展模块,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。
Ngx_PageSpeed对Nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;
但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。
Ngx_PageSpeed模块的主要功能
- 图像优化:剥离元数据、动态调整,重新压缩
- CSS和JavaScript压缩、合并、级联、内联
- 小资源内联
- 推迟图像和JavaScript加载
- 对HTML重写、压缩空格、去除注释等
- 提升缓存周期
Ngx_PageSpeed模块的安装
实验环境为: 系统: Debian8 64位 管理面板: 宝塔5.9免费版 环境: nginx 1.14 编译安装。
项目地址:Github
首先要说明的是pagespeed官网提供全自动安装,但并不适合各种一键环境,所以只能采用手动安装。
在实验环境下通过了编译,可以通过下面一行命令进行调用:
wget https://github.com/madlifer/ngx_pagespeed_auto/releases/download/v0.0.1/nps-auto.sh && bash nps-auto.sh
脚本来源参考了模块官网,脚本命令参考了Linpx,ZhangGe,脚本流程参考了nanqinlang,但由于自身shell水平不行,脚本里仍然还是 full of trash. 强烈不建议用于生产环境。
给网站配置该模块
将下面的命令粘贴于 网站-域名-配置文档- 域名下方 并保存 即可启用
# on 启用,off 关闭
pagespeed on;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 压缩带 Cache-Control: no-transform 标记的资源
pagespeed DisableRewriteOnNoTransform off;
# 相对URL
pagespeed PreserveUrlRelativity on;
# 开启 https
pagespeed FetchHttps enable;
# X-Header 值,用于判断是否生效
pagespeed XHeaderValue "Powered By www.miaoroom.com";
# 配置服务器缓存位置和自动清除触发条件(空间大小、时限)
pagespeed FileCachePath "/data/ngx_pagespeed/";
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 过滤WordPress的后台(可选配置,可参考使用)
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;
# 异步js
# pagespeed EnableFilters defer_javascript;
# 压缩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;
# 删除带默认属性的标签
pagespeed EnableFilters elide_attributes;
# 更换被导入文件的@import,精简CSS文件
pagespeed EnableFilters flatten_css_imports;
pagespeed CssFlattenMaxBytes 5120;
# 将 meta 转换为 header
# 不能删
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_global_statistics {
allow 127.0.0.1;
deny all;
}
location /ngx_pagespeed_message {
allow 127.0.0.1;
deny all;
}
location ~ ^/pagespeed_global_admin {
allow 127.0.0.1;
deny all;
}
pagespeed StatisticsPath /ngx_pagespeed_statistics;
pagespeed MessagesPath /ngx_pagespeed_message;
pagespeed ConsolePath /pagespeed_console;
pagespeed AdminPath /pagespeed_admin;
# 控制台 可通过 http://domain.com/ngx_pagespeed_admin 来查看控制台
pagespeed Statistics on;
pagespeed StatisticsLogging on;
pagespeed LogDir /var/log/pagespeed;
location /pagespeed_console {
allow 127.0.0.1;
deny all;
}
pagespeed AdminPath /ngx_pagespeed_admin;
location ~ ^/pagespeed_admin {
allow 127.0.0.1;
deny all;
}
# 日志限制
pagespeed StatisticsLoggingIntervalMs 60000;
pagespeed StatisticsLoggingMaxFileSizeKb 1024;
参考文章
https://edlinus.cn/archives/install-ngx_pagespeed-to-speed-up-your-site.html
https://www.fengweishang.com/baota-nginx_pagespeed.html
https://www.mf8.biz/setting-ngx-pagespeed/
https://www.wpzhiku.com/nginx-pagespeed/
飞起来了