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

2019年9月16日23:58:09 9 1,644

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,选择好自己的nginx版本,执行下面的命令,如下:

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

3》安装nginx

现在需要重新安装nginx,把原来的nginx卸载,然后重新安装,就会默认的配置好ngx_pagespeed,如图:

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

其实这个也挺麻烦的,建议还是自己编译安装这个模块吧,宝塔可能在测试版里面开启了ngx_pagespeed正式版目前还没有。

配置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格式图片

这样保存就可以了。

测试效果

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

1》图片对比

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

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

2》网站效果

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

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

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

3》总结

如果你不会大鸟那种折腾,你可以编译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 沃茨博客 1

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

        • avatar 大鸟 Admin

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

        • avatar msdn 0

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

            • avatar 大鸟 Admin

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

            • avatar 台球俱乐部 1

              有点小复杂,不敢下手!

              • avatar 心灵博客 4

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

                • avatar 大事记 0

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

                    • avatar 大鸟 Admin

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

                      • avatar Vien 3

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