不容错过的WordPress加速秘诀：开启WebP支持，让网站速度瞬间爆表！-逐梦个人博客

在当今如此快节奏的互联网时代，网站访问速度一定是吸引和保持用户的关键因素之一，尤其是对于Wordpress这种稍显笨重的CMS框架来说，提升网站速度一定是站长首先要考虑的事情，本文将为大家介绍如何为Wordpress站点开启WebP支持，让网站速度瞬间爆表。

在做网站优化提速的过程中，优化图片的大小是一个非常重要的手段，WebP作为一种旨在提供更高压缩率的图片格式，与传统的JPG和PNG格式相比，WebP格式可以将图片大小缩小30%至80%，这意味着在相同的文件大小下，WebP格式可以提供更高质量的图片，而且WebP格式支持透明度和动画效果，并且在大多数现代浏览器中都得到了支持，本文我们就将探索在wordpress站点中启用webp来为我们的网站提速。

一、安装WebP辅助插件

相信大部分朋友的站点肯定已经存在非常多的图片了，我们不可能逐张照片去手动压缩转换，需要一个工具能帮我们批量将现有图片压缩生成对应的WebP图片，而且能在每次上传图片的时候自动压缩生成对应的WebP图片文件，Converter for Media这个插件就是专门为此打造的，既然要使用它，首先得安装它，我们可以在我们wordpress站点后台的安装插件界面搜索“Converter for Media”安装并启用该插件：

启用插件后，会自动进入插件设置界面

首次进来会显示一个错误提示，比如截图中所示的“rewrites_not_executed”，服务器类型不同显示的提示可能有差异，这是因为我们还需要做一些服务器的配置才能让插件正常工作。

二、配置服务器

这里以nginx为例演示如何进行服务器配置，由于我服务器用的是宝塔面板，所以下文中很多配置文件的路径可能和大家的不太一样，请根据自己服务器的情况找到对应的配置文件。

1、修改nginx配置

如果我们要为服务器上的所有站点开启WebP支持，则需要修改nginx全局配置文件，路径：/www/server/nginx/conf/nginx.conf，如果只是为某一个站点开启WebP支持，则仅需修改对应站点的配置文件，以我的博客站为例，路径：/www/server/panel/vhost/nginx/www.deanhan.cn.conf，在配置文件server区块中加入以下配置（做好加在靠前一点的位置）：

# BEGIN Converter for Media
set $ext_avif ".avif";
if ($http_accept !~* "image/avif") {
    set $ext_avif "";
}

set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_avif
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

虽然avif的压缩率比webp更高，但是由于avif在Converter for Media插件中需要购买专业版才能使用，所以建议没有购买专业版计划的朋友去掉avif相关的配置，可以减少一次文件尝试的操作，精简后的配置如下：

# BEGIN Converter for Media
set $ext_webp ".webp";
if ($http_accept !~* "image/webp") {
    set $ext_webp "";
}

location ~ /wp-content/(?<path>.+)\.(?<ext>jpe?g|png|gif|webp)$ {
    add_header Vary Accept;
    expires 365d;
    try_files
        /wp-content/uploads-webpc/$path.$ext$ext_webp
        $uri =404;
}
# END Converter for Media

在上面的配置文件中，我们先根据用户端浏览器对于WebP的支持情况初始了ext_webp变量的值，支持情况是根据请求头accept字段的值来判断的。然后通过正则匹配了jpg/jpeg/png/gif/webp等类型的图片，并通过try_files来加载对应的WebP文件或者图片源文件，这里我们最终请求的图片地址是没有变化，只是文件内容和响应头content-type发生了变化。

2、添加mime type

在nginx全局mime types配置文件中添加mime type支持，路径：/www/server/nginx/conf/mime.types，在配置文件types区块中添加配置：

image/webp webp;
image/avif avif;

如果已存在该mine type，则跳过该步骤，avif大家可以根据自己的需要选择是否添加。

3、重启nginx服务

在更改了上述配置之后，我们需要重启nginx服务，让配置生效，先通过nginx -t命令确认配置没有问题后，然后使用nginx -s reload重启nginx，当然如果直接使用宝塔面板，只需要在配置界面修改并点击保存即可。

三、配置插件

在经过上述步骤后，我们再回到Converter for Media插件配置页并刷新，会发现错误提示已经消失了，然后我们根据自己网站的情况选择需要压缩的图片的存放目录：

然后拉到界面最下方，点击开始批量优化按钮，等待图片优化完成。

优化图片的操作不会删除源文件，而是压缩生成WebP文件并存放于/wp-content/uploads-webpc/对应目录下，大家放心操作，而且如果生成的WebP图片比原始图片大，则新生成的WebP图片会被删除，后续会继续使用原始图片文件。

四、测试

在完成了上述步骤后，不出意外我们的站点已经开启了WebP支持，然后我们打开Chrome控制台并禁用缓存做一下测试：

可以看到我们的站点已经完美支持了WebP，Nice！

五、问题记录

1、插件设置页提示错误：“bypassing_apache”或 “rewrites_not_executed”，说明服务器配置有问题，检查配置文件中类似下面两种配置的方式：

location ~* ^.+\.(css|js|jpg|jpeg|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires max;
...

或者

location ~* ^.+\.(css|js|jpe?g|png|gif|webp|ico|eot|otf|woff|woff2|ttf)$ {
    expires 1M;
    try_files $uri @proxy;
...

从这些配置中移除jpg/jpeg/png/gif/webp等格式。

2、为什么站点成功启用了WebP，但是访问的时候发现我们的站点还是会有少量非webp的图片？上面我们提到了压缩后的WebP图片有可能会比原始图片大，大部分情况下WebP图片的压缩率要比非WebPage图片的压缩率要高，但是也有特例，在碰到压缩后的WebP图片比原始图片大的时候，Converter for Media插件默认会帮我们删除新生成的WebP图片，所以最终响应的还是原始图片。

六、结语

Converter for Media插件官网配置介绍页：https://wordpress.org/plugins/webp-converter-for-media/#configuration%20for%20nginx