Elementor 如何优先考虑和提高网站性能

我们来谈谈 Elementor 的 2021 年产品路线图，特别是性能优化。 在我们继续规划和开发社区要求的很酷的新功能的同时，今年我们将提高用户网站的性能作为我们的使命。 在这篇文章中，我想与您分享我们为实现这一目标已经采取的一些行动，并谈谈即将到来的一年会发生什么。

自互联网诞生以来，网站性能一直是网络创建者的一个问题。 作为一名网络创建者，我总是会问这样的问题：

• “我的网站太慢了吗？ 是导致用户离开还是损害了我的 Google 排名？”
• “我应该放弃某些功能以提高网站速度吗？”
• 当然：“到底是什么导致了我的性能问题？ 我以为我覆盖了这里的所有基地！”

所以是的，无论我们使用什么平台或工具，从网站获得出色的性能一直是网络创建者的挑战。 由于影响性能的相关因素如此之多，要隔离真正的问题并不总是那么容易，更不用说找到解决方案了。 这正是我们创建这个由五部分组成的性能视频课程的原因。 在本系列中，我们深入研究了可能影响您网站性能的每个重要因素，无论是否与 Elementor 相关，并指导您如何对其进行优化。

为了让事情变得真正有趣，谷歌最近宣布网站性能现在将正式在其排名算法中发挥作用。 这将性能问题置于聚光灯下，引发了全球网站所有者的担忧。 这就是为什么在过去的六个月中，我们的研发和 SEO 团队一直在不知疲倦地工作，以确保 Elementor 网站通过此更新并以优异的成绩通过。

当谈到 Google 的神秘算法时，我们知道要让您感到安全，远不止我们说的话。 因此，作为对我们的用户和网络创建者社区的一项服务，我们将与领先的 SEO 专家一起举办免费的网络性能网络研讨会，讨论即将发生的变化。 这不仅会涵盖更新本身，还会详细说明此更改可能会如何影响您的网站以及您可以做哪些准备工作。 网络研讨会将于 4 月 28 日举行，因此请确保您预留座位。

但是，撇开所有课程和网络研讨会不谈，我们的主要目标是确保我们的产品不会对您网站的性能产生负面影响。 这一直是并将继续是我们的首要任务。 因此，事不宜迟，让我们深入了解 Elementor 的性能优化工作，如我们的 2021 产品路线图中所述。

除了优化我们的产品开发周期之外，我们提高 Elementor 性能的愿景还包括五个方面的方法。 我们已经在其中一些领域进行了一些重大改进，而其他方面将在 Elementor 即将推出的版本中得到解决。

我们还可以自豪地说，性能已经成为我们开发和发布渠道不可或缺的一部分。 现在，每个版本的 Elementor 都根据各种性能指标进行验证，以确保没有新功能、调整或修复对使用 Elementor 构建的现有网站产生任何负面影响。

现在让我们一一回顾我们的曲目：

我们正在改进 Elementor 加载资产的方式，以确保它只加载每个页面上需要的内容。 在 Elementor 和 Elementor Pro 的最新版本中，我们引入了优化的资产加载实验，以提高网站的前端性能，仅通过加载所需的功能来加速每个页面。 您可以在此处了解更多信息。

我们还为某些小部件添加了延迟加载选项，并将在未来继续这样做。 例如，视频小部件包括一个延迟加载选项，使您能够用静态图像缩略图替换嵌入的完整视频播放器。 一旦访问者与之交互，图像就会切换回完整的视频。

通过利用这些延迟加载技术，您可以在初始页面加载期间大大减少页面大小和 HTTP 请求数量，这将为访问者带来更快的体验。

自从我们在大约五年前推出 Elementor 以来，Web 浏览器已经发展了很多。 现在，五年前需要外部库的一些功能可以使用本机浏览器支持来实现。 这使得实现效率更高，并且在某些情况下可以大大减少 JavaScript 执行时间。

一个例子是 Waypoints 库，在某些情况下，它被替换为原生的 Intersection Observer API。

我们的目标是减少使用这些类型的 CSS 和 JavaScript 库，并尽可能用原生浏览器支持替换它们。

我们计划继续改进和优化 Elementor 现有的内部 JavaScript 和 CSS。

这方面的示例包括配置 Google Fonts 加载方法的能力以及添加到 Font Awesome 库的 font-display 属性。 这些改进应该会减少这些文件的渲染阻塞过程，并提供对现有 CSS 和 JS 文件的额外优化。

在 Elementor 3.0 中，我们改进了动态 CSS 加载和渲染机制。 Elementor 用于在每个页面加载时扫描页面以查找具有动态值的元素。 从 Elementor 3.0 开始，当第一次创建和访问页面时，Elementor 会创建一个包含所有具有动态值的元素的缓存。 然后，不是每次访问页面时扫描页面的动态元素，而是从缓存中获取列表并立即呈现。 这显着缩短了服务器端渲染时间，并带来了显着的改进。 我们计划在未来对 Elementor 实施额外的解析改进。 您可以在这篇博文中了解更多相关信息。

最后，我们计划继续改进和精简 Elementor 生成的代码输出，以减小 DOM 的大小。

我们已经开始在 Elementor 3.0 中进行这些改进，我们删除了三个包装元素以创建更小的 DOM 并简化代码输出。

在 Elementor 3.2 中，我们删除了另外两个元素，以进一步缩小 DOM 的大小。 计划在不久的将来进行更多的削减。

如您所见，预计 2021 年及以后会有新功能、改进和大修。 这一切都是为了帮助您继续构建具有更好性能的出色网站。 如果您还没有升级到最新版本，请确保您喜欢这些和其他改进。

您可能知道，有许多与 Elementor 无关的因素会影响 WordPress 网站的性能。 其中包括图像优化、网络托管、服务器提供商、CDN 等。 由于我们的目标是让我们的用户能够实施完整的 WordPress 优化，因此我们创建了大量免费教程、网络研讨会和文章的资源库，以帮助您了解有关性能的更多信息。

• 我们创建了一个关于性能的视频课程- 在这个由五部分组成的系列中，我们讨论了可能影响您的性能的每个重要因素，以及如何优化它。

• 4 月 28 日，我们将与领先的 SEO 专家一起举办关于 Core Web Vitals 的网络研讨会，讨论即将到来的 Google 算法更改及其对您网站的影响。 在这里保留您的座位。

• 我们还发布了一篇关于如何加快 WordPress 网站速度的详细博客文章，以及其他关注性能的文章，主题包括选择网络托管、缓存插件、运行速度测试、使用 WP Rocket 等。

我们将继续创建免费的网络研讨会、博客文章和视频，以解决 WordPress 性能的其他方面问题，以继续支持网络创建者社区。