她与 Elementor 合作良好，以确保您的图片优化达到最高标准，并且您的网站速度很快.

我们将看看她的一些很棒的功能，这些功能与 Elementor 和您正在使用的任何主题配合使用.它们包括:

• 批量处理所有元素图像
• 自动压缩新上传的内容
• 双倍压缩的超级粉碎
• 使用 Smush 的图像调整大小添加更大的图像
• 将您的 PNG 转换为 JPEG
• 从媒体库中抹去
• 延迟加载
• 利用 Smush 的 CDN
  

批量处理所有元素图像

根据您构建的 Elementor 网站，您的网站上可能已经安装了大量图像.

幸运的是，Bulk Smush 功能可以通过点击 Smush 的仪表板来解决这个问题.

完成后，Smush 会通知您.

使用 Smush，您还可以排除特定图像(例如缩略图).

这是使用 Elementor 快速优化图像的完美方式.

在此处了解有关批量清除的更多详细信息.

自动压缩新上传

每当您向 Elementor 添加新图像时，它都可以一键自动压缩.

在 Smush 的仪表板中，您可以快速开启此选项.

仅此而已！您的所有新图片都将被压缩.

双倍压缩的超级粉碎

想要在 Elementor 中将图像压缩提升一个档次吗? Super-Smush 可以提供高达常规 smushing 两倍的压缩.它通过去除每一盎司不需要的数据来做到这一点.

最好的是，它是有损压缩，所以质量有一些非常小的下降.在大多数情况下，它对人眼来说非常小且不易察觉.

与 Smush 的大多数操作一样，您可以通过管理员一键完成此操作.

Super-Smush 已准备好用于您的所有 Elementor 图像.

检查一下，看看您是否注意到图像质量有所不同.我们猜你不会.

使用 Smush 的图像调整大小添加更大的图像

当您上传高度或宽度大于 2560 像素的图片时，WordPress 会自动缩小图片，以便生成针对网络优化的最大图片尺寸.

如果您想将更大的图像添加到您的媒体库中，您可以使用 Smush 的图像调整大小来覆盖它.

点击后，您可以选择新的最大图片尺寸.

您还可以选择是否在 Bulk Smush 中包含全尺寸图像.

您可以使用图像调整大小来控制全尺寸图像.

将您的 PNG 转换为 JPEG

根据您使用的 Elementor 页面构建器模板，您可能会发现使用这两种文件类型中的一种比另一种效果更好.话虽如此，在速度方面，通常使用 JPEG 而不是 PNG 应该是一个很好的增强.

Smush 会为您检查将它们转换为 JPEG 是否会减小文件大小并帮助加快您的 Elementor 网站的速度.

自动转换您的 PNG 文件再简单不过了.

从媒体库中提取

您可以选择从媒体库中选择单个图像进行压缩.

激活 Smush 后，您会看到一个名为 Smush 的新列.它将向您显示优化了哪些图像.如果不是，您可以点击 Smush 并一键优化.

你想要的一切都触手可及.

在 Elementor 中延迟加载您的图像以提高速度

您的页面可能包含大量图像.有时，同时显示它们会给服务器带来压力.

使用延迟加载，它会停止加载屏幕外图像，直到用户滚动到它们为止.这使您的页面加载速度更快，使用的带宽更少，并通过 Google PageSpeed 测试修复了"延迟屏幕外图像"建议.

您可以使用延迟加载做很多事情，包括您希望预加载图像的显示方式、动画选择以及图像显示出现之前的持续时间.

您可以在这篇文章中阅读有关延迟加载的更多信息.

利用 Smush 的 CDN

当您靠近提供内容的服务器时，它会加载得更快.这就是 CDN(内容交付网络)所做的.它是一系列遍布全球的服务器，因此当浏览器发出 HTTP 请求时，内容会从最近的服务器提供到其位置.

此功能可用于 Smush Pro，非常值得使用.它拥有一个 45 点的 CDN.此外，它还可以自动调整您的图片大小并将其转换为 Google 的 WebP 格式.

CDN 将通过存储和提供来自 Smush 边缘服务器的所有 JPG、PNG 和 Gif 图像的副本来提高任何图像密集型 Elementor 网站的页面速度.

