Tag: Elementor速度优化

网站速度对于用户体验、搜索引擎排名以及整体网站性能都重要。Elementor 搭建的WordPress 网站速度的优化能让用户享受流畅的浏览体验。本文将详细介绍一系列优化 Elementor 网站速度的方法。

Elementor 速度优化的重要性

Elementor 网站速度的重要性体现在多个方面。缓慢的网站会导致用户不耐烦，增加跳出率。搜索引擎将网站速度视为重要的排名因素，速度较慢的网站在搜索结果中的排名可能会更低。因此，优化 Elementor 速度对于确保积极的用户体验和提高搜索引擎可见性很重要。

优化 Elementor 速度的方法

1. 使用实验性功能加速 Elementor

启用Elementor的实验性功能是加快网站速度的有效方法。在 WordPress 仪表板中进行设置：

• 交换选项：转到 Elementor > 设置，单击高级，向下滚动到 Google 字体加载选项选择交换。可以使浏览器在加载请求字体时显示后备字体，如 Arial 或 Times New Roman，待请求字体加载完成后再交换。

• 加载 Font Awesome 4 支持：在加载 Font Awesome 4 支持选项中选择否。因为 Elementor 默认已包含 Font Awesome 5 图标，且 Font Awesome 4 可能不再更新维护，选择否可避免增加额外资源影响加载时间。

• 激活实验性功能：转到 功能 部分，向下滚动到稳定功能部分激活优化的 DOM 输出、改进的资产加载、改进的 CSS 加载。
  • 优化的 DOM 输出：通过减少 Elementor HTML 中包装元素的数量，提高性能。
  • 改进的资源加载：仅在页面需要时加载部分基础设施 JS 代码，显著减少 JS 文件大小。
  • 改进的 CSS 加载：添加条件和内联 CSS 加载实验，减少页面生成的未使用 CSS 数量，加快页面加载速度。

2. 优化 Elementor 设计

减少部分、小部件和列的使用。页面大小增加会导致网站运行效率低下，尽量为每个对象使用单个部分和行，并利用边距和填充来构造元素。例如，在设计布局时，避免使用过多的小部件和列。

3. 选择可靠的托管服务提供商

共享托管或缓慢的服务器会降低网站速度，可以选择我们的托管服务，毫无压力。

4. 使用轻量级主题提升性能

选择快速轻量级的主题，如 Nexter 等主题，加载时间大大缩短。这种主题不仅速度快，还高度可定制，能满足特定需求和偏好。

5. 删除不必要的主题和插件

删除未使用的主题和插件可以减少网站大小，加快加载时间。但要注意一些插件或自定义可能需要部分主题和插件，在删除前最好创建网站备份。

6. 保持插件更新至最新版本

插件更新通常包含错误修复、安全补丁和性能改进，能提高网站速度和稳定性。过时的插件可能会带来安全风险，黑客会利用其漏洞窃取用户数据。可使用安全插件，如最佳 WordPress 安全插件。

7. 通过优化图像尺寸缩短加载时间

优化图像大小可通过多种技术实现，如调整图像尺寸、压缩图像、延迟加载等。使用 Smush 和 ShortPixel 等插件可以帮助进行图像优化。例如，将图像调整为适合其用途的正确尺寸，压缩图像在不牺牲质量的前提下减小文件大小，延迟加载可在需要时加载图像。

8. 优化 JavaScript 和 CSS

优化不佳的 JavaScript 和 CSS 代码会降低 Elementor 网站速度。使用 Autoptimize 插件，在插件设置中进行如下配置：

• JavaScript 选项：勾选 “优化 JavaScript 代码？” 和 “聚合 JS 文件？”。

• CSS 选项：勾选 “优化 CSS 代码？”、“聚合 CSS 文件？” 和 “聚合内联 CSS？”。

9. 利用页面缓存提高网站速度

使用页面缓存插件，如 WP Rocket、Flyingpress、NitroPack等，将网站页面副本存储在缓存中，快速检索并提供给访问者，减少服务器负载，提高网站性能。

10. 利用内容分发网络（CDN）

CDN 可将网站内容分发到更靠近访问者的服务器，加快加载速度。Cloudflare 是常用的 CDN，也可使用 BunnyCDN，还可同时使用两个 CDN 进一步提高性能。

11. 使用 Gzip 压缩加速加载时间

Gzip 压缩可在发送网站文件到访问者浏览器前对其进行压缩，减小文件大小，加快加载速度。使用 WP Rocket 插件启用 Gzip 压缩，可通过运行 Gzip 压缩测试来检查其效果。

12. 通过数据库优化提高性能

随着时间推移，网站数据库可能会充斥不必要的数据，如旧帖子修订、垃圾评论和未使用表格。使用 WP Optimize 和 WP Rocket 等插件优化数据库，在优化前先备份网站。以 WP Optimize 插件为例，在 WP 管理仪表板导航至 WP Optimize > 数据库，在优化选项卡中选择重要优化，点击 “运行所有选定的优化”，还可在设置选项卡中启用 “计划清理和优化”。

13. 通过评论优化提高性能

限制帖子评论可减少加载时间，可在 WordPress 设置的 讨论 选项中勾选 “允许人们提交评论” 来禁用评论。若评论部分对用户体验重要，可禁用用户头像或使用具有延迟加载功能的第三方评论插件。

14. 限制存档页面上显示的帖子

减少存档页面上显示的帖子数量，可在阅读设置中更改显示帖子数量。这样可加快 Elementor 网站速度，提高网站性能。

15. 使用博客文章摘录加速主页加载

在主页使用博客文章摘要，可减少加载内容，在相同空间显示更多帖子。在阅读设置中选择摘要而非全文，加快主页加载速度。

