Elementor 页面性能优化指南：从 40 分到 95 分

很多朋友说 Elementor 建的站慢，其实大部分慢是配置问题。这篇笔记记录我一个真实项目的优化全过程。

优化前的问题诊断

先用 PageSpeed Insights 跑分，对照瀑布图逐项排查：

指标	优化前	问题来源
首屏时间 LCP	3.8 秒	首页图片未压缩
脚本执行	2.3 秒	全站加载所有 JS
CSS 阻塞	1.5 秒	未开启托管 CSS

第一步：图片优化（收益最大）

1. 所有图片转 WebP 格式，保持透明图才用 PNG
2. 图片尺寸严格按显示尺寸导出，别传 4000px 原图
3. 开启 Elementor 图片延迟加载
4. 首屏大图用 fetchpriority="high" 提前加载

第二步：开启托管 CSS 与 JS 优化

Elementor 设置 → 高级：

• 优化 DOM 输出：开启
• 优化标记：开启，减少冗余 class
• 聚合 CSS：开启，合并为单个文件
• 聚合 JS：开启

这一套操作通常能让跑分提升 15-20 分。

第三步：控制第三方插件

检查已装插件，干掉重复功能的：

• 能合并的合并：SEO 插件只留一个
• 能替代的替代：用 CDN 的字体托管替代 Google Fonts 插件
• 用 [Query Monitor] 看哪些插件拖慢了页面

第四步：服务器与缓存

WordPress 站点建议：

1. 开启 Nginx FastCGI 缓存 或页面缓存插件
2. 使用 Redis 对象缓存
3. 数据库定期优化（用 WP-CLI 定时执行）

# 每周末凌晨自动优化数据库
0 3 * * 0 wp db optimize --path=/var/www/wp

第五步：验证与回归

每步优化后重新跑分：

npx lighthouse https://example.com --only-categories=performance --output=json

注意监控：

• 前台页面是否正常渲染（托管 CSS 偶发样式丢失）
• 编辑器是否正常（优化设置偶发影响编辑体验）

优化后成绩

指标	优化前	优化后
性能	40	95
LCP	3.8s	1.2s
CLS	0.18	0.02

小结

性能优化没有魔法，就是图片、资源合并、缓存三板斧。每步改动小步验证，别一次性全改。