对于高级选项，Smush Pro 的 CDN 包括提供背景图像、自动调整大小、WebP 转换以及从 WordPress 中的 REST API 请求转换图像. >

在此处获取更多详细信息 Smush 的 CDN.

如何使用 Hummingbird 优化 Elementor

Hummingbird 和 Elementor 在制作方面组成了一个伟大的团队您的网站更快.她通过使用文件压缩微调控件来帮助优化您网站的性能，缩小 CSS 和JS、评论延迟加载等等.

她是一个 4.5 星级的免费插件，在 wp.org 上的活跃安装量超过 10 万(而且还在增加！).

通过快速扫描您的 Elementor 网站，她将提供一键式修复，帮助您轻松加快网站速度.

我们将详细介绍她为改进您的 Elementor 网站并使其飞速发展所能做的所有细节.一起来看看:

• 通过性能测试评估您的网站
• 通过缓存提供更快的页面和内容
• Gzip 压缩可减少文件大小以加快服务速度
• 通过资产优化提高页面速度

通过性能测试评估您的网站

立即，Hummingbird 允许您运行性能测试以查看您的 Elementor 站点的情况.您可以通过点击运行测试一键开始.

运行测试后，Hummingbird 会向您显示机会、诊断和通过的审计.此外，您还可以查看桌面与移动的结果.

只需在桌面和移动设备之间点击即可.

下面列出了所有详细信息.它始于机会.这些是提高页面加载速度的建议.

接下来是诊断.这提供了有关您的网页如何遵循网络开发最佳实践的更多信息.

最后，您可以查看所有通过的审核.它包括得分为 90 或更高的所有内容.此外，您可以点击每个类别的下拉菜单以了解更多信息.

性能测试是从一开始就评估您的 Elementor 网站的好方法，因此您可以立即看到可以改进的地方.

在我们关于优化 Hummingbird 的文章中阅读有关性能测试的更多信息.

通过缓存提供更快的页面和内容

如果您还没有听说过，缓存可以加快页面加载速度.Hummingbird 的优点在于她提供了多种类型的缓存，由于有多种页面选项，因此在将 Elementor 与您的 WordPress 主题一起使用时效果很好. >

她的缓存能力包括页面缓存、浏览器缓存、Gravatar 缓存和RSS缓存.此外，如果您的网站是通过我们托管，您的网站速度将通过对象缓存、Redis 对象缓存进一步提高 和静态服务器缓存.

您将控制其缓存功能的各个方面.这使得 Hummingbird 非常适合 Elementor，因为每个页面构建器都是不同的，并且包含的​​配置也会有所不同.

您可以查看所有功能并更详细地了解 Hummingbird 的缓存在我们的文档中.

Gzip 压缩可减少文件大小以加快服务速度

借助 Hummingbird 的 Gzip 压缩，您的 Elementor 页面可以通过将您网站的基于文本的资源压缩成更小、更紧凑的文件来加载用户的浏览器速度更快.

如果您不与我们托管，您可以更改 Gzip 压缩以适合您的服务器类型(例如 Apache)并按照说明将其激活.

通过资产优化提升页面速度

Hummingbird 的资产优化区域是您在优化 Elementor 网站时可以轻松自动化或手动配置高级选项的地方.

您可以在两种模式下使用资产优化:

自动:根据 Hummingbird 的自动选项优化您的资产并缩短页面加载时间.

手动:自己手动设置每个文件，以实现 Elementor 网站所需的准确设置.

激活资产优化后，Hummingbird 会立即扫描您的 WordPress 网站的资产，以指出可以优化性能的资产.

蜂鸟的资产优化可以进行很多调整和调整.请务必阅读我们的文档，了解如何进行微调才能使您的网站获得最大优化.

增强两个顶级 WordPress 主题的示例-Hello Elementor & Astra — 与 Smush、Hummingbird 和 Elementor 合作

既然我们已经大致了解了 Smush 和 Hummingbird 可以做什么来增强您的 Elementor 网站的性能，让我们使用两个流行的 Elementor 主题:Hello Elementor 和 Astra.

