如何使用我们的 Smush 和 Hummingbird 插件免费优化 Elementor

她与 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 网站.