优化 Elementor 网站的 6 个技巧

一个网站的加载速度和它提供什么样的体验，无论用于访问它的设备，可能是访问者第一次登陆它时注意到的前两件事。

学习如何优化您的网站以提高性能和转化率至关重要，因为这将确保它尽其所能地工作，让您的访问者对浏览体验感到满意。

如果你在这个网站上，你很可能在这里寻找一些关于 WordPress 的信息。 如果您听说过 WordPress，那么您一定遇到过 Elementor——生态系统中领先的拖放式网站构建器。

WordPress 网站构建器的鸟瞰图

如果您有一个 Elementor 网站但尚未对其进行完全优化，那么您将错过许多令人难以置信的好处。 Elementor 是一个 WordPress 网站构建器，用于创建独特且具有视觉吸引力的网站。 它拥有一个由超过 800 万网络创建者组成的活跃社区。

当您将网页设计的各种元素拼凑在一起时，Elementor 会向您展示设计的结果，从而使您的流程更快。 该工具可与其他插件轻松配对，并可在任何 WordPress 主题上方便地工作。

Elementor 提供直观的导航器和菜单，即使没有 HTML 或 CSS 编码知识也可以使用。 最新版本，即 Elementor 3.4，带有一些以 UX 为中心的漂亮功能和改进。

它为用户提供了通过新设计选项进行无限设计的能力。 您可以探索菜单购物车小部件、AJAX 加载更多、视频播放列表和动态 WooCommerce 标签。 这些功能有助于网站上的营销和其他功能。

尽管 Elementor 开箱即用，但在插件性能和网站功能方面仍有改进空间。 在本文中，我们将讨论六个技巧，这些技巧将帮助您利用 Elementor 带来的好处，同时为您的网站优化插件。 让我们开始：

1.选择一种字体加载方法以提高页面速度

Elementor 允许其用户更改网站中的 Google 字体加载方法。 这些字体的加载方式会影响您网站的加载。 Elementor 团队不断发布更新，在提高性能方面调整其插件的运行方式。

Elementor 设置屏幕允许您选择 Google 字体加载方法中的更改。 在最新版本中，您可以选择五个选项，即：

• 默认值：浏览器在这里定义字体显示策略。
• 阻塞：给字体一个短的阻塞周期和一个无限的交换周期。
• Fallback : 给字体一个非常小的块周期和一个短的交换周期。
• 可选：在隐藏文本时，这与 Fallback 相同。 唯一的区别是它使用后备字体，除非字体已完全加载。
• Swap ：这意味着如果字体未按要求加载，则在使用可用的更新版本重新渲染之前将使用后备字体。

2. 解决您站点上的服务器配置冲突

使用任何插件，您都可能会遇到服务器冲突。 为了在使用 Elementor 时尽量减少托管或服务器的困难，您可以使用一个简单的开关，您可以通过转到 Core Elementor 设置来访问它。

单击Elementor > Settings > Advanced以启用“Editor Loader”下的“切换前端编辑器加载器方法”以解决服务器配置冲突（参见上面的屏幕截图）。

通过这样做，您将启用 Elementor 编辑器加载器方法，该方法可用于解决不同类型的托管服务器问题。

3.优化您的网站布局

为了使您的网站具有交互性和用户友好性，Elementor 提供了不同的布局来为您的网站添加设计。 有多种选项，例如网格格式或砖石样式，您可以根据与您网站内容的最佳效果进行选择。

事实上，主题生成器的最新更新让您可以直观地了解整个网站。 您可以管理哪个模板适用于网站的哪些区域，并在需要时轻松编辑、升级、修改内容。

您还可以使用标准的博客布局来很好地展示您的产品。 新引入的自定义断点允许您设计响应速度更快的网站。 断点基本上是内容元素响应设备宽度的点。

这意味着，您的网站在任何屏幕尺寸上都会看起来不错，并在任何设备上为访问者提供更好的体验。 网站布局根据带有这些断点的设备宽度动态变化，可以使用 Elementor 的响应式控件加载机制进行优化。 现在，服务器响应时间最多可提高 23%。

此外，Elementor 3.4（及更高版本）使您能够根据七种设备调整您的设计布局，包括原始桌面、移动和平板电脑。

