一、说明

本文内容：宝塔面板下为nginx安装ngx_pagespeed模块并配置WebP图片加速的方法，理论上非宝塔环境也适用，加模块使用命令行进行编译即可

二、前言

博客文章的图片太多，总觉得加载慢，服务器带宽和线路不能动的前提下，只能考虑对图片进行优化了。查了一下，发现WebP格式的图片很有优势，主流的浏览器也支持，遂有了本文。

三、铺垫

WebP是一种同时提供了有损压缩与无损压缩的图片文件格式，目标是减少文件大小，但达到和JPEG格式相同的图片质量，理论上能够在很大程度上缩小图片文件的大小，以节省服务器带宽，减少传输时间。

Ngx-pagespeed是一个免费的开源Nginx模块，可用于加快网站速度并减少页面加载时间。它可以在无需修改网站内容的前提下，对网站进行优化。使用者可以使用Ngx-pagespeed模块轻松优化各种文件，例如CSS，HTML，png和jpg，它可以自动将图片文件转换成WebP格式来呈现给访客，这个是我目前最需要的。

服务器环境

Centos7 已安装宝塔面板 PHP7.2

四、开始干活

1.安装依赖

yum install gcc cmake unzip wget gcc-c++ pcre-devel zlib-devel -y

2.下载ngx_pagespeed

	wget https://github.com/apache/incubator-pagespeed-ngx/archive/v1.13.35.2-stable.tar.gz

	tar -xvzf v1.13.35.2-stable.tar.gz #解压文件

这里下载的是文章发布时最新的稳定版，如果想要最新的版本可以访问
https://github.com/apache/incubator-pagespeed-ngx/releases

3.下载PageSpeed优化库

	cd incubator-pagespeed-ngx-1.13.35.2-stable #进入刚刚解压的文件夹

	wget https://dl.google.com/dl/page-speed/psol/1.13.35.2-x64.tar.gz #下载最新版的优化库

	tar -xvzf 1.13.35.2-x64.tar.gz #解压优化库

4.编译模块

进入宝塔面板，按照图片的顺序编译安装nginx，如图所示

点击添加自定义模块，自定义模块的名称和描述可以随便写

模块参数填写格式如下：

–add-module=/root/incubator-pagespeed-ngx-1.13.35.2-stable

其中，/root/incubator-pagespeed-ngx-1.13.35.2-stable是下载的ngx_pagespeed模块的位置

如图所示

提交之后，记得勾选添加的自定义模块，然后提交编译，如图所示

5.配置和开启ngx_pagespeed模块

编译安装成功后，可以在命令行中输入

nginx -V

查看是否编译成功，如图红线位置，可以看到ngx_pagespeed已经安装成功

这时需要开启模块，进入“网站”，然后选择要开启模块的域名，点击域名旁边的设置，如图所示，将配置内容输入到红线下方的位置

配置内容如下，可以自行调整

	####基本设置######
	pagespeed on;
	pagespeed FileCachePath /var/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;
	# 预解析DNS查询
	pagespeed EnableFilters insert_dns_prefetch;
	# 重写CSS，首先加载渲染页面的CSS规则
	pagespeed EnableFilters prioritize_critical_css;
	# Example 禁止pagespeed 处理/wp-admin/目录(可选配置，可参考使用)
	pagespeed Disallow “/wp-admin/”;
	#######图片处理配置########
	# 延时加载图片
	pagespeed EnableFilters lazyload_images;
	# 不加载显示区域以外的图片
	pagespeed LazyloadImagesAfterOnload off;
	pagespeed LazyloadImagesBlankUrl “https://www.cmzeno.com/xxx.png”;
	# 启用图片优化机制(主要是 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;
	location ~ “.pagespeed.([a-z].)?[a-z]{2}.[^.]{10}.[^.]+” { add_header “” “”; }
	location ~ “^/ngx_pagespeed_static/” { }
	location ~ “^/ngx_pagespeed_beacon” { }

更多配置请参考
https://www.modpagespeed.com/doc/configuration

保存，重启nginx，在命令行输入

curl -I -p http://www.cmzeno.com

请将 http://www.cmzeno.com 替换成你的域名，如图红线，我们可以看到，模块已经开启成功了

五、查看效果

演示站为wordpress博客程序，以默认主题的背景图片为例子，可以看到，在开启前，如图所示，图片是jpg格式

在开启后，图片被自动转换为了WebP格式

转换前图片大小为115KB，转换后变成了58KB，缩小了几乎一半的体积，效果还是很好的

我肉眼看不出啥变化，另外我在每次截图保存之后，图片都会丢到tinypng压缩一下，尽可能的缩小图片体积。

六、参考

https://www.howtoforge.com/tutorial/install-nginx-with-ngx-pagespeed-on-centos-7/
https://blog.csdn.net/cslxydn/article/details/98958841
https://www.modpagespeed.com/doc/configuration

相关推荐: “链接模式”微信简单采集公众号文章(视频演示)

“链接模式”微信简单采集公众号文章(视频演示) 来源：小蜜蜂微信公众号日期：2019/11/22 20:47 浏览：看不到视频画面请下载观看：链接：https://share.weiyun.com/500Vs9b 密码：wfk2ru文章来源于互联网:“链接…

文章版权归作者所有，未经允许请勿转载。

THE END