Elementor加载慢？11个方法快速优化网站速度

Elementor是一款广受欢迎的WordPress页面构建器插件，拥有超过500万次活跃安装，深受用户青睐。该插件不仅提供免费版本，还拥有功能强大的高级版本以及数百个丰富多样的附加组件，能够帮助您轻松打造精美网站元素。与众多页面构建器插件类似，Elementor通过添加自定义样式和脚本，为网站前端呈现出色的视觉效果。然而，它也可能对网站的前端和后端页面加载速度产生一定影响。如果您的网站因Elementor页面构建器而出现速度缓慢的问题，不妨尝试以下几种解决方案。

页面速度和用户体验是谷歌搜索算法中的关键排名因素。因此，在利用Elementor的拖拽式页面构建功能美化网站的同时，我们更应重视提升网站加载速度。幸运的是，Elementor在插件设置中内置了多项优化功能，帮助您改善页面性能。此外，您还可以通过优化外部因素来进一步提升Elementor页面的加载速度。

### 使用Elementor设置优化页面速度

首先，让我们深入了解Elementor提供的优化设置。如果这些设置无法有效解决问题，您可能需要考虑其他解决方案。

#### 1. 仅对页面启用Elementor

默认情况下，WordPress允许创建两种文章类型：文章和页面。而像WooCommerce这样的插件还会生成产品，您还可以根据需求创建自定义文章类型。我们强烈建议您仅将Elementor应用于页面，而非文章及其他自定义文章类型。这样做可以避免在前端和后端加载除页面之外的Elementor资源。值得注意的是，当您首次激活Elementor插件时，它默认会为文章和页面启用功能。您可以通过访问“Elementor > Settings”菜单，并在“General”选项卡下禁用文章插件来实现这一设置。

#### 2. 使用Elementor Experiments

Elementor插件在“Experiments”选项卡中提供了多种实验性功能，其中包括正在进行中的实验和已稳定并接受为正式功能的实验。为了提升加载速度，您可以在“Stable”和“Ongoing”部分下启用所有与速度相关的项目。

– **激活正在进行的实验**：
– Improved Asset Loading：此选项将减少默认加载的代码量，并仅在需要时动态加载剩余代码。
– Improved CSS Loading：与上述功能类似，仅在需要时加载CSS。
– Inline Font Icons：禁用Font Awesome和eicon的加载，转而使用内联SVG图标。

– **激活已稳定的实验**：
– Optimized DOM Output：通过减少HTML wrappers的数量来提升速度。

在启用这些实验性功能后，请务必对网站进行全面测试，因为它们可能会影响网站的布局。例如，动态加载资源可能会与WP Rocket等插件中删除未使用CSS的功能产生冲突。

#### 3. 优化字体使用

使用Google字体和其他自定义字体时，Google PageSpeed Insights可能会出现警告，特别是在加载Web字体和预加载字体时影响文本可见性。幸运的是，Elementor内置了字体优化选项，帮助您提升页面加载速度。

– 使用“Inline Font Icons”功能，在“Ongoing Experiments”部分下选择SVG图标。
– 转到“Elementor > Settings > General”部分，并启用“Disable Default Fonts”选项。这将禁用Elementor加载的字体，并让插件继承主题中所有元素的字体样式。
– 如果您不想禁用Elementor字体，可以转到“Advanced”选项卡，并为“Google Fonts Load”选择“Swap”选项。这将帮助您为每个Google字体文件请求添加“swap”参数，从而修复PageSpeed Insights中的文本可见性警告。

#### 4. 使用外部CSS文件

Elementor提供了两种CSS打印方法：使用“External File”或“Internal Embedding”。选择“External File”选项，将所有CSS样式作为外部文件加载。之后，转到“Elementor > Tools > General”部分，点击“Regenerate Files & Data”按钮，重新生成数据并作为外部CSS文件加载。这将有助于正确缓存页面并提升速度，而不是动态注入难以缓存的CSS。

#### 5. 尝试安全模式

如果您在创建或编辑页面时遇到Elementor编辑器加载缓慢的问题，可以尝试使用“安全模式”。通过访问“Elements > Tools > General”部分，启用安全模式。安全模式会在加载缓慢时在编辑器中显示建议。此外，您还可以启用“Debug Bar”选项，以查找页面上加载的模板，帮助您进行故障排除。

#### 6. 回滚插件

如果您在升级Elementor后遇到任何问题，可以选择回滚到之前的版本。与任何回滚操作一样，请确保提前备份数据库。您可以通过访问“Elementor > Tools > Version Control”部分，选择重新安装当前版本或回滚到任何先前版本。