如前所述，我们将使用 Elementor 的免费版本，因此初始设置不涉及任何费用(同样，Smush 和 Hummingbird 也是免费的).

这是一个新网站，除了 Elementor 和主题外，一开始没有安装其他页面、插件或任何东西.

我们将介绍添加所有这些功能以及它们所带来的不同.将其全部分解，我们将这样做:

• 使用 Elementor 页面构建器内容和主题设置 WordPress 网站
• 使用 Google PageSpeed Insights 和 运行速度测试href="https://gtmetrix.com/" rel="noopener" target="_blank">GTmetrix
• 激活 Hummingbird 和 Smush 并设置推荐
• 再运行一次速度测试
• 激活托管功能(例如快速 CGI)
• 运行最终速度测试

请记住，每个网站都会有所不同.位置、图像数量、您的主机和其他因素会产生影响.但是，这应该让您大致了解可以做什么，然后您可以在基于 Elementor 的 WordPress 网站上对其进行相应调整.

你好元素

首先，我们将从 Hello Elementor 开始 主题.这个免费主题是 Elementor 用户的最爱，由 Elementor 创建，所以你知道它很好.

我们已经建立了一个使用此主题的网站，并已激活登陆页面 – 酒店页面 来自 Elementor 的图书馆.这个主题包含少量图片和文字，是一个很好的例子.

我还将此页面设为了我的主页.您可以通过转到外观>来确保完成此操作.自定义 >首页设置并选择此着陆页.

既然已经安装了，我们就可以开始了！让我们在这个网站上做一个快速的速度测试.我们将从 Google PageSpeed Insights 开始.

输入 URL 时，这是我们的 Google PageSpeed Insights 分数:

现在让我们使用 GTmetrix 来检查一下.

我会注意到，我使用的是 GTmetrix 的服务器位置(加拿大温哥华)和浏览器(Chrome)的默认设置.在所有这些示例中，这一点都不会改变.

让我们继续激活 Smush 和 Hummingbird，看看我们想出了什么.

我将首先与 Hummingbird 进行性能测试，并查看她的建议.

一旦这样做，她提到我们的得分为 56/100，并提供了多种机会，例如预加载关键请求、消除渲染阻塞资源、减少初始服务器响应时间以及删除未使用的 CSS.

此外，她的诊断表明我们应该确保在 webfont 加载期间文本保持可见.

它还显示有 15 个通过审核 (yippee!).

我会继续处理所有可能的建议.Hummingbird 中的下拉菜单准确地提到了如何处理推荐.

例如，此处 Hummingbird 展示了如何删除未使用的 CSS.

我还激活了 Hummingbird 的页面缓存以帮助缩短初始服务器响应时间、优化我的资产并结合 &压缩资产.

接下来，我将继续激活 Smush.

Smush 马上指出我有 61 个图像和附件需要清理，这可以帮助我节省大约 815.5 kb.我将一键批量处理这些.

片刻之后，结果如下:

如您所见，总共节省了 872.5 kb/9.3%.

现在，让我们继续检查我们的页面速度.

首先，这是 Google PageSpeed Insights:

这里是 GTmetrix:

尽管我对这个分数很满意并且没有比这更好的了，但我会进一步提高成绩.

我将继续在 Hummingbird 的资产优化部分启用我们的 CDN.无论您是托管还是其他公司，您都可以启用此功能以进行额外优化.

一键开启CDN.

有关 CDN 的更多信息以及为什么它对网站速度有益，请务必查看这篇文章.

此外，为了确保我拥有最佳速度，我将在 The Hub 中的 Tools 下打开 Static Server Cache strong> 使用 FastCGI.

现在，通过所有这些调整，我使用 Hello Elementor 主题的 Elementor 网站已针对速度进行了优化！

现在让我们来看看使用 Elementor、Hummingbird 和 Smush 优化流行的 Astra 主题.

阿斯特拉

Astra 是另一个非常受欢迎的主题，与 Elementor 配合得很好.wp.​​org 拥有超过 100 万的活跃下载量和坚如磐石的 5 星评价，您知道它是许多 Elementor 用户的不错选择.

与 Hello Elementor 一样，我们建立了一个使用此主题的网站并激活了 登录页面-酒店页面来自 Elementor 的图书馆.