16. 增加 PHP 内存限制

Elementor 在 PHP 内存约为 128MB 到 256MB 时性能最佳。可通过编辑 wp-config.php 文件来增加内存限制，例如添加代码：define(‘WP_MEMORY_LIMIT’, ‘256M’);

17. 保持 PHP 版本更新

确保网站运行最新的 PHP 版本，可在 WP 管理仪表板的工具选项卡的站点健康部分检查 PHP 版本，并从托管平台仪表板更新。

18. 实现脚本和样式表的异步加载

默认情况下，WordPress 等待脚本或样式表完全加载后再呈现网页。而异步加载可在网页渲染时加载脚本和样式表，提高网站速度。可使用插件或手动向<script>标签添加 “async” 属性来实现异步加载。

19. 防止热链接优化服务器资源

防止热链接（是指未经授权，直接链接或引用其他网站的资源到自己的网站或页面），可通过在 Wordfence Security 防火墙设置中禁用图片热链接、使用带有热链接保护的 CDN、禁用网站右键单击功能等方法。例如，轻量级主题 Nexter 带有右键单击保护功能，可防止访问者通过右键菜单获取媒体链接。

20. 删除未使用的 CSS

使用 WP Rocket 和 Perfmatters 等插件删除未使用的 CSS 文件。通过在浏览器检查选项卡运行覆盖率报告识别未使用的 CSS，将 Elementor CSS 文件保留在安全列表中。

21. 延迟加载 JavaScript 文件

使用 WP Rocket 和 Perfmatters 等插件延迟加载 JavaScript 文件，在末尾加载 JavaScript 文件。从延迟脚本列表中排除 Elementor JS 文件，确保 Elementor 正常使用。

22. 使用轻量级 CSS 代码优化页眉 / 页脚

Elementor 模板的代码不如自定义 CSS 轻量，使用自定义 CSS 代码添加页眉 / 页脚可提高网站速度。

23. 使用 CSS 动画打造以性能为导向的网站

使用 CSS 动画代替 JavaScript，实现延迟加载，并确保仅在需要的地方使用动画。例如，使用 CSS 转换和过渡实现硬件加速，提高性能。

总结

通过启用优化的DOM输出、精简CSS和JavaScript、优化图像、使用轻量级主题和可靠的CDN等方法，可以显著加快Elementor页面加载速度。定期清理数据库、删除未使用的插件与CSS文件、合理设置缓存和延迟加载，能够进一步提升网站运行效率。

Elementor是一个免费的WordPress页面构建器插件，用户数量已经超过了 10,000,000 名用户。它不仅有免费版，还有高级版和很多附加组件，可以让你的网站看起来更酷更炫。不过，就像其他页面构建器一样，Elementor也会增加一些自定义样式和脚本，这可能会让你的网站加载速度变慢。那么，如果遇到Elementor加载缓慢的问题，我们该怎么解决呢？别担心，下面就来告诉你一些小窍门，让你的网站重新变得飞快！

1、 仅对页面启用Elementor

WordPress默认允许你创建两种内容类型：文章和页面。如果你用了像WooCommerce这样的插件，还会多出产品这种内容类型。当然，你也可以根据需要创建其他自定义的内容类型。但是，我们建议你只在页面上使用Elementor，而不是在文章和其他自定义内容类型上。这样，除了页面之外，Elementor就不会在前台和后台加载资源了，能帮你提升网站速度。当你启用Elementor插件时，它会默认给文章和页面都开启功能。你可以到“Elementor > 设置”菜单里，在“常规”选项卡下关闭文章的功能。

2、 使用Elementor Experiments

Elementor插件在“实验”选项卡里提供了很多实验性功能。你可以在这里看到正在进行的实验，以及已经完成并被接受为稳定功能的实验。如果你想让网站加载更快，可以在“稳定和持续”的部分下，把所有与速度相关的功能都打开。

3、优化字体使用

使用Google字体或其他自定义字体时，Google PageSpeed Insights经常会提醒你一些问题。比如，如果你在Elementor插件里用了Google字体，就可能会看到警告说网页在加载字体和预加载字体时，文本还没显示出来。不过，好消息是Elementor有内置的字体优化选项，你可以利用这些选项来提升网页的加载速度。

4、使用外部CSS文件

从上面的截图里，你可以看到Elementor提供了两种“CSS打印方式”的选项。一种是“外部文件”，另一种是“内部嵌入”。为了加快网站速度，建议你选择“外部文件”这个选项。这样，所有的CSS样式就会作为外部文件加载。之后，你再到“Elementor > 工具 > 常规”这个部分，点击“重新生成文件和数据”。这样，数据就会重新生成，并且作为外部CSS文件加载。这样做的好处是，你的页面能更准确地被缓存，加载速度也会更快，因为不会动态地插入那些无法缓存的CSS了。

5、尝试安全模式

如果你在创建或编辑页面时发现Elementor编辑器加载得很慢，你可以尝试在“Elements > 工具 > 常规”部分下开启安全模式。当编辑器加载慢的时候，安全模式会给出一些建议，帮你解决问题。

6、 减少附加组件的数量

有很多第三方插件都可以作为Elementor页面构建器的附加组件，给基础插件增加更多元素，帮你打造出好看的页面布局。但是，这些插件有时候可能跟Elementor插件配合得不太好，特别是当Elementor更新到新版本时。而且，这些附加组件还会增加额外的CSS/JS和HTTP请求，让你的网站变慢。如果你真的很喜欢Elementor，建议你升级到Pro版本，它提供了很多元素和模板库，可以满足你的需求。这样，你就不用额外使用那些可能会拖慢你网站的第三方插件了。