Elementor是一个免费的WordPress页面构建器插件，拥有超过500万个活动安装。此外，该插件还具有高级版本和数百个附加组件，可在您的网站中添加精美的元素。
与任何其他页面构建器插件一样，Elementor添加了自定义样式和脚本，为页面的前端外观添加了令人惊叹的因素。但是，它会在前端和后端影响您网站的页面加载速度的高成本。如果由于Elementor页面构建器而导致网站速度缓慢，您可以尝试以下一些选项来解决速度问题。
修复缓慢的Elementor插件
页面速度和用户体验是谷歌搜索算法中的排名因素。因此，与使用拖拽页面速度的Elementor添加美化元素相比，您必须重视加快网站速度。幸运的是，Elementor在插件设置中提供了一些优化功能。此外，您可以优化可能影响Elementor页面加载速度的外部因素。
使用Elementor设置优化页面速度
让我们首先探索这些设置，如果这些设置不能解决您的问题，那么您应该检查其他解决方案。
1. 仅对页面启用Elementor
默认的WordPress设置允许您创建两种文章类型——文章和页面。此外，像WooCommerce这样的插件将创建产品，您还可以根据需要创建自定义文章类型。我们强烈建议只为页面启用Elementor，而不是为文章和其他自定义文章类型启用。这有助于在前端和后端禁用除页面之外的Elementor资源的加载。当您激活Elementor插件时，它将默认为文章和页面启用。您可以转到“Elementor > Settings”菜单并在“General”选项卡下禁用文章插件。
为文章禁用Elementor
2. 使用Elementor Experiments
该插件在“Experiments”选项卡下提供了许多实验性功能。在这里，您可以看到正在进行的实验以及已完成并被接受为稳定功能的实验。为了提高加载速度，您可以在稳定和持续部分下启用所有与速度相关的项目。
激活以下正在进行的实验：
- Improved Asset Loading – 此选项将减少加载的默认代码并仅在需要时动态加载剩余代码。
- Improved CSS Loading – 这与上面的功能相同，仅在需要时加载CSS。
- Inline Font Icons – 禁用Font Awesome和eicon的加载并加载内联SVG图标。
Elementor正在进行的实验
激活以下Stable实验：
- Optimized DOM Output——这将减少HTML wrappers的数量以提高速度。
Elementor Stable功能
确保在启用正在进行的实验后彻底测试您的网站，因为它们可能会破坏您网站的布局。例如，动态加载资源会影响使用WP Rocket和其他插件删除未使用的CSS等功能。
3.优化字体使用
使用Google字体和其他自定义字体会在Google PageSpeed Insights中产生很多问题。例如，当您使用带有Elementor插件的Google Fonts时，您会看到在加载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中的文本可见性警告。
使用外部CSS文件并交换Google字体
4.使用外部CSS文件
正如您在上面的屏幕截图中看到的那样，Elementor允许两个“CSS Print Method”选项。一种是使用“External File”，另一种是使用“Internal Embedding”。选择“External File”选项，以便将所有CSS样式作为外部文件加载。之后转到“Elementor > Tools > General”部分，然后单击“Regenerate Files & Data”。这将重新生成数据并作为外部CSS文件加载。它将有助于正确缓存页面并提高速度，而不是动态注入无法缓存的CSS。
Elementor中的安全模式和文件重新生成
5.尝试安全模式
如果您在创建或编辑页面时遇到加载缓慢的Elementor编辑器，则可以使用“Elements > Tools > General”部分下的安全模式。安全模式会在加载缓慢时在编辑器中显示建议。
Elementor Editor以安全模式打开
同样，您可以启用“Debug Bar”选项来查找页面上加载的模板。当您尝试解决问题时，此信息可用于故障排除。
6.回滚插件
最后，如果您在升级Elementor后遇到任何问题，可以选择恢复到以前的版本。与任何回滚一样，请确保备份数据库以备不时之需。转到“Elementor > Tools > Version Control”部分。您可以重新安装当前版本，也可以选择要回滚的任何先前版本。
回滚Elementor插件
提高Elementor速度的其他因素
以上所有因素都在Elementor设置范围内，以下是可能影响您网站速度的外部因素。
7.使用轻量级主题
尽管Elementor是一个独立的插件，但许多商业主题都将Elementor与其他功能捆绑在一起。由于这些主题是自定义编码来创建页面布局的，因此很容易产生冲突并影响加载速度。我们建议使用带有免费Elementor入门模板的轻量级主题，例如Astra或GeneratePress。
另一种选择是使用来自同一插件开发人员的Hello Elementor主题。这个主题有超过100万个活动安装，并且在不知不觉中可以与Elementor顺利配合。它具有最小的设计，主要与Elementor模板一起使用。因此，如果您真的喜欢Elementor插件，那么Hello Elementor是您拥有优化网站的最佳主题。
免费Hello Elementor主题
8. 减少附加组件的数量
有数百个第三方插件可用作Elementor页面构建器插件的附加组件。这些插件将为基础插件添加额外的元素以创建漂亮的布局。但是，这些插件可能无法很好地与父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优化中排除动态文件。由于动态资源会在每个页面上发生变化，因此您需要使用缓存/优化插件允许的通配符格式排除它们。
如果您将Elementor用于文章或任何其他自定义文章类型，那么我们强烈建议您使用Perfmatters或Asset Cleanup插件。使用这些插件，您可以在特定文章和站点级别禁用未使用的CSS和JS文件。
9. Cloudflare Rocket Loader
当用户从全球访问您的页面时，CDN有助于将您的内容从最近的服务器传送到用户的位置。这适用于Elementor页面和您的整个网站。许多用户使用托管公司提供的免费Cloudflare CDN以及Elementor设置。Cloudflare提供了一项名为Rocket Loader的功能，可帮助改进基于JavaScript的页面的加载。但是，它可能会在Elementor编辑器中以及在已发布的页面上产生问题。如果您发现编辑器在滚动或发布页面损坏时运行缓慢和跳跃，请禁用Rocket Loader功能并检查它是否有效。
如果Rocket Loader是问题所在，那么您可以使用Cloudflare中的页面规则忽略Elementor页面和模板来解决问题。
10.优化托管设置
Elementor和WooCommerce等其他重型插件需要优化的托管来更快地加载您的页面。之前，您需要寻找SiteGround Cloud、 Cloudways或任何其他VPS托管平台来使用Elementor页面构建器。现在Elementor人自己提供了一个优化的托管与谷歌云平台和Cloudflare CDN。尽管这有10万次访问、100GB带宽和20GB空间的限制，但您可以轻松启动网站并以每年99美元的价格购买Elementor Pro。您可以获得针对Elementor的完全优化设置，并且您的网站将使用Hello Elementor等主题快速加载。
11. 图像优化
最后，在折叠区域上方使用的大尺寸图像将产生加载最大内容绘画的问题。此外，其他图像如果未正确优化也会产生问题。
- 减小图像的大小和尺寸，尤其是用于折叠区域上方的图像。
- 延迟加载图像以仅在用户滚动到该位置时加载它们。
- 使用WebP格式来减小大小并更快地加载它们。
小结
像Elementor这样的插件因拖放元素和有吸引力的可重用模板而变得流行。然而，现在情况完全改变了，与漂亮的页面布局相比，速度是最重要的因素。您可以利用默认的Elementor实验和其他设置来修复缓慢的站点并提高页面加载速度。此外，您还可以尝试他们优化的Hello Elementor主题和高级云托管，让您的网站更上一层楼。
原文地址：https://www.wbolt.com/speedup-elementor.html