此外，与之前一样，我将酒店页面设为我的主页.

让我们继续进行 Google PageSpeed Insight 速度测试，看看效果如何.

我多次运行此测试并不断得到相同的结果.这确实是一个糟糕的分数.

让我们看看如何使用 GTmetrix.

马上，在多次运行之后，它立即获得了"A"，性能得分为 97%，结构得分为 95%.成绩相当不错！但是，正如我之前提到的，这会因图像数量、位置、主机和其他因素而异.

此外，如果您不知道，Google 和 GTmetrix 之间的分数差异如此巨大是有原因的，原因是它们的测试方式不同.有关它们在测试站点方面有何不同的更多信息，在 GTmetrix 的网站上查看这篇文章.

现在，让我们看看我们是否可以通过激活 Hummingbird 和 Smush 来提高在 Google 上的分数并将 GTmetrix 提升到 A+.

我们将从 Hummingbird 开始并运行性能测试.

如您所见，有两次改进机会和 17 次通过审核.

为了改进，Hummingbird 建议消除阻止渲染的资源并删除未使用的 CSS.

我们将提出 Hummingbird 的建议，然后继续使用 Smush.

对于 Smush，她马上告诉我们有 15 个项目需要批量 smush，所以我们会继续这样做.

批量 smushing 结束后，我们将运行另一次 Google PageSpeed 测试(因为它的整流效果很差)，看看我们的样子.

因为它没有上升太多，让我们再尝试一些调整.

Smush 会为您推荐有助于提高分数的内容.在此示例中，它们包括:

• 为高级有损压缩启用 Super-Smush
• 确保图像大小适合我们的主题 (Astra)
• 启用调整全尺寸图片以将大图片缩小到合理的尺寸

既然我提出了 Smush 建议，让我们再看看.

正如你所看到的，它上升了一点.我们还没有达到 90-100；然而，通过一些调整，比如打开 Hummingbird 的 CDN 和 FastCGI，我们应该能够达到那个高分.

在此之前，让我们看看我们如何使用 GTmetrix 进行评分.

如您所见，这并没有太大变化.一开始就已经是不错的成绩了，还会有小幅波动.本质上是一样的(这很好).

最后，让我们把它推向高潮.

当打开 CDN 和 FastCGI (参见 Hello Elementor 示例中的操作示例)时，我们的分数立即通过 Google 提高.

我们或许可以在 Hummingbird 中进行一些微调，以最终获得更高的分数；然而，它在一个相当不错的地方.有了我们可以使用的所有工具，它也应该保持这种状态——而不是丢弃.

加速 Elementor 的一般提示

除了使用 Smush 和 Hummingbird，在加速 Elementor 方面，您还可以遵循一些基本技巧.

要记住的事情包括:

• 选择性能优化的主机，例如我们在 WPMU DEV 的主机.我们甚至提供完全适合 Elementor 的模板以进行全面优化(例如我们的慈善模板).
• 使用轻量级主题.
• 确保您的图片在 Smush 的帮助下得到优化.
• 摆脱缓慢、过时或未使用的插件.
• 缩小代码并连接文件
• 在 Hummingbird 的帮助下，使用页面缓存生成内容的静态 HTML 版本.

牢记这些提示，以确保您的 WordPress Elementor 网站得到优化以发挥其全部潜力.

Elementor 优化变得容易

毕竟我们在本文中介绍过，您的 Elementor WordPress 网站在性能、优化、托管及其所有功能方面应该处于良好状态.正如您所见，在 Hummingbird 和 Smush 的帮助下很容易做到.

每个站点都需要进行单独的调整和调整，但这只是将其微调至完美的问题.添加一些良好的托管，您将能够拥有一个令人惊叹的 Elementor 网站.

两个分数都在"7Os"或"C"范围内.我们绝对可以做得更好.

我想查看 Avada 的内置优化设置，在那里进行一些调整，看看我们是否能提高页面速度.

在选项/性能菜单标签中，以下是我所做的更改:

性能

• 图片延迟加载>>从无到Avada
• 字体渲染 >>从阻止到全部交换
• 预加载关键字体>>从图标字体到全部
• 在页脚中加载样式表 >>从关到开

