宝塔面板下使用 Nginx_Pagespeed给网站前端加速
登录
标签搜索
侧边栏壁纸
博主昵称
Ruinous

  • 累计撰写 79 篇文章
  • 累计收到 0 条评论
Linux

宝塔面板下使用 Nginx_Pagespeed给网站前端加速

ruinous
ruinous
2018-11-28 / 0 评论 / 15 阅读 / 正在检测是否收录...

引子:

这几天遇到一个网站优化小难题,老板说首页加载速度太慢了想给网站提提速. 我第一反应就是加个缓存插件，但是公司后端采用的TP3.1.1明确不支持任何缓存。
所以只能在前端上动一动，想到之前天毅大佬帮我博客装过的ngx_pagespeed模块.但是由于宝塔面板的环境目录与lnmp的不同，当时还折腾了一段时间。
公司网站也是宝塔的LNMP环境,现在自己搞其实心里挺没底的,不过自己在测试后发现，相比于在军哥的lnmp一键包上安装pagespeed，在宝塔面板上搞更简单。

Ngx_Pagespeed模块简介
ngx_pagespeed 是 Nginx 的一个扩展模块，主要的功能是针对前端页面而进行服务器端的优化，对前端设计人员来说，可以省去优化css、js以及图片的过程。
ngx_pagespeed对nginx自身负载能力的提升基本是看不到的，甚至会因为进行服务器端的优化而使系统增加负载；
但从减少客户请求数的角度去看，牺牲部分服务器性能还是值得的。

ngx_pagespeed模块的主要功能如下：

图像优化：剥离元数据、动态调整，重新压缩 CSS和JavaScript压缩、合并、级联、内联 小资源内联 推迟图像和JavaScript加载
对HTML重写、压缩空格、去除注释等 提升缓存周期

让我觉得最有用的就是:图像的优化,他可以把你的图片压缩并转为webp格式,对于首页图片较多的网站有较大的优化作用。

Ngx_PageSpeed模块的安装:

实验环境为: 系统: Debian8 64位 管理面板: 宝塔5.9免费版 环境: nginx 1.14 编译安装

首先要说明的是pagespeed官网提供全自动安装,但并不适合各种一键环境,所以只能采用手动安装。

这里我自己做了个脚本,在实验环境下通过了编译,可以通过下面一行命令进行调用:

wget https://github.com/madlifer/ngx_pagespeed_auto/releases/download/v0.0.1/nps-auto.sh && bash nps-auto.sh


wget https://raw.githubusercontent.com/madlifer/ngx_pagespeed_auto/master/nps-auto.sh && bash nps-auto.sh

网站配置该模块

将下面的命令粘贴于 网站-域名-配置文档- 域名下方 并保存 即可启用

# 启用ngx_pagespeed    
pagespeed on;    
pagespeed FileCachePath /tmp/cache/ngx_pagespeed_cache;    
# 禁用CoreFilters    
pagespeed RewriteLevel PassThrough;    
# 启用压缩空白过滤器    
pagespeed EnableFilters collapse_whitespace;    
# 启用JavaScript库卸载    
pagespeed EnableFilters canonicalize_javascript_libraries; 
#谷歌被墙，并不确定这个设置有没有副作用 
# 把多个CSS文件合并成一个CSS文件    
pagespeed EnableFilters combine_css;    
# 把多个JavaScript文件合并成一个JavaScript文件    
pagespeed EnableFilters combine_javascript;    
# 删除带默认属性的标签    
pagespeed EnableFilters elide_attributes;    
# 改善资源的可缓存性    
pagespeed EnableFilters extend_cache;    
# 更换被导入文件的@import，精简CSS文件    
pagespeed EnableFilters flatten_css_imports;    
pagespeed CssFlattenMaxBytes 5120;    
# 延时加载客户端看不见的图片    
pagespeed EnableFilters lazyload_images;    
# 启用JavaScript缩小机制    
pagespeed EnableFilters rewrite_javascript;    
# 启用图片优化机制    
pagespeed EnableFilters rewrite_images;    
# 预解析DNS查询    
pagespeed EnableFilters insert_dns_prefetch;    
# 重写CSS，首先加载渲染页面的CSS规则    
pagespeed EnableFilters prioritize_critical_css; 
# Example 禁止pagespeed 处理/wp-admin/目录(可选配置，可参考使用)

