How to improve Elementor website speed effectively?

Elementor编辑器是Wordpress网站编辑器，网站后台启用之后，可能出现打开Elementor编辑器的速度变慢、卡顿、不能打开。如下图所示：

以下是本文章提供的9条解决Elementor编辑器的速度问题的方法。

1、激活Elementor 功能

登录Wordspress仪表板，前往 Elementor → 设置 ，然后激活Lazy Load Background Images、Inline Font Icons：

内联字体图标
将字体图标（例如 Font Awesome 和 eicons）作为 SVG 内联加载，而不是加载整个库。这样可以减少 CSS 请求和渲染阻塞的 CSS 问题。

Delayed loading of background images
使用带有“lazy-bg”帮助类的优化插件来延迟加载背景图像。这使得背景图像的加载更加简便高效。

优化 DOM 输出
通过删除不必要的 div 包装器（如 elementor-inner、elementor-row 和 elementor-column-wrap），减少 DOM 大小，提升性能。

Improved resource loading
仅在需要时加载灯箱、全屏库、对话框库和共享链接库，从而减少网站上的 JavaScript 负担。

Improved CSS loading
仅加载正在使用的小部件 CSS 和动画，同时加载它们，减少网站上的 CSS 量和渲染阻塞资源。

禁用数据共享
与插件开发人员共享数据需要一些服务器资源。因此，建议在所有插件中禁用此功能。

2,将 CSS 打印方法更改为“外部文件”

虽然这种方法有优点和缺点，但使用外部 CSS 文件通常更好，因为每个外部 CSS 文件都可以被缓存，并且它们不会增加 HTML 的大小。建议您测试一下自己网站的效果，但我通常推荐使用外部文件。

3,禁用默认的谷歌字体

接下来的步骤中，我们将预加载仅您需要的字体，并本地使用 woff2 格式。

existAdvanced中禁用 Google Fonts Font Awesome

existGeneral中禁用Font Awesome

更改字体/CSS 设置时，重新生成 CSS 和 CSS Elementor 的工具设置中的数据，然后在 瀑布图（例如 GTmetrix 或 Chrome 开发工具）中测试结果。

4,将 Google 字体加载设置为“Swap”

将 Google 字体的加载设置为“swap”可以确保文本在网络字体加载期间保持可见。然而，Font Awesome 建议使用 font-display: block，因为它使图标加载非阻塞。还可以更改 Elementor Pro 自定义字体中的 font-display Properties.

To add font-display: swap，请找到字体的 CSS 文件，或者使用字符串定位器搜索字体位置。如果找不到位置，只需将 font-display: swap 添加到字体的 CSS 代码中即可。

禁用Gutenberg（古腾堡）的 wp-block-library

由于使用的是 Elementor，因此可以禁用 Gutenberg，它会向网站添加额外的 CSS 文件 (/wp-includes/css/dist/block-library/style.min.css)。可以使用 Asset CleanUp plug-in (software component)取消 Gutenberg Block Library CSS 队列::

禁用古腾堡编辑器
可以使用 Disable Gutenberg 插件或 Perfmatters 中的脚本管理器来禁用古腾堡。如果只在网站的某些部分使用古腾堡，这两个选项都可以让你控制其加载位置，从而优化网站性能。

5,在动画中使用 transform + translate

不完全推荐使用动画，但可以使用 transform 来防止布局变化 (CLS)。

可以使用 Happy Addons 插件来实现这些效果。CSS 变换允许更改动画的宽度和高度，而 CSS 翻译则能移动元素而不会导致布局变化。这样可以在保持动画效果的同时，提高页面稳定性。

6,禁用不使用的插件

务必要控制 WordPress 网站的插件使用数量。插件过多导致后台非常卡顿，难以操作。

以下是建议：

1. 限制插件数量：尽量控制插件数量在15个以内。
2. 避免重复功能插件：相同功能的插件只使用一个，例如 SEO 插件，选择安装 SEO Yoast、Rank Math 或 All in One SEO 其中一个即可。
3. 避免重复功能：如果已经有一个全功能的插件，避免安装重复功能的插件。
4. 禁用不使用的插件：对于用不到的插件，一定要禁用。

如果只在特定页面或帖子上需要某些插件，可以使用 Perfmatters 或 Asset CleanUp 来卸载它们，减少 CSS 和 JavaScript。

以下是使用 Perfmatters 的步骤：

1. 启用脚本管理器：前往设置 → Perfmatters → 附加 → 脚本管理器，启用脚本管理器。
2. 启用测试模式：在脚本管理器设置中启用测试模式，这样可以测试脚本管理器而不会破坏网站。发布更改时，记得Disable test modeThe

查看脚本管理器并卸载未使用的插件（除了页面、帖子、当前 URL、正则表达式等之外的所有位置）。