它提供断点以及新的宽屏设备尺寸以获得更多屏幕空间。 它为您提供了在需要时独立放大或缩小预览大小的完全灵活性，从而为您提供了一个提供更高性能的平台。

4. 在不影响质量的情况下压缩网站视觉效果

图像优化是提高网站整体性能的关键因素。 客户正在寻找更多视觉内容并希望更快地加载网站。 要减少网站加载时间，您必须优化图像。

随着 WordPress 主题和设计趋势不断向视觉化方向发展，必须确保您网站上包含的视频、照片和 GIF 不会减慢速度。

但是，您可以部署延迟加载，而不是在页面加载时一次下载所有视觉效果——这是一种在网页设计中使用的流行技术，用于延迟页面上非关键资源（例如照片）的加载，而是仅在需要的时刻（例如向下滚动页面）。

延迟加载是自 WordPress 5.5 以来的 WordPress 核心功能，但它不适用于 Elementor，因为该插件在单独的样式表中编译背景图像 CSS。 但不用担心，我们说的是 WordPress，所以所有东西都有一个插件！ 这里有几个很好的选择可供考虑。

优品

适用于 WordPress 的一体化图像优化解决方案，与 Elementor 兼容。 您的图像将由 CDN 而非主服务器提供，这样可以减少加载时间和带宽使用。 它为访问者的浏览器和视口选择正确的图像大小，并使用延迟加载来显示图像。

糊涂

另一个高度评价的图像优化插件，与 Elementor 配合得很好，Smush 可让您轻松调整大小、优化和延迟加载图像以提高性能。 它提供无损压缩并批量处理 PNG、JPEG 和 GIF 文件。 您还可以设置自动优化，以便您的附件在上传时进行超快速压缩。

5. 使用 DOM 输出和资产加载功能提高性能

最新版本的 Elementor 包括许多性能亮点，例如改进的资产加载和可访问性。 新版本通过拉动对旧浏览器（例如 Internet Explorer）的支持来减少 JS 资产文件的大小。

较小的资产文件大小可以提高加载速度，并且有条件加载的灯箱带有按需加载它们的选项。

当这些元素减慢您的网站速度时，Elementor 可以减少 DOM 元素和页面重量。 它还具有内联加载功能，允许用户在呈现任何内容或功能之前无需等待所有 JavaScript 文件完全下载即可显示小部件。

为了确保您的网站已尽其所能进行优化，Elementor 对 CSS 渲染和 DOM 元素的删除进行了更改。

然而，一些改进可能需要时间，因为它们破坏的可能性很小，而另一些则涉及高风险，如果操作不当，可能会出现更高的问题。

6. 有效地选择和管理你的插件

Elementor 有自己的构建器功能，但它可以轻松集成和管理插件以满足更定制的需求。 例如，Elementor 与 WooCommerce、Yoast、Rank Math、ACF、Toolset、Pods、LearnDash、Tutor LMS 和 MemberPress 等著名的 WordPress 插件很好地集成在一起。

要将表单与 Elementor 集成，您可以使用简码小部件。 但是这种方法不允许在 Elementor 支持的页面上对表单进行可视化自定义，因为它使用简码将表单嵌入到页面中。

花时间选择专为 Elementor 设计的插件。 Happy Addons 和 Essential Addons 等附加组件带有 Elementor 小部件，可让您将网站的表单集成到可视化编辑器中。

无论您使用 Gravity Forms、Contact Form 7 还是任何其他流行的插件，这些集成都将确保您的表单在设计模式和已发布页面上看起来都很棒。 它们还将像以往一样高效运行，而不会影响站点性能。

您还可以考虑使用 Uncanny Automator 之类的插件来自动化 Elementor 网站上的功能。 例如，您可以创建一个配方，当用户在您使用 Elementor 构建的网站上提交评论时，自动显示带有时事通讯订阅表单的弹出窗口。

不可否认，Elementor 3.4 在网站设计和性能方面向前迈出了一大步。 它提供了许多改进的功能，如滑块、动画和实时表单构建器，可以改进网站的用户界面以销售产品，同时从访问该网站的用户那里收集信息。

但更重要的是，重要的是要强调优化网站。 您的网站性能如何成为现代在线业务成功的主要决定因素。 毕竟，不起眼、缓慢和笨重的网站会让网站访问者感到沮丧，并扼杀公司的底线。 如果您不希望潜在客户寻找替代品，请优化您的网站。