Elementor加载慢怎么优化？

按下面这套顺序做一遍，你能把 Elementor 站点的首屏加载时间砍掉一半以上，并且知道每一刀砍在哪里、为什么砍。

第一步：先量出到底慢在哪，别瞎猜

这一步要做的是拿到「基线数据」，做完你能明确知道瓶颈是服务器、是 Elementor 资源，还是图片。

打开 Chrome，按 F12 打开开发者工具，切到 Network（网络） 面板，勾上 Disable cache，然后按 Ctrl+F5 强刷首页。看两个数字：右下角的总加载时间、以及 Waterfall 里耗时最长的前 5 个请求。

再跑一遍 PageSpeed Insights（pagespeed.web.dev），重点看 LCP 和 TBT 两项。

注意：一定要在「无痕窗口 + 禁用缓存」下测。你登录着 WordPress 后台时，Elementor 会加载编辑器的全套资源，测出来的数据完全失真。

第二步：开 Elementor 自带的实验功能

这一步是收益最大、成本最低的优化，做完能直接减少 Elementor 自己前端加载的 CSS/JS 体积。

进入后台 Elementor → 设置（Settings）→ 实验（Experiments） 标签页。把下面几项的状态从「默认」改成 Active（启用）：

• 优化的 DOM 输出（Optimized DOM Output）：减少 div 嵌套层级
• 改进的资产加载（Improved Asset Loading）：只在用到某组件时才加载它的 CSS/JS
• 改进的 CSS 加载（Improved CSS Loading）：把页面 CSS 单独成文件，不再内联进 HTML
• 内联字体图标（Inline Font Icons）：图标变成内联 SVG，省掉一个字体文件请求

改完点 保存更改（Save Changes），然后回前台清缓存重新测一次。

注意：「改进的 CSS 加载」开启后，最好去 Elementor → 工具（Tools）→ 重新生成 CSS 和 数据（Regenerate CSS & Data） 点一下，否则老页面可能样式错乱。

第三步：砍掉用不上的东西

这一步是减少请求数量，做完能砍掉 2～5 个网络请求。

1. 关掉 Font Awesome。 进 Elementor → 设置 → 高级（Advanced），把 加载 Font Awesome 4 支持 和 加载 Font Awesome 5 支持 都设为 否（No）。前提是你没在页面里用图标组件。

2. 禁用不用的组件。 进 Elementor → 元素管理器（Element Manager），把用不到的小组件（比如「星级评分」「进度条」「推荐语」）逐条关掉。这不会加快前台速度，但能明显减轻编辑器卡顿。

3. 限制文章修订版本。 打开站点根目录的 wp-config.php，在 /* That's all, stop editing! */ 上面加一行：

define( 'WP_POST_REVISIONS', 5 );

Elementor 每次保存都会写大量 _elementor_data 元数据，修订版本堆积会让数据库查询变慢。

第四步：上缓存插件，做 CSS/JS 压缩

这一步把多个小文件合并、延后执行，做完能明显改善 TBT 和首屏渲染。

推荐 WP Rocket 3.15+ 或 LiteSpeed Cache 6.x（用 LiteSpeed 服务器就选后者）。

以 WP Rocket 为例，进 设置 → WP Rocket → 文件优化（File Optimization）：

• 勾选 压缩 CSS 文件、压缩 JavaScript 文件
• 勾选 合并 CSS 文件（站点用了 HTTP/2 或 HTTP/3 就别合并）
• 延迟加载 JavaScript 执行 选「延迟」，然后在下面的排除框里填入 jquery.js 和 elementor 相关的文件名，否则页面交互会失灵

注意：延迟 JS 是翻车重灾区。开完必须用手机和电脑各点一遍导航菜单、轮播图、手风琴组件，确认还能用再上线。

第五步：处理图片和字体

这一步解决 LCP 慢的问题，做完首屏最大那张图会提前几百毫秒出现。

1. 转 WebP。 装 Imagify 或 ShortPixel，进插件设置点「批量优化」，把已有图片全部转成 WebP。
2. 首屏大图别懒加载。 在 WP Rocket 的 媒体（Media） 标签页，把 延迟加载 打开，然后在「从延迟加载中排除」框里填入首屏头图所在的图片文件名或 CSS 类名。
3. 字体本地化。 如果你的 Elementor 全局字体用的是 Google Fonts，装 OMGF 插件（设置 → OMGF → 优化本地字体），勾选「自动托管 Google Fonts」，并在 优化（Optimize） 里勾上「预加载字体」。

第六步：服务器层的兜底优化

这一步是地基，做完上面所有优化的效果才能稳定发挥。

• PHP 升到 8.1 或 8.2（在主机控制面板的 PHP 版本切换里改）
• 开启 OPcache 和 Redis 对象缓存（装 Redis Object Cache 插件，在 wp-config.php 里配好连接参数）
• 把 Elementor 的 elementor/css 目录排除出缓存清理范围，避免每次更新文章都重生成全部 CSS

小结

• 先测再改，用无痕窗口 + 禁用缓存拿基线数据
• Elementor → 设置 → 实验，开启「优化 DOM 输出」「改进的资产加载」「改进的 CSS 加载」
• 关掉不用的 Font Awesome 和组件，限制文章修订版本数量
• 缓存插件做 CSS/JS 压缩与延迟，但务必排除 jQuery 和 elementor 脚本
• 图片转 WebP，首屏图排除懒加载，Google Fonts 本地化
• PHP 8.1+、OPcache、Redis 对象缓存是兜底地基