专研WordPress，外贸B端网站建设及引流

使用FlyingPress + CDN把wordpress网站移动端的速度提升到90+

本篇文章案例使用的网站主机

siteground logo black transparent 400x81

优化前的数据

image 19
image 20

优化后的数据

image 21
image 22

FlyingPress安装指南（后面简称FP，最好用的wordpress缓存插件，没有之一）

注册及购买链接：https://flying-press.com/

flyingpress logo
点击跳转到FlyingPress官网
image 68

第一步：先停用现有的缓存插件，例如：

  • siteground optimizer
  • lightspeed cache
  • w3-total-cache
  • wp-rocket
  • 等等，不然会提示插件冲突

第二步：安装FP

image 23
image 24
image 25

第三步，自动激活

image 26

第四步：FP设置参考，可以照着我截图的方式来操作

image 27
image 28
image 29

注：如果是用elementor编辑器，需要把popup添加到排除异步加载，否则弹窗不能正常工作。

image 30
image 31
image 32
image 33

CDN

如果用cloudflare的免费CDN，这里不需要开启

注意：这部分需要另外注册Bunny CDN，Bunny的费用很低，只有个月最低消费1usd，我用了很久，每个月都没有超过1usd。

关于Bunny CDN的配置，我会单独做一个章节来说明如何设置，如果你照着我的方法把BunnyCDN配置好了，再回来开启这里。

如果你是按照我的方法配置好了Bunny CDN，那这个地方要填写的CDN URL就是刚刚在Bunny那边设置好了的，类似 https://cdn.yourdomain.com

image 34
image 35

不用付费的Bunny CDN，用免费的cloudflare行不行？

当然没问题

FlyingPress缓存插件还是照常装，cloudflare橙色小云朵开启即可

但是FlyingPress的CDN配置部分就不要开启了。

Bunny CDN注册、购买及配置指南

Bunny CDN能做什么

CDN节点遍布全球，除了CDN，还有存储、流媒体服务。

我们这次主要用他们家的CDN服务

image 36

Bunny价格

每个月最低消费 1 usd。

image 37

注册地址

https://bunny.net/

如何充值

Bunny CDN充值支持信用卡、PayPal，第一次需要添加信用卡或者PayPal信息。

我的账号因为之前充值过，记录了我的信用卡，所以直接点支付就好了。

image 38

如何添加CDN

以我的一个样站 为例

image 39
image 40
image 41
image 43

这样就完成了CDN zone的添加，但是这时候，只能通过 147w.b-cn.net 来访问你的CDN，看起来一点都不高大上

使用Bunny CDN

image 44

然后在FlyingPress的CDN中，填入 https://147w.b-cdn.net，这样Bunny CDN就在网站上生效了。

image 45

【可选，不操作不会影响网站速度】如何设置自定义域名

这个是进阶操作，唯一的好处就是CDN看起来长这样，cdn.147w.work，看起来更加高大上

在CDN列表，点击刚刚创建好的147w进入，

image 46

等添加完成后，会到Bunny的界面，点add hostname，然后在下面的列表中，点enable

image 47

它会提示我们enable https，点get a free certificate即可

image 48

它会提示我们设置一条解析记录

image 49

【重要】然后就需要去到域名解析的地方，添加一条CNAME记录

Siteground

image 50

Hostinger

image 51
image 52
image 53

添加完解析记录之后，回到Bunny，点continue

因为解析记录同步需要一点时间（看运气，有时候几分钟，有时候几个小时），有可能你点了continue之后，出现的是下面的错误

image 54

没关系，多try again几次，直到出现下面的提示；

如果这一步成功了，你就可以勾上force SSL之后，那在FlyingPress的CDN中，可以填入 https://cdn.147w.work

image 55
image 56

BUNNY CDN更多设置

请对照着我的截图，照着点一遍。

如果你发现我的截图不完整，那说明没有截图到的部分，你都可以不用管

image 57
image 58
image 59
image 60
image 61
image 62

网站速度进一步优化

精简网站插件

非必要不装插件

如果能用一两行代码可以解决的问题，不用插件解决

如果你不清楚哪些插件可以停用，可以发给我参考

目前我的这个测试站点，只装了这么几个插件而已。

image 63

图片优化

图片优化，对于wordpress提速非常重要

可以去YouTube找一下图片优化的视频来看看。

  1. 需要多大尺寸的图片？按需准备图片
  2. tinypng压缩
  3. 转webp
  4. 后面两步可以自动化

图片优化案例：

转换之前10个图片，总大小 13.8M

image 64

通过tinypng压缩后，总大小 2.41M

image 65

转成webp格式后，总大小 1.62M

image 66

压缩、转换过程记录（我自己写的一段程序）

image 67

特别提醒：不要迷恋分数

请记住，网速优化的差不多就可以了，不要一味追求满分，花太多时间去研究不值当。
毕竟内容为王。