更新您的 PHP 版本
Elementor可能是最流行的 WordPress 页面构建器。不幸的是，许多出色的功能和附加组件也为您的 WordPress 网站添加了大量代码。
在本文中，我将向您展示如何使 Elementor 变得更快，并在 Google PageSpeed 中获得 90 多分的分数，尽管它是最伟大的页面构建器。当然，通过这些技巧，您还可以出色地通过臭名昭著的 Core Web Vitals。
首先讲一个小故事：当我将头和笔切换到 Elementor 后，我什至没有注意到加载时间很慢。然而，后来由于排名下降，我注意到了：有些不对劲！
经过长时间的研究（在许多论坛中，Elementor 被不公平地批评为缓慢的页面构建器），我考虑切换到Kadence 主题。这应该会让 WordPress 网站变得非常快。然后我发现了WPcrafter.com。
这位先生也使用 Elementor，页面速度得分为 97。所以它 葡萄牙手机号码 必须能够工作：Elementor 具有闪电般的加载时间。就这样，我在浩瀚的 Pagespeed Ocean 上开始了冒险之旅。最后，还有新的 Google Core Web Vitals。最流行的页面构建器插件也可以轻松处理这个问题。
我现在的页面速度得分为 92（可能更高），并且仍然可以利用 Elementor 的优势。
但现在我想向您展示如何使 Elementor 和 Wordpress 更快。
Elementor 的性能优化
在我们开始改进 Elementor 的加载时间之前，需要考虑一些基本注意事项。并非每个 WordPress 安装都是相同的。一个简单的速度插件只能帮助你这么多。
这就是为什么您应该密切关注网站上加载的内容。以及何时。在线工具GTMetrix和Webpagetest.org中的瀑布图也将为您提供帮助。
当然，像WP Rocket这样的开箱即用的解决方案非常方便和舒适。但仅靠这个你无法突破 90 页的速度限制。但不用担心：优化加载时间也很有趣。
因此，您应该牢记以下提示和技巧，以缩短 Elementor 的加载时间。
停用无用的插件
这听起来似乎很明显，但插件是 WordPress 网站加载时间较长的主要原因。当我仔细观察时，我还意识到我的插件太多了。这就是为什么您应该尝试尽可能多地使用内部 Elementor 函数来覆盖函数。例如，我安装了Gravity Forms ……现在使用 Elementor 表单。毕竟，无论如何这都会被加载。
要查看何时加载哪个插件，可以查看 GTMetrix 上的瀑布图。当然，您应该事先停用缓存和其他速度插件。我们希望看到主网站，而不是任何缓存和缩小的 CSS 文件。通常只需查看文件名就可以知道这些文件属于哪些插件。
根据瀑布图中各个条形的长度，您可以立即知道应该从哪里开始优化性能。
激活 Elementor 实验
在 WordPress 安装的仪表板中，单击 Elementor → 设置 → 实验
然后设置选项，如下面的屏幕截图所示：
优化的 DOM 输出- 通过删除不必要的 div 包装器（elementor-inner、elementor-row 和 elementor-column-wrap）来避免 PSI 中过多的 DOM 大小。
改进的资源加载- 修复了 Pagespeed 工具中的“减少未使用的 JavaScript”问题。通过在实际使用时动态加载小部件 JS 处理程序和滑动器。 Elementor 本身声明：“为了使此实验正常进行，您必须使用 Elementor Pro 版本 3.0.9 及更高版本。”
改进了 CSS 加载- 修复了 PageSpeed Insights 中的“减少未使用的 CSS”和“消除阻止渲染的资源”。 Widget CSS 和动画仅在页面上实际使用时加载，同时应用内联 CSS。在Elementor 测试中激活它可以节省 177 KB 。
Font-Awesome 内联– Font Awesome 图标作为 SVG 内联加载，无需加载整个库，从而防止来自其他 CSS 和字体文件的请求加载到您的网站上。
使用快速 WordPress 托管
您可以根据需要尽可能多地优化您的 Elementor 网站 - 如果您的网络空间速度很慢，那么此处提供的优化技巧对您来说毫无用处。由于您使用 WordPress，因此您还可以使用专门针对 WordPress 优化的网络空间。
我已经在我的博客中写过有关最佳 WordPress 主机的文章。因此，我会推荐Raidboxes、All-Inkl（没有明确的 WP 托管服务）或Hostpress。
如果您使用 WebGo、HostEurope、1und1 或 Strato，您应该考虑切换到更好的网络主机。您的 WordPress PageSpeed 将会感谢您！
优化您的图像（使用插件）
使用图像时应记住以下几点：
适当大小的图像- 避免过大的图像（调整它们的大小）。
压缩图像- 使用像ShortPixel这样的图像优化插件。
WebP 图像格式– Google 推荐的下一代图像。 （？？？？ 教程）
图像、iframe、视频的延迟加载– 具有各种性能插件。请务必停用首屏图像。
从图像中删除 EXIF 数据– 删除图像中无用的数据，例如拍摄照片时的日期、时间、位置和相机设置。由大多数图像优化插件执行。
指定图像尺寸- 确保每个图像都有 HTML 中指定的宽度和高度。 WP Rocket 可以选择在媒体设置中添加缺失的图像尺寸。
使用自适应图像- 为移动用户提供较小的（自适应）图像。这是您可以采取的为数不多的改善移动加载时间的措施之一。这是通过自适应图像插件完成的。
在本地托管和预加载字体
您可以将 Google Webfonts（当然还有其他网络字体）保存在您的网站本地。这将阻止您的网站从 fonts.gstati.com 加载网络字体。当然，这在数据保护方面也有一些优势。这意味着您的字体不需要Cookie 通知。另一方面，避免了来自 Google Fonts 的额外代码，并且您还可以预加载字体。这意味着浏览器会尽快加载字体。
现在有一个功能可以将您自己的字体集成到 Elementor 中。为此，请转到 WordPress 仪表板中的 Elementor → 自定义字体。使用小工具Google Webfonts Helper，您可以下载所需格式的 Google 字体。然后您可以将其加载到 Elementor 中。另请确保您现在已在全局字体（在 Elementor 设置中）下选择了上传的字体。
如果您无法在 Elementor 中停用 Google Webfonts，您还可以将这段小代码集成到子主题的functions.php中：
添加过滤器（‘elementor/frontend/print_google_fonts’，‘__return_false’）；
这通常会停用 Google Webfonts。
一个小提示：在子主题的functions.php中使用以下代码来设置font-display属性以交换并节省几毫秒：
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
return 'swap';
}, 10, 3 );
确保您的自定义字体位于代码片段中指定的文件夹中。通过 Elementor 集成自定义字体时，字体会自动加载到此文件夹中。
配置性能插件
可能是这个列表中最重要的一点。如果没有缩小、缓存和交错加载，什么都行不通。这就是为什么您应该获取WP Rocket（或其他 WordPress 性能插件）。
但到目前为止我最喜欢的是WPRocket。这会花费你金钱，但会节省你很多时间。它是一个（几乎）一体化的解决方案。因此，WPRocket 不仅仅是一个缓存插件。现在它甚至会自动从代码中删除无用的 CSS。
您可以在此处了解如何使用 Elementor 设置 WP Rocket 。你应该经常测试。这需要一段时间。然而，Elementor 与 Wp Rocket 的一般说明并不总是适合特殊情况。
只需尝试设置 → WP Rocket → 文件优化下的相应复选标记即可。在这里您将找到最强大的工具来使用 WP Rocket 优化您的 WordPress 网站。
性能插件始终致力于缩小 CSS 文件、强大的缓存和 JavaScript 文件的交错加载。
确保您始终在隐身浏览器窗口（即没有浏览器缓存）中检查您的网站是否仍然没有错误。
删除 Elementor CSS 和 JavaScript
Elementor、Elementor Pro 和大多数 Elementor 插件都会向您的 WordPress 网站添加额外的 CSS 和 JavaScript。许多 Lighthouse 元素与 CSS 和 JavaScript 相关（这是许多使用主要页面构建器的网站在 Google Core Web Vitals 中受到惩罚的一个重要原因）。 Elementor 的实验菜单应该有助于减小 CSS 和 JavaScript 文件大小。但是，您仍然应该使用禁用 CSS 和其他代码的插件。
使用Perfmatters插件（免费版本是Asset CleanUp），您可以选择在哪个子页面上加载哪些代码。我喜欢 Perfmatters – 但 Asset CleanUp 也很有效。
安装 Perfmatters 后，您可以在此处找到此选项：设置 → Perfmatters → 选项 → 资源 → 启用脚本管理器
如果您现在在浏览器中查看网站的子页面，您会在顶部找到“脚本管理器”选项。您现在可以单击它并停用每个页面的脚本。 Perfmatters 还为您提供了按帖子、自定义帖子类型或页面停用脚本和资产的选项。请注意脚本管理器中的左栏。
现在您可以停用以下元素（针对您的整个网站）：
elementor-sticky（如果您不使用粘性标头）
swiper.js（如果您不使用 Elementor Slider）
elementor-dialog（如果您不使用弹出窗口）
分享链接（如果您不使用灯箱）
elementor-animations（如果您不使用动画（向上滑动、向下滑动等））
Elementor 图标（如果您不使用 Elementor 图标）
以下是有关可以停用哪些脚本和资源的一些提示：
在任何地方禁用联系表单（联系页面除外）
在任何地方禁用您的社交共享插件（博客文章除外）
停用表格插件（使用表格的地方除外）
停用 WooCommerce（商店页面除外）
禁用来自插件的所有功能（除了您使用它的页面）
在页面构建器中优化您的布局
Elementor 中的每个列和小部件都消耗代码。并且代码需要加载时间。因此，您应该仔细查看您的 WordPress 子页面。这也与内容有关——它在性能优化中发挥着很大的作用。
在本视频中，您还将了解如何节省小部件和列的费用。不幸的是，它是英文的——但这 15 分钟是值得的。
另一个强烈推荐的有关 Elementor 布局优化的视频是：
对页眉和页脚进行编程
这个技巧只适合绝对的书呆子。通过不使用主题生成器来构建页眉和页脚，而是使用模板（即子主题文件夹中的 footer.php 和 header.php），您可以在每个子页面上节省重要的毫秒时间。这使得 WordPress 更快。
如果你正在考虑这个问题，你也可以尝试在 Fiverr 上寻找WordPress 自由职业者。然后，他可以在代码中重新创建您的 Elementor 页眉和页脚。不幸的是我没有时间做这些小事；）
使用尽可能少的 Elementor 插件
当然：Elementor 插件是为您的网站提供更多设计和交互性的好方法。然而，这些插件也使用额外的代码。
一开始我也非常高兴并安装了五个不同的 Elementor 插件。 PageSpeed 测试带来了幻灭。
所以我部分拆除了 Elementor 插件。大多数事情都可以使用 Elementor 和 Elementor Pro 的基本小部件来实现。
顺便说一句，查找未使用的 Elementor 插件的一个很棒的工具是Widget Detector for Elementor。该插件会向您显示在哪里使用插件的哪个小部件。然后您可以再次停用该插件。
在 Elementor Addons 中：禁用未使用的小部件
那么您绝对必须使用 Elementor 插件并且离不开它吗？
许多 Elementor 插件（除ElementsKit之外的所有插件）都为您提供停用未使用的模块（小部件）的选项。这意味着不再加载关联的代码，并且您可以节省几毫秒的页面速度。
使用 Elementor 的 Hello 主题
内部 WordPress 主题Hello没有任何主要脚本、代码或样式。它是为 Elementor 开发的。这就是为什么你绝对不应该使用巨大的主题而应该使用较小的主题。
Astra 主题和GeneratePress也是Hello 主题的不错替代品。免费版本足以满足这两个主题。
避免在移动设备上使用大元素
当谈到加载时间优化时，通常与移动得分较低有关。在桌面上一切通常都很棒 - 但在智能手机上通常没有亮点。
这就是为什么您应该始终在 Elementor 的响应模式下检查您的网站并避免使用大型内容元素。它们影响性能。
例如，将滑块替换为背景图像。避免使用不必要的图像，并且不会为您的内容提供任何附加价值。还要考虑您网站的用户。
谷歌有移动优先的原则。这就是为什么您应该关注移动分数。