### 提高Elementor速度的其他因素

除了Elementor设置之外，以下外部因素也可能影响您的网站速度。

#### 7. 使用轻量级主题

尽管Elementor是一个独立的插件，但许多商业主题会将其与其他功能捆绑在一起。这些主题通常采用自定义编码来创建页面布局，容易产生冲突并影响加载速度。我们建议使用轻量级主题，例如Astra或GeneratePress，这些主题通常带有免费Elementor入门模板。另一种选择是使用由Elementor开发团队提供的Hello Elementor主题，该主题已获得超过100万次活跃安装，与Elementor配合使用效果极佳。Hello Elementor主题设计简洁，主要与Elementor模板配合使用，如果您非常喜欢Elementor插件，这将是最优选择。

#### 8. 减少附加组件的数量

Elementor提供了数百个第三方附加组件，可以为基础插件添加更多元素以创建精美布局。然而，这些附加组件可能与父插件不完全兼容，尤其是在父插件更新到新版本时。此外，附加组件会增加额外的CSS/JS并增加HTTP请求，从而影响网站速度。如果您喜欢Elementor，建议选择Pro版本，它提供了丰富的元素和模板库。避免使用第三方插件，因为它们可能会降低网站速度。如果您确实需要使用附加组件，可以选择Ultimate Add-ons for Elementor等插件，并仅启用所需的小工具，禁用其他不必要的组件以减小文件大小。

#### 9. 检查缓存设置

首先，确保您在使用Elementor时启用了适当的缓存或优化插件，这将帮助将所有页面作为静态页面提供，从而提升加载速度。WP Rocket和Perfmatters是优化Elementor网站的两种最佳插件。然而，在使用WP Rocket或其他缓存插件优化CSS交付功能时需要谨慎，因为当您在Elementor中添加了动态CSS时，删除未使用的CSS或生成关键路径CSS可能无法正常工作。如果您优化了网站上的CSS交付，建议禁用“Improve CSS Loading”实验，并选择使用外部CSS文件选项。或者，您可以从CSS优化中排除动态文件，因为动态资源会在每个页面上发生变化，需要使用缓存/优化插件允许的通配符格式进行排除。如果您将Elementor用于文章或其他自定义文章类型，建议使用Perfmatters或Asset Cleanup插件，这些插件允许您在特定文章和站点级别禁用未使用的CSS和JS文件。

#### 10. Cloudflare Rocket Loader

当用户从全球访问您的页面时，CDN可以将您的内容从最近的服务器传输到用户的位置，从而提升加载速度。许多用户使用托管公司提供的免费Cloudflare CDN以及Elementor设置。Cloudflare提供了一项名为Rocket Loader的功能，可帮助改进基于JavaScript的页面加载。然而，它可能会在Elementor编辑器中以及已发布的页面上产生问题。如果您发现编辑器在滚动或发布页面时运行缓慢且出现跳跃，可以尝试禁用Rocket Loader功能并检查效果。如果Rocket Loader是问题所在，您可以使用Cloudflare中的页面规则忽略Elementor页面和模板来解决问题。

#### 11. 优化托管设置

Elementor和WooCommerce等重型插件需要优化的托管环境来提升页面加载速度。之前，您可能需要寻找SiteGround Cloud、Cloudways或其他VPS托管平台来使用Elementor页面构建器。现在，Elementor团队自己提供了与谷歌云平台和Cloudflare CDN集成的优化托管方案。尽管该方案有10万次访问、100GB带宽和20GB空间的限制，但您可以轻松启动网站，并以每年99美元的价格购买Elementor Pro。Pro版本提供了针对Elementor的完全优化设置，并搭配Hello Elementor等主题，使您的网站快速加载。

#### 12. 图像优化

大尺寸图像，尤其是用于折叠区域上方的图像，会导致加载最大内容绘画的问题。此外，未正确优化的其他图像也会影响加载速度。

– 减小图像的大小和尺寸，特别是用于折叠区域上方的图像。
– 延迟加载图像，仅在用户滚动到该位置时加载。
– 使用WebP格式，以减小文件大小并提升加载速度。

### 小结

Elementor插件因其拖放式元素和吸引人的可重用模板而广受欢迎。然而，如今速度已成为比美观页面布局更重要的因素。您可以利用Elementor默认的实验性设置和其他优化功能来修复缓慢的站点并提升页面加载速度。此外，您还可以尝试Elementor优化的Hello Elementor主题和高级云托管方案，让您的网站更上一层楼。