宝塔面板编译开启ngx_pagespeed – 让你的站点支持webp格式图片

2019年9月16日 9 6,916

ngx_pagespeed是一个开源的Nginx模块,由Google创建,通过重写网页来减少延迟和带宽,从而帮助提高Web速度。宝塔面板默认已经支持了ngx_pagespeed,但是前提你需要开启这个玩意,如何开启呢,额,还是需要点技巧的,这个我们后面在说。宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

因为WebP图片已经是一种趋势了,现在已经有很知名的网站支持了这种格式的图片,而Google出品的PageSpeed模块有一个功能,会自动将图像转换成WebP格式或者是浏览器所支持的其它格式。

所以我们只需要编译这个PageSpeed模块然后在nginx中开启这个功能,就可以让nginx来判断是否需要输出webp格式的图片,无疑这也是一种比较高效的方法。所以这篇文章就来水一水,学习本文之前,我们可以了解下如何编译安装ngx_pagespeed

nginx.sh

安装之前请把自己的宝塔面板升级为最新版,当然可以自己编译安装ngx_pagespeed,编译也很简单,可以看上面的文章,不过因为宝塔面板的新版本的nginx.sh中已经默认集成了ngx_pagespeed,所以就不费那事了,我们只要在宝塔官网下载最新版的nginx.sh

1》下载

宝塔面板找到路径:/www/server/panel/install

wget http://download.bt.cn/install/0/nginx.sh

看截图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

额,这个文件下载好之后,因为原本/www/server/panel/install中有一个nginx.sh,所以新下载的文件你需要修改下名称为nginx.sh,把原来那个可以修改为nginx.sh.1这样的就可以了。

2》设置nginx.sh

打开nginx.sh,宝塔面板7.0.2版本中nginx.sh大概在205行左右,如果你没找到,可以按照上面的命令重新下载一份,我们在里面添加代码,如下:

--add-module=${Setup_Path}/src/ngx-pagespeed

删除掉尾部的${NGX_PAGESPEED},全部修改后如图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

3》编译安装

上面的做好之后,我们还需要编译nginx,选择好自己的nginx版本,执行下面的命令,如下:

sh /www/server/panel/install/nginx.sh install 1.17

4》安装nginx

其实还有个小技巧就是执行完上面3的命令之后,把原来的nginx卸载,然后重新安装,就会默认的配置好ngx_pagespeed,如图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

其实这个也挺麻烦的,建议还是自己编译安装这个模块吧,按照上面‘2’中的要求设置好nginx.sh,然后执行‘3’中的命令,编译安装好之后,如图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

配置nginx

不管你是编译安装,还是用的这个土鳖的方法只要你的nginx编译好ngx_pagespeed就可以了。现在我们需要在nginx中开启ngx_pagespeed。

1》开启ngx_pagespeed

在nginx的http端,放入如下命令:

pagespeed on;
pagespeed RespectVary off;#不合并js文件
pagespeed FileCachePath /var/cache/ngx_pagespeed;#缓存路径为

看图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

这样保存就可以了。

详细设置:

这里设置在nginx配置中。

# 启用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 结束

测试效果

开启ngx_pagespeed之后,我们现在需要测试下效果,大鸟这里新建一个wordpress站点来测试效果,我们先看一张JPG格式的图片被转换为webp之后的效果对比。

图片对比

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

可以想象,如果你的服务器图片被这样以优化,那么图片加载提升的速度会变动很快。

网站效果

我们用F12看看转换的效果,如图:

宝塔面板编译开启ngx_pagespeed - 让你的站点支持webp格式图片

我们看到ngx_pagespeed会把需要优化的图片都转换为webp格式,这样的方式优化网站还是很明显的。

清除缓存

#手动删除,该目录为你在nginx设置的缓存目录
rm -fr /tmp/ngx_pagespeed_cache/*
#或者由pagespeed清空缓存 5秒后开始
sudo touch /tmp/ngx_pagespeed_cache/cache.flush

总结

如果你不会大鸟那种折腾,你可以编译ngx_pagespeed模块,如果你的服务器配置很乞丐,就不要折腾这个了。

ngx_pagespeed模块功能很丰富,还可以设置缓存时间,PageSpeed 还提供了一个 web 的管理员界面来进行监控管理,还是很方便的。

>>>>参考资料:

  • https://www.modpagespeed.com/doc/admin
  • https://www.coderxing.com/nginx-pagespeed-module.html
  • https://www.ngxpagespeed.com/
  • 我的微信
  • 分享宝塔面板建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:9   其中:访客  6   博主  3
    • avatar 大事记 0

      这个教程非常不错,WebP图片我觉得在以后是个大趋势,就是不知道百度收录是否有影响? :evil:

        • avatar 大鸟

          回复 大事记 我去看了你的站点,非常不错,我很喜欢,欢迎常来。

          • avatar Vien 3

            回复 大事记 小姐姐的站很简洁很漂亮 是我喜欢的类型

          • avatar 心灵博客 5

            不建议小白作死pagespeed,没弄好的话网站各种异常,而自己很可能并不能很快发觉。

            • avatar 台球俱乐部 1

              有点小复杂,不敢下手!

              • avatar msdn 0

                你好,我就问问ngx_pagespeed和ngx_brotli冲突不?两个可以同时安装不?

                  • avatar 大鸟

                    回复 msdn 不冲突,可以一起安装。

                  • avatar 沃茨博客 1

                    不知道博主机子的配置如何,1核2G的机子能带起来这个模块吗? :grin:

                      • avatar 大鸟

                        回复 沃茨博客 我机器配置还行,但是我没弄只是在测试站点试过,我的图片都被我压缩很小了,就没搞这个,我怕玩不来 :lol: 1核2G带这个也行,只要图片不多,多的话不行。