7,使用 WebP 图片

为了优化图片，有三点需要注意：

1. 控制图片大小：确保图片大小控制在200KB以内。
2. 添加 Alt 属性：为图片添加 Alt 属性以进行 SEO 优化。
3. Using the WebP Format：WebP 格式最佳，能够有效减少文件大小并保持高质量。

建议在本地处理好 WebP 格式的图片后再上传到 WordPress 网站。有几个 WordPress 图像优化器插件可以解决这个问题，并自动将图像缩小到足够小，不会影响网站性能，也不会损失太多质量和分辨率。

8,使用轻量级的主题

选择轻量级的主题是提升网站速度的有效方法之一。以下是一些选择轻量级主题的优点及避免使用过多子主题的重要性：

1. 简洁的代码结构：轻量级主题通常采用简洁的代码，避免了过多冗余和不必要的功能。这使得页面加载更加迅速，减少了不必要的资源消耗。
2. 最优化的性能：轻量级主题注重性能优化，包括合理的 CSS 和 JavaScript 压缩、延迟加载和最小化 HTTP 请求等。这有助于减轻服务器负担，提高页面加载速度。
3. 避免过多的子主题：过多的子主题可能增加页面的复杂性，导致性能下降。使用过多的子主题还可能引入不必要的代码和样式，增加页面加载时间。因此，尽量避免在一个网站中同时使用过多的子主题。
4. Easy maintenance：轻量级主题通常更易于维护，因为它们的代码结构更为简单清晰。这有助于减少在主题更新和定制时可能出现的问题，提高网站的稳定性。
5. responsive design：许多轻量级主题注重响应式设计，使网站在不同设备上都能够提供良好的用户体验。这有助于吸引更多的访问者，并提升网站的 SEO 排名。

在选择轻量级主题时，应根据网站的需求和性能目标，选择适合的轻量级主题，以确保网站在各个方面都能表现出色。

9,使用 CDN 提高速度

CDN通过把网站的静态内容比如图片和视频存储在世界各地的服务器上，来帮助网页更快地加载。这样做的好处是，不管访问者在哪里，他们都能从离他们最近的服务器获取内容，这样就减少了等待时间，使网站加载更快。以下是设置 Cloudflare CDN 的步骤：

创建 Cloudflare 账户：

1. 访问 Cloudflare： 访问 Cloudflare 官方网站 Cloudflare 并创建一个免费账户。
2. 添加你的网站： 按照指示添加你的网站并完成域名设置。

修改域名解析设置：

1. 登录域名注册商： 在你的域名注册商处登录，找到域名解析设置。
2. 修改 Nameservers： 将域名的 Nameservers 修改为 Cloudflare 提供的 Nameservers，这样你的流量将通过 Cloudflare 进行路由和优化。

选择 CDN 设置：

1. 登录 Cloudflare 账户： 选择你的网站。
2. 启用“Auto Minify”： 在“Speed”选项卡中，启用“Auto Minify”以减小 CSS、JavaScript 和 HTML 文件的大小，提高加载速度。
3. 启用“Rocket Loader”： 在“Speed”选项卡中，启用“Rocket Loader”以延迟加载 JavaScript，优化页面加载。

启用 HTTPS：

1. 选择 SSL 模式： 在“Crypto”选项卡中，选择“Full (strict)”作为 SSL 模式，确保你的网站通过 HTTPS 加密传输数据。

配置缓存：

1. 启用“Cache Everything”： 在“Caching”选项卡中，启用“Cache Everything”以缓存整个页面，提高加载速度。
2. 设置缓存过期时间： 确保新的内容能及时更新。

设置防火墙和安全性：

1. 启用 Web Application Firewall (WAF)： 在“Firewall”选项卡中，启用 WAF 以保护你的网站免受恶意攻击。
2. 配置其他安全设置： 例如 Bot 管理和 IP 黑名单。

监控和分析：

1. 启用 Cloudflare 分析工具： 在“Analytics”选项卡中，监控网站性能和流量。

测试和优化：

1. 测试网站加载速度： 确保通过 Cloudflare CDN 获得了明显的性能提升。
2. 根据测试结果进行优化： 例如压缩图片、合并 CSS 和 JavaScript 文件等。

Summary:

在打开Elementor编辑器出现卡顿等问题，需提升网站的速度和性能。关键措施包括使用 Cloudflare CDN 加速、选择轻量级主题、优化图片为 WebP 格式、禁用不使用的插件、以及合理设置 Elementor 和 CSS。通过这些优化，不仅可以减少页面加载时间，还能提升用户体验和 SEO 排名。定期监测和优化网站，确保其始终保持最佳状态，是维持高性能网站的关键。