下面是我用的pagespeed配置，缓存路径为/var/cache/ngx_pagespeed，手动刷新缓存可以删掉这个目录然后重启nginx：

pagespeed on;
pagespeed FileCachePath /var/cache/ngx_pagespeed;
# setting
# X-Header 值，用于判断是否生效
pagespeed XHeaderValue "Powered By www.xxx.com";
# 压缩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;
# 重置 http Vary 头
pagespeed RespectVary on;
# html字符转小写
pagespeed LowercaseHtmlNames on;
# 开启 https
# pagespeed FetchHttps enable,allow_self_signed,allow_unknown_certificate_authority,allow_certificate_not_yet_valid;
# 过滤规则
pagespeed RewriteLevel PassThrough;
# 移除 html 空白
pagespeed EnableFilters collapse_whitespace;
# 移除 html 注释
pagespeed EnableFilters remove_comments;
# DNS 预加载
pagespeed EnableFilters insert_dns_prefetch;
# 优化内嵌样式属性
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 combine_javascript;
pagespeed XHeaderValue "Powered By ngx_pagespeed";
pagespeed SupportNoScriptEnabled false;
# filters
pagespeed RewriteLevel CoreFilters;
pagespeed EnableFilters remove_comments,collapse_whitespace;
# admin直接访问 <域名>/pagespeed_admin 就可以打开管理员界面了。
pagespeed Statistics on;
pagespeed StatisticsLogging off;
pagespeed LogDir /var/log/pagespeed;
pagespeed AdminPath /pagespeed_admin;
# Configuring the File Cache
pagespeed FileCacheSizeKb            1024000; # 1GB
pagespeed FileCacheCleanIntervalMs   3600000; # 1h
pagespeed FileCacheInodeLimit        500000;
# Configuring the in-memory LRU Cache
pagespeed LRUCacheKbPerProcess     1024;
pagespeed LRUCacheByteLimit        16384;
pagespeed HttpCacheCompressionLevel 3;
pagespeed EnableCachePurge on;

#缩小CSS。
pagespeed EnableFilters rewrite_css;
#规范化JavaScript库
pagespeed EnableFilters canonicalize_javascript_libraries;
#使Google Analytics异步
pagespeed EnableFilters make_google_analytics_async;


    # 启用ngx_pagespeed 开始
pagespeed on;
#列出优化过程中所有失败的请求，debug 时很有用，失败的信息会打印到 error log 里
#pagespeed ListOutstandingUrlsOnError on;
# 配置服务器缓存位置和自动清除触发条件（空间大小、时限）
#路径请提前创建好，可以放在内存也可以放在临时文件夹中
pagespeed CreateSharedMemoryMetadataCache /tmp/ngx_pagespeed_cache 51200;
pagespeed DefaultSharedMemoryCacheKB 51200;
pagespeed FileCachePath /tmp/ngx_pagespeed_cache;
pagespeed FileCacheSizeKb 2048000;
pagespeed FileCacheCleanIntervalMs 43200000;
pagespeed FileCacheInodeLimit 500000;
# 过滤器级别（自定义模式）
pagespeed RewriteLevel PassThrough;
# 一个标识而已（若在浏览器开发者工具里的链接请求响应标头看到此标识，则说明 PageSpeed 生效）
pagespeed XHeaderValue "Powered By daniao.org";
# HTML页面链接转小写（SEO 优化，推荐）
pagespeed LowercaseHtmlNames on;
# 重置 HTTP Vary 头 除非有特殊需求，建议不开启，默认配置往往是最佳配置
# pagespeed RespectVary on;
#PageSpeed能够根据响应头中指定的任何内容安全策略调整其优化
pagespeed HonorCsp on;
#PageSpeed 默认遵守 Cache-Control: no-transform 协议， 表示不可被中间代理软件改写，如果想让优化效果最大化，可以关闭
#pagespeed DisableRewriteOnNoTransform off;
# 启用 样式属性/CSS/JavaScript/Images 重写，其它功能的先决开关
pagespeed EnableFilters rewrite_style_attributes,rewrite_css,rewrite_javascript,rewrite_images;
#重写CSS文件，以便首先加载渲染页面的CSS规则。
pagespeed EnableFilters prioritize_critical_css;
###########缓存 ##########
#相当于同时使用了extend_cache_images, extend_cache_scripts和 extend_cache_css
pagespeed EnableFilters extend_cache;
pagespeed EnableFilters extend_cache_pdfs;
pagespeed EnableFilters local_storage_cache;
#开启使用Redis（和memcached只能先其一）
#pagespeed RedisServer "127.0.0.1:6379";
# memcached优化,如果没有memcached优化请删去
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "127.0.0.1:11211";
######## 过滤规则 ########
# 过滤不需要启用的目录或文件
#pagespeed Disallow "*/wp-admin/*";
#pagespeed Disallow "*/wp-login.php*";
pagespeed Disallow "*/vps-pingfen/";
# 启用压缩空白过滤器
pagespeed EnableFilters collapse_whitespace; 
# 预解析DNS查询
 pagespeed EnableFilters insert_dns_prefetch;
