WordPress 优化实战:如何将页重降低 80%,挽回 LCP 性能红标
本文最后更新于14 天前,其中的信息可能已经过时,如有错误请发送邮件到1816757284@qq.com

“搜了一圈‘WordPress 优化指南’,发现排在搜索引擎第一页的大多是推销插件的软文,或者是写了一篇毫无意义的参考指南(大空话,例如:删插件、换服务器等)这种参考指南我让ai写10万篇都可以,而真正有需求的人却找不到真正的指南,因此在这里我想结合个人经历,写一篇关于wordpress的优化指南,希望对真正有需求的人而言有帮助

00:一次对比记录

性能指标优化前 (Before)优化后 (After)
首屏渲染 (FCP)2.091s1.847s
最大内容载入 (LCP)2.388s2.343s
请求总数 (Requests)52 次25 次 (降幅 50%!)
页面个体 (Weight)6.0 MB997 KB (极致瘦身)
总加载时间5.415s3.474s

优化前总加载时间看着只有5s,其实我每次拿手机打开都要12秒…虽然LCP和FCP看起来没有优化多少,但是和我前面描述相比的,已经是大提升了,而且也满足了核心网页指标 (Core Web Vitals)接下来开始说明我是怎么操作的

我的服务器是阿里云的2核2G的轻量应用级服务器,网速峰值200MB,服务器的配置不算好

01:直面体检报告,揪出拖慢加载的原因

首先打开Web Page Test,然后选择离你网站服务器相近的测试服务器,选择你想要测试的设备:桌面端和手机端,以及网络设置:Wifi还是4g,运行后就会有下图的数据展示了

这样可以清晰的看到哪里有问题,然后,点击左上角的Waterfall,翻到下面看到这样的图

就可以知道你是哪里出问题了

02:策略与拆解:如何进行“页重”瘦身

核心动作 1:图片的优化 不要直接上传原图。我的 SOP 是:先压缩,再转 WebP。 如果你已经有大量库存,推荐使用 WebP Express(注意:不是 Plus 版)

页重解决方法:

由于我的页重高达6mb,于是我通过 Chrome 开发者工具的 Network 面板重新排列 Size,我发现页重高达 6MB 的罪魁祸首竟然是一个 1.3MB 的 woff 字体文件

如果实在看不懂图片,请将图片喂给ai找到解决方法

一般来说,页重是css问题,本博客优化前加载速度慢是因为主题的css一直在请求下载一个13woff的字体,将字体处理好后再加载出来页面,当你确定了是css问题后,打开自定义CSS,具体路径如下:

WordPress仪表盘—>外观—>自定义—>额外css

找到后,请根据个人情况决定该css的取舍,不要盲目跟着本博客的操作进行操作,本博客的思路是直接删除该字体,对于博客而言,用户快速看到内容远比花里胡哨的字体更重要,放弃无谓的视觉冗余。

03:后记

本文仅仅是为想优化博客性能但苦于找不到一个有实际指导意义文章而撰写的,优化不是堆砌插件,而是寻找性能最大化的杠杆。目前我实测有效的插件组合包括:Async JavaScriptAutoptimizeRedis Object Cache等插件进行代码压缩 (Minification)、延迟加载 (Lazy Load),来优化服务器响应时间 (TTFB)

如果你追求极致,可以考虑弃用 Elementor 这种笨重的构建器,转而拥抱 Astra 等轻量化主题。记住:最顶级的优化永远来自对“确定性”性能的极致追求,而非盲目安装插件。 —若你实在弄不明白如何操作,可以通过b站或留言板私信我

延伸阅读:《纳瓦尔宝典》:关于减法的思考

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