欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」如何解决Elementor加载缓慢问题?

作者 : 自学哈 本文共4194个字,预计阅读时间需要11分钟 2022-11-26 共176人阅读
也想出现在这里? 联系我们

如何解决Elementor加载缓慢问题?

Elementor是一个免费的WordPress页面构建器插件,拥有超过500万个活动安装。此外,该插件还具有高级版本和数百个附加组件,可在您的网站中添加精美的元素。

与任何其他页面构建器插件一样,Elementor添加了自定义样式和脚本,为页面的前端外观添加了令人惊叹的因素。但是,它会在前端和后端影响您网站的页面加载速度的高成本。如果由于Elementor页面构建器而导致网站速度缓慢,您可以尝试以下一些选项来解决速度问题。

修复缓慢的Elementor插件

页面速度和用户体验是谷歌搜索算法中的排名因素。因此,与使用拖拽页面速度的Elementor添加美化元素相比,您必须重视加快网站速度。幸运的是,Elementor在插件设置中提供了一些优化功能。此外,您可以优化可能影响Elementor页面加载速度的外部因素。

使用Elementor设置优化页面速度

让我们首先探索这些设置,如果这些设置不能解决您的问题,那么您应该检查其他解决方案。

1. 仅对页面启用Elementor

默认的WordPress设置允许您创建两种文章类型——文章和页面。此外,像WooCommerce这样的插件将创建产品,您还可以根据需要创建自定义文章类型。我们强烈建议只为页面启用Elementor,而不是为文章和其他自定义文章类型启用。这有助于在前端和后端禁用除页面之外的Elementor资源的加载。当您激活Elementor插件时,它将默认为文章和页面启用。您可以转到“Elementor > Settings”菜单并在“General”选项卡下禁用文章插件。

为文章禁用Elementor

为文章禁用Elementor

2. 使用Elementor Experiments

该插件在“Experiments”选项卡下提供了许多实验性功能。在这里,您可以看到正在进行的实验以及已完成并被接受为稳定功能的实验。为了提高加载速度,您可以在稳定和持续部分下启用所有与速度相关的项目。

激活以下正在进行的实验:

  • Improved Asset Loading – 此选项将减少加载的默认代码并仅在需要时动态加载剩余代码。
  • Improved CSS Loading – 这与上面的功能相同,仅在需要时加载CSS。
  • Inline Font Icons – 禁用Font Awesome和eicon的加载并加载内联SVG图标。

Elementor正在进行的实验

Elementor正在进行的实验

激活以下Stable实验:

  • Optimized DOM Output——这将减少HTML wrappers的数量以提高速度。

Elementor Stable功能

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字体

使用外部CSS文件并交换Google字体

4.使用外部CSS文件

正如您在上面的屏幕截图中看到的那样,Elementor允许两个“CSS Print Method”选项。一种是使用“External File”,另一种是使用“Internal Embedding”。选择“External File”选项,以便将所有CSS样式作为外部文件加载。之后转到“Elementor > Tools > General”部分,然后单击“Regenerate Files & Data”。这将重新生成数据并作为外部CSS文件加载。它将有助于正确缓存页面并提高速度,而不是动态注入无法缓存的CSS。

Elementor中的安全模式和文件重新生成

Elementor中的安全模式和文件重新生成

5.尝试安全模式

如果您在创建或编辑页面时遇到加载缓慢的Elementor编辑器,则可以使用“Elements > Tools > General”部分下的安全模式。安全模式会在加载缓慢时在编辑器中显示建议。

Elementor Editor以安全模式打开

Elementor Editor以安全模式打开

同样,您可以启用“Debug Bar”选项来查找页面上加载的模板。当您尝试解决问题时,此信息可用于故障排除。

6.回滚插件

最后,如果您在升级Elementor后遇到任何问题,可以选择恢复到以前的版本。与任何回滚一样,请确保备份数据库以备不时之需。转到“Elementor > Tools > Version Control”部分。您可以重新安装当前版本,也可以选择要回滚的任何先前版本。

回滚Elementor插件

回滚Elementor插件

提高Elementor速度的其他因素

以上所有因素都在Elementor设置范围内,以下是可能影响您网站速度的外部因素。

7.使用轻量级主题

尽管Elementor是一个独立的插件,但许多商业主题都将Elementor与其他功能捆绑在一起。由于这些主题是自定义编码来创建页面布局的,因此很容易产生冲突并影响加载速度。我们建议使用带有免费Elementor入门模板的轻量级主题,例如Astra或GeneratePress。

另一种选择是使用来自同一插件开发人员的Hello Elementor主题。这个主题有超过100万个活动安装,并且在不知不觉中可以与Elementor顺利配合。它具有最小的设计,主要与Elementor模板一起使用。因此,如果您真的喜欢Elementor插件,那么Hello 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主题和高级云托管,让您的网站更上一层楼。

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」如何解决Elementor加载缓慢问题?
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号