我如何将 WordPress PageSpeed 分数从 60 提升到 95
发布: (2026年3月7日 GMT+8 15:18)
4 分钟阅读
原文: Dev.to
Source: Dev.to
为什么页面速度很重要
Google 的指南将网站速度列为重要的排名因素。更快的站点提供更好的用户体验，鼓励访客停留更长时间。
PageSpeed Insights 还会评估核心网页指标：
- Largest Contentful Paint (LCP) – 主内容加载所需的时间
- Cumulative Layout Shift (CLS) – 意外布局移动的程度
- Total Blocking Time (TBT) – JavaScript 阻塞页面的时间
提升这些指标可以提升 SEO 和用户体验。
第一步：优化图片
图片是导致加载缓慢的常见原因。
- 将所有图片转换为 WebP 格式，以在保持质量的同时减小文件大小。
- 确保每张图片小于 100 KB。
- 启用 lazy loading，让图片仅在进入视口时才加载。
这些改动显著降低了页面加载时间。
第二步：调优 LiteSpeed Cache 以提升速度
许多站点安装缓存插件后直接使用默认设置。对 LiteSpeed Cache 进行适当调优可带来巨大的收益。我启用了：
- CSS 压缩
- JavaScript 压缩
- 延迟加载 JavaScript
- 移除未使用的 CSS
- 浏览器缓存
有效的缓存显著提升了 PageSpeed 分数。
第三步：削减不必要的插件
过多的插件会导致：
- 额外的 HTTP 请求
- 更多的 JavaScript 执行
- 更高的服务器负载
我删除了非必要插件，并用自定义 CSS 替代了简单功能。更精简的插件集合提升了性能。
第四步：消除阻塞渲染的资源
阻塞渲染的 CSS 和 JavaScript 会拖慢页面渲染。通过延迟加载 JavaScript 并移除未使用的 CSS，阻塞资源数量下降，首屏绘制时间加快。PageSpeed Insights 等工具可以帮助识别这些资源。
第五步：字体优化与布局稳定性
过多的字体样式会影响性能。我：
- 实施了高效的字体加载技术（例如
font-display: swap）。 - 为容器设置固定尺寸，以防止布局位移，降低 CLS 问题。
结果
| Metric | Before Optimization | After Optimization |
|---|---|---|
| Mobile Score | 60 | 95 |
| Loading Experience | Slow, many render‑blocking resources | Quick, smooth loading |
| User Experience | Noticeable delays | Faster, more responsive |
改进在测试分数和实际用户交互中都表现得非常明显。
最后思考
提升网站性能并不需要大刀阔斧的改造，而是对关键环节进行细致调优：图片、缓存、脚本以及布局稳定性。对于 WordPress 站点，这些优化既能提升用户体验，也能提升搜索引擎排名。