361 361Sale WordPress Care by Openbyt · WordPress 修复与运维

如何优化 Elementor 设置以提高性能

红牛独立站

1. 安装 Elementor 并配置设置

安装 Elementor 后,转到“设置”并进行适当配置:

2. 使用元素管理器优化小部件

Elementor 的元素管理器功能展示所有可用的小部件,包括其它插件的小部件。你可以看到每个小部件的使用次数,从而决定停用哪些不常用的小部件。

3. 本地加载字体和图标

最好的方案是本地加载字体和图标,并在首屏上预加载它们。添加自定义字体和图标后,可以停用默认的字体和图标加载。为此,在 functions.php 文件中添加以下代码以停用 Elementor 原生图标 Eicons

add_action('wp_enqueue_scripts', 'disable_eicons', 11);
function disable_eicons() {
    wp_dequeue_style('elementor-icons');
    wp_deregister_style('elementor-icons');
}

4. 优化布局

Elementor 布局由部分、列和小部件构成,元素越多,请求越多。以下是一些优化建议:

5. 页眉和页脚优化

页眉位于首屏,对速度指标影响最大。尽量使用纯 HTMLCSS 构建页眉。页脚、侧边栏和其它全局元素也应遵循相同的逻辑。

6. 使用优化和缓存插件

优化和缓存插件对基于 Elementor 的网站至关重要。推荐使用 WP Meteor、Flying Press 和 Perfmatters 这样的插件,它们能显著改善网站速度。

7. 限制 Elementor 附加组件

在安装 Elementor 插件之前,仔细测试并检查其功能,选择不会让网站臃肿且真正需要的插件。避免安装为了使用几个小部件而装整个插件,防止插件冲突。

总结:

在优化 Elementor 网站性能时,安装后需进行适当的设置,如选择支持的帖子类型、使用外部文件方式的 CSS 打印方法、本地存储字体并优化 DOM 输出和资源加载等功能。此外,利用元素管理器优化小部件、本地加载字体和图标、优化布局、使用优化和缓存插件以及限制 Elementor 附加组件,都能显著提升网站的加载速度和整体性能。

需要工程师帮你判断?

把症状、错误提示和最近改动发过来。

我们先判断风险、可能原因和安全下一步,再决定是否需要登录后台或服务器。

开始初诊

需要把这篇文章里的排查落到你的网站上吗?

把网址、错误提示、最近改动和影响范围发过来。我们先判断风险、备份状态和安全下一步;涉及数据库、支付、订单或安全问题时,不建议直接在生产站连续试错。

公开检测 · 无需注册 · 先判断风险 提交后会生成工单编号
初诊阶段不要提交后台、主机、数据库或支付账号密码。
紧急宕机、结账失败、安全跳转优先复核;普通问题通常 1 个工作日内回复。 初诊阶段不需要后台密码;需要权限时会单独确认最小权限和回滚方式。
提交前提醒先保留备份和错误提示,不要在生产站连续试错。