作为一个写书评的博主,我原本只想安安静静码字。但看着 F12 里排山倒海的 52 个请求和 6MB 的首页,犯了愁。我没买 WP-Rocket,也没换轻量主题,我选择了最笨也最有效的方法:物理切除
“搜了一圈‘WordPress 优化指南’,发现排在搜索引擎第一页的大多是推销插件的软文,或者是写了一篇毫无意义的参考指南(大空话,例如:删插件、换服务器等)这种参考指南我让ai写10万篇都可以,而真正有需求的人却找不到真正的指南,因此在这里我想结合个人经历,写一篇关于wordpress的优化指南,希望对真正有需求的人而言有帮助
00:一次对比记录
| 性能指标 | 优化前 (Before) | 优化后 (After) |
|---|---|---|
| 首屏渲染 (FCP) | 2.091s | 1.847s |
| 最大内容载入 (LCP) | 2.388s | 2.343s |
| 请求总数 (Requests) | 52 次 | 25 次 (降幅 50%!) |
| 页面个体 (Weight) | 6.0 MB | 997 KB (极致瘦身) |
| 总加载时间 | 5.415s | 3.474s |
优化前总加载时间看着只有5s,其实我每次拿手机打开都要12秒...虽然LCP和FCP看起来没有优化多少,但是和我前面描述相比的,已经是大提升了,接下来开始说明我是怎么操作的
我的服务器是阿里云的2核2G的轻量应用级服务器,网速峰值200MB,服务器的配置不算好
01:直面体检报告,揪出拖慢加载的原因
首先打开Web Page Test,然后选择离你网站服务器相近的测试服务器,选择你想要测试的设备:桌面端和手机端,以及网络设置:Wifi还是4g,运行后就会有下图的数据展示了
这样可以清晰的看到哪里有问题,然后,点击左上角的Waterfall,翻到下面看到这样的图
就可以知道你是哪里出问题了
02:思路与解决方法
原来我的页面加载速度慢是因为我的页重(Pageweight)有足足6MB,以及大图加载慢的原因
图片解决方法:
在上传之前,先压缩,再转为Webp格式,如果服务器内图片多且体积占据大,请下载Webp express插件进行配置,由于字数原因,实在不会操作请截图喂给ai告诉它你下载了Webp express插件却不知道如何操作,请注意,不要下载错为Webp Express Plus
页重解决方法:
由于我的页重高达6mb,因此我选择了Chrome打开开发者工具查看“Network”,当然其他浏览器也是可以的重载页面后点击Size重新排列大小,找到占用,如下图
如果实在看不懂图片,请将图片喂给ai找到解决方法
一般来说,页重是css问题,本博客优化前加载速度慢是因为主题的css一直在请求下载一个13woff的字体,将字体处理好后再加载出来页面,当你确定了是css问题后,打开自定义CSS,具体路径如下:
Wordpress仪表盘—>外观—>自定义—>额外css
找到后,请根据个人情况决定该css的取舍,不要盲目跟着本博客的操作进行操作,本博客的思路是直接删除该字体,对于博客而言,让用户正常看到内容才是最重要的
03:后记
本文仅仅是为想优化博客性能但苦于找不到一个有实际指导意义文章而撰写的,如果还想进一步优化,推荐几个插件,Async JavaScript、Autoptimize、Redis Object Cache、WP-Optimize、Asset Cleanup,这是本博客正在使用的优化插件,若不会操作但又想对网站速度调教请将主机性能等信息喂给ai,让ai告诉你如何解决
当然,如果你不想像我这样手动写 HTML 或处理 CSS,你也可以参考市面上常见的做法:比如弃用 Elementor 这种笨重的构建器,转而使用 Astra 等轻量化主题;或者利用 Perfmatters 等工具来精简插件。但请记住,无论工具多好,最极致的优化永远来自你对站点‘每一位字节’的克制,希望这篇复盘对你有所启发,感谢阅读 在我的博客里,除了性能优化,我更享受在那个 997KB 的纯净空间里分享书评。欢迎关注这个爱折腾的‘阅读者’,欢迎来访初冬个人小站