动态 CSS & JS

• 异步加载媒体查询文件 >>从关到开

保存所有更改后，我们将检查速度.

让我们尝试我们的第一个优化插件，并激活 Smush.

导航到 Smush 仪表板后，您应该会看到快速设置向导.这些设置包括:自动压缩、EXIF 元数据、全尺寸图像、延迟加载和使用数据.

以下是每个功能的作用:

• 自动压缩― 将自动优化新上传的图片，因此您无需手动进行每一项操作.
• EXIF 元数据 ― 将从您的图像中去除相机设置，帮助减小文件大小.(别担心；它不会剥离 SEO 元数据).
• 全尺寸图像― 将压缩您的原始全尺寸图像.(注意:默认情况下，它会存储您原件的副本，以防您想恢复原件.)
• 延迟加载 ― 将停止加载屏幕外图像，直到访问者滚动到它们为止.
• 使用数据 ― 让我们的设计师深入了解哪些功能需要改进.(您的个人数据将被跟踪.)

继续浏览每个屏幕，保留默认设置.(允许使用数据将有助于插件未来版本的功能，但如果它至少让您感到不舒服，请不要使用它.)

向导完成后，仪表板将反映可以使用压缩的图像数量.绿巨人粉碎 Bulk Smush Now 按钮！

我们的图像优化统计数据现在是什么样的，Mdm.糊涂?

让我们看看这减轻了多少(页面)负载，然后再次进行速度测试.

是时候把事情推向高潮了，让蜂鸟出现在现场.

安装并激活 Hummingbird 后，转到仪表板将激活另一个快速设置向导.这一次，她只会建议运行性能测试，这正是我们想要做的.

测试完成后，您会收到通知通知.

仪表板向我们显示了性能测试的分数.

Hummingbird 提供了在性能测试期间进行评级的各种指标和审核的列表和图表.

她还提供了称为审核的其他评分指标.这些单独的问题分为以下类别:机会、诊断、和通过的审核——所有提高绩效得分的建议.

机会基本上是用颜色编码的警报.黄色表示轻度至中度问题，红色表示该问题严重影响性能.

在这次绩效评估中，Hummingbird 表示我有 3 个机会，其中至少有一个是高优先级(红色角形).

要解决这些机会，请点击任何提醒行，它会显示:

• 问题的详细描述
• 涉及的特定资产清单
• 有关如何解决问题的分步说明

解决这些问题是个好主意，这就是我现在要做的.完成修复后，您可以继续下一步……资产优化.

从左侧菜单栏中，选择资产优化.点击自动，并确保快速滑块开启.

请注意:当您处于自动模式时，Hummingbird 会自动检测新添加的插件和主题文件并为您优化它们，但不会从插件或主题中删除任何旧文件那被删除了.这是为了避免冲突和问题，以及为什么建议偶尔重新检查文件-以便一切保持同步.

好的，是时候进行一些速度测试了.

好成绩！我们还可以做的另一件事是……让我们打开 Hummingbird 中的 CDN .在同一个资产优化页面，将WPMU DEV CDN滑块移动到ON (它会变成蓝色).

让我们再次进行速度测试.

我们可以停在这里，成为非常快乐的露营者.但是，我将通过我的 WPMU DEV 托管调整设置，再增加一个日志.

通过 WPMU DEV 的托管中心开启 FastCGI.

是时候踩下踏板并获得一些新的考试成绩了.

好吧，我对此非常兴奋.让我们通过安装不同的主题来继续进行第二轮测试.

主题 2 ― Avada Classic

对于我们的第二个测试环境，我们将使用 Avada Classic.它需要安装额外的 WooCommerce 插件，因此将添加一个可能影响页面加载速度的有趣元素.

在我们真正改变主题之前，让我们回滚到我们原来的测试环境.如果您有 WPMU DEV 的托管，请从集线器中关闭 FastCGI.在 Hummingbird 中，关闭 CDN 资产优化.然后停用蜂鸟和Smush 插件.

我们还需要通过选项/性能标签、全部重置将 Avada 性能优化恢复为默认设置.