########JS和CSS########
# 启用JavaScript库卸载 #谷歌被QQ，并不确定这个设置有没有副作用 
# pagespeed EnableFilters canonicalize_javascript_libraries;
# 把多个CSS文件合并成一个CSS文件（比较容易引起主题版面混乱，所以我禁用了
#pagespeed EnableFilters combine_css;
# 重写CSS，首先加载渲染页面的CSS规则
 pagespeed EnableFilters prioritize_critical_css;
# 把多个JavaScript文件合并成一个JavaScript文件，禁用原因同上，大家可以酌情开启
#pagespeed EnableFilters combine_javascript;
# 删除带默认属性的标签
 pagespeed EnableFilters elide_attributes;
# 更换被导入文件的@import，精简CSS文件
 pagespeed EnableFilters flatten_css_imports;
 pagespeed CssFlattenMaxBytes 5120;
# 启用JavaScript缩小机制
 pagespeed EnableFilters rewrite_javascript;
 
####### 图片########
# 延时加载图片
 pagespeed EnableFilters lazyload_images;
# 不加载显示区域以外的图片
pagespeed LazyloadImagesAfterOnload off;
pagespeed LazyloadImagesBlankUrl "https://cdn.daniao.org/1.gif";
# 启用图片优化机制(主要是 inline_images, recompress_images, convert_to_webp_lossless（这个命令会把PNG和静态Gif图片转化为webp）, and resize_images.)
 pagespeed EnableFilters rewrite_images;
#组合 convert_gif_to_png, convert_jpeg_to_progressive, convert_jpeg_to_webp, convert_png_to_jpeg, jpeg_subsampling, recompress_jpeg, recompress_png, recompress_webp, #strip_image_color_profile, and strip_image_meta_data.
pagespeed EnableFilters recompress_images;
# 将JPEG图片转化为webp格式
 pagespeed EnableFilters convert_jpeg_to_webp;
# 将动画Gif图片转化为动画webp格式
 pagespeed EnableFilters convert_to_webp_animated;
 
pagespeed EnableFilters inline_preview_images;
pagespeed EnableFilters resize_mobile_images;
pagespeed EnableFilters responsive_images,resize_images;
pagespeed EnableFilters insert_image_dimensions;
pagespeed EnableFilters resize_rendered_image_dimensions;
pagespeed EnableFilters strip_image_meta_data;
pagespeed EnableFilters convert_jpeg_to_webp,convert_to_webp_lossless,convert_to_webp_animated;
pagespeed EnableFilters sprite_images;
pagespeed EnableFilters convert_png_to_jpeg,convert_jpeg_to_webp;
#让JS里引用的图片也加入优化
pagespeed InPlaceResourceOptimization on;     
pagespeed EnableFilters in_place_optimize_for_browser;           
  
# 启用ngx_pagespeed 结束


# 启用ngx_pagespeed 开始 
  
pagespeed EnableFilters rewrite_domains;
pagespeed Domain https://www.daniao.org;
pagespeed MapRewriteDomain https://cdn.daniao.org  https://www.daniao.org;
# 不能删 。确保对pagespeed优化资源的请求进入pagespeed处理程序并且没有额外的头部信息
location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; }
location ~ "^/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_console { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_admin { allow 127.0.0.1; deny all; }
location ~ ^/pagespeed_global_admin { allow 127.0.0.1; deny all; }
# 启用ngx_pagespeed 结束
0
暂无标签
版权属于： ruinous
本文链接： https://ruinous.top/Nginx_Pagespeed.html
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

评论

博主关闭了所有页面的评论