【真实记录】WordPress速度优化指北 | docker容器 | Webp格式 | JS CSS优化

作者记录了个人WordPress网站的优化过程，将加载速度从数秒提升到一秒以内。主要措施包括使用Docker部署以显著提升性能，配置Redis缓存来消除数据库查询延时，以及通过自定义脚本自动将图片转换为WebP格式。

其他关键优化涉及延长服务器和CDN的静态资源缓存时间，并利用WP Rocket等插件压缩和优化JS与CSS文件的加载。作者还参考了PageSpeed Insights和Cloudflare的建议，例如启用Rocket Loader功能，以进一步改善实际体验。

优化效果展示

最近建立了自己的WordPress的网站，欣喜若狂。

但是在实际自己测试的时候，发现不管是前台还是后台的加载速度都好慢啊，点一下要等两三秒之后才会加载。

不禁觉得这是一个大的问题，毕竟我自己都觉得速度太慢的话，你们用起来的体验肯定不会好。

所以研究了3天左右吧，将速度优化到现在，这个速度还是很满意的。

我觉得自己值得吹嘘的了，效果如下：

可以看到，页面加载的时候基本上不需要查询数据库，因为我做了数据库的缓存，页面的生成时间也只有 200ms 左右。
网站中的图片和元素基本上都换成了 WebP 格式。对比其他格式，它具有文件大小更小、清晰度不会打折的优点。
网站中添加了很多乱七八糟的元素，变色、闪烁、角标等都有，并没有特地为了速度而牺牲网站的整体表现。

不仅如此，谷歌的 PageSpeed Insights 对于我的网站在电脑端有 99 的高分。

这个网站很好用，可以模拟手机和电脑，判定网站不同方面的表现如何，并给出优化建议。你可以根据 AI 的建议来进行修改，点击跳转。

当然，我不是专业的，也说不上是表现最好的网站。大家在使用中发现有什么问题，可以在评论区进行留言。

下面就和大家分享一下具体都做了哪些优化。以及每个步骤的效果如何，可以借鉴一下。

优化内容

下面分享不同的优化方向，并给出实际的代码或步骤。排序按照我能想到的，从最重要到稍微不那么重要进行排列。

docker部署

对于这一个，我是非常震惊的。但是我测试了很多次，发现确实有一个很大的影响因素，那就是我使用 Docker 部署的时候，速度表现很好。

如下面两张图所示：
第一张图是我使用 PHP 直接部署的 WordPress 网站，在后台加载一个页面的时间需要 1 秒以上。
但是当我使用 Docker 部署，安装同样的插件、全新的项目，进入同样的页面，时间只需要 0.45 秒，差了两倍以上。

非docker部署页面，加载需要1秒以上

同样的项目

在docker里面部署页面加载只需要0.45秒

所以说，Docker 部署这条因素算是一个基本项吧。原理的话，有专业的大佬可以在评论区科普一下是为什么。

当然，Docker 部署有利有弊：好处是部署比较简单，前台和后台的加载速度都比较快；劣势是配置起来相对来说比较麻烦，需要有一定的基础。

比如说，对于数据库和 Redis 的配置，都需要一定的 Docker 知识。我开始的时候不知道该如何配置 IP，也是学习了之后才慢慢了解的。

Redis

第二个非常推荐的优化的内容就是配置Redis，它属于无脑配置的选项。

先说一下原理：因为我们在访问网页的时候，不管是前台还是后台都需要查询数据库，而数据库的查询比较耗时间，并且次数也比较多。

而 Redis 就可以将我们查询过的数据缓存在内存里面。当下一次再查询同样的内容时，就不需要再查询数据库了，直接在内存之中进行调取，因此可以大幅改善数据库访问的延时问题。这也是我在第一章的效果表现中提到的，数据库查询基本为 0 的原因。

它的配置也很简单。首先，你需要在你的服务器上安装 Redis。我以 Docker 为例，因为 Docker 是比较复杂的，其他的话会更简单一点:

安装Docker版的Redis。
在WordPress的后台安装插件：Redis object cache，点我进行跳转。
- 如果是普通PHP安装的话，到这里进入插件打开就可以了。
对于 Docker 部署来说，需要配置一下 redis 的项目地址。

配置方法如下:

进入你的WordPress的HTML根目录。(可以在 Docker 的项目配置中找到，具体路径因人而异，我的为/www/dk_project/dk_app/wordpress/wordpress_7Jrn/html)
修改wp-config.php文件，在/* Add any custom values between this line and the "stop editing" line. */下面添加如下代码

/* Add any custom values between this line and the "stop editing" line. */

// Redis Object Cache 配置
define('WP_REDIS_HOST', 'redis_aktp-redis_akTp-1');
define('WP_REDIS_PORT', 6379);
define('WP_REDIS_DATABASE', 0);
define('WP_REDIS_PASSWORD', 'tw3a573ACRC68xH4');

其中 Host 是你的 Redis 容器的名称。如果它们在同一个网络里面，是可以直接使用名称的（大概就在一个网络里面）。

Port和database基本不用变，默认都是这个。第四项 password 是你 Redis 容器的密码，这个可以在容器的环境变量 .env 文件中找到。

修改好之后，进入 WordPress 后台的 Redis 插件中刷新，就可以看到连接成功，点击启用就可以启用 Redis 缓存了。

这样你就可以看到你的数据库文件开始被缓存。在指标中，也可以查看花费的时间以及缓存比例等信息。

图片格式webp

对于图片的优化也是花费了我比较多的时间和精力，并且我觉得也是非常重要的一个内容。

在这个方面，我自己踩了很多坑，也调整了三四次才确定。现在这个方案，不仅在同样的图片表现下具有更小的尺寸、更快的加载速度，并且也可以自动化进行处理。

我对图片格式的使用经历了以下过程：

使用 JPG 压缩；
用 PS 导出对于WEB优化的图片；
手动导出 AVIF 格式；
自动处理所有的 WebP 格式。这是现在我在用的方案。

如上图所示。我这个方案不仅对于原生加载的图片有用，并且对于后续ajax加载的图片也是起作用的。

此处内容已隐藏，请评论后刷新页面查看.

图片缓存时间

默认情况下，图片的缓存时间只有 4 个小时，因此很容易过期。每次过期之后（也就是说 4 个小时之后），都要在你的网站上重新加载一遍所有的图片。这不仅会导致用户访问时比较耗时，并且对你的服务器负载也会比较严重。

因此，你需要配置一下你的服务器端以及 CDN 端，让你的静态资源缓存时间变长，我是设置了 1 年。

具体配置流程如下：

对于你的服务器，你应该在网站设置里开启缓存，并将缓存时间改为 365 天。这样可以尽可能地将静态资源（比如图片等内容）长时间缓存在用户的浏览器端。

你也可以参照一下 nginx 配置文件，代码如下：

   #GLOBAL-CACHE START
    
    proxy_cache appstoy_com_cache;
    proxy_cache_key $host$uri$is_args$args;
    proxy_ignore_headers Set-Cookie Cache-Control expires X-Accel-Expires;
    proxy_cache_valid 200 304 301 302 365d;
    proxy_cache_valid 404 1m;
    location ~ .*\.(css|js|jpe?g|gif|png|webp|woff|eot|ttf|svg|ico|css\.map|js\.map)$
    {
        expires 365d;
        error_log /dev/null;
        access_log /dev/null;
    }
    #GLOBAL-CACHE END