wordpress技巧 教程&资源 ·

宝塔面板一键安装 Nginx_Pagespeed ,1秒给你的网站加速

宝塔安装ngx_pagespeed

转载自:宝塔面板使用 Nginx_Pagespeed 加速网站前端

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/

参与评论