再次从 Avada 仪表板中，让我们导航到预先构建的主题.确保选择为 Avada Spa 安装的所有组件；然后点击删除.该过程完成后，前往经典主题(这是第一个)，然后安装/激活它.

在进行任何更改或调整之前，让我们先获取初始速度测试分数.

好的，这很受人尊敬，但我们想要一流的.让我们再次调整一些 Avada 的内置设置.

我进行了与上次相同的优化，但增加了一个:Avada 的 PWA 插件(主要是缓存应用，正在 Google 开发中).安装并激活 PWA 后，我现在在 Options 下为 Progressive Web App 提供了一些选择.我将它打开，保持预先选择的设置不变，并保存更改.

让我们看看这些调整对速度得分有多大影响......

借助我们的 Avada 优化，让我们重新激活 Smush.

您的 Smush 设置将保持我们上次的设置.因为我们的新主题向媒体库添加了新图片，所以我们需要让 Smush 来做她的事情.

您已经可以在她的仪表板中看到批量压缩带来的节省.我们不必用这个主题主动压缩添加到媒体库中的图像，因为我们之前已经告诉 Smush 在上传时自动压缩我们的图像.而这正是她所做的.

好的，是时候进行另一轮速度测试了.

在这一点上，比我们最初的主题还要好.当然，我们可以让它们更高.是时候让我们那双翅膀飞舞的朋友用她的存在给我们增光添彩了.重新激活 Hummingbird，并运行性能测试.

虽然我对她的分数很满意，但它并没有达到应有的水平.我看到她列出了三个机会，至少有一个是实质性的(红色代码).我将进入并解决她的建议，如果您有机会中指出的问题，我建议您也这样做.

是时候进行速度测试了.

通过我们的下一次调整，我们应该会看到这些标记上升得更多.

在 Hummingbird 中，转到资产优化/资产，然后单击重新检查文件按钮.在她检查时，再次将 CDN 设为 ON (从正在运行的弹出窗口中).她会告诉你找到了多少资产；点击"知道了"按钮.在她评分后，点击激活.

在我们进行速度测试之前，我想再运行一次 Hummingbird Performance 测试，看看我们做了所有这些优化后它的改进情况.

让我们看看这是否提高了我们的速度得分.

我们可以收工，并对这些分数有很好的响应.但我要做最后一次飞跃，并从我的托管中心打开静态服务器缓存.

最后一次测试……调查显示??

好的，这是我见过的最好的分数.我要做一个胜利圈！！在我被方格旗冲昏头脑之前，我只想分享一个关于继续测试的严肃想法.

如果我们继续随机测试，会有轻微的差异，因为没有一个元素是真正静态的.但是，通过我们进行的所有调整，您应该不会看到页面加载时间有任何显着下降.

Avada 整体速度提升的提示

这是一次令人大开眼界的体验.当与 Smush 和 Hummingbird 一起使用时，Avada 绝对可以加快速度.尽管我们对许多设置进行了微调，但在获得和保持网站的最佳速度时，您仍应始终考虑一些事项.

他们是:

• 选择一个更简约的主题(即"轻")
• 删除旧的或不再使用的插件
• 启用 缓存
• 缩小和延迟 CSS & JavaScript
• 使用 CDN
• 修复损坏的链接
• 优化您的图片
• 更新您的托管计划

最后一个真的可以改变白天和黑夜.确保您的托管服务提供商享有良好的声誉，并证明其快速可靠.(WPMU DEV 托管计划提供可靠、完全专用的 WordPress 站点托管，由 Digital Ocean 提供支持.)

关于适用于我们插件的 CDN 的快速说明:图像 CDN 的设置位于 Smush Pro，而网络对象设置位于 Hummingbird Pro.

快速&疯狂优化

您现在拥有了所有可用的工具.随着您网站的发展以及您不断添加内容和增加流量，您应该定期测试和重新评估您的优化设置.

如您所见， Smush 和 Hummingbird 都是免费的、功能丰富的优化工具，可以提高您的速度.但无论您使用什么，请继续进行调整，以便您的页面加载永远不会对访问者或客户造成阻碍.

让 Avada 成为您自己的， 网站速度成为您的灵丹妙药.