使用 Hummingbird 和 Smush 优化 Astra:从令人印象深刻到与众不同！

在速度方面，我们自己的 5 星级 Hummingbird 通过可调整的文件压缩增强功能使您的网站速度超快，并针对 CSS 进行了缩小和缩小.JS、延迟加载注释、缓存等等.她的活跃安装量超过 10 万次，并且每天都在持续增长.

当然，我们不得不提一下，Smush 和 Hummingbird 都是免费使用的！

我们将使用 Astra Pro 创建一个 Astra 网站，然后将其优化为最大的潜力.Astra 也有免费版本，但我们决定采用专业版，因为我们认为这是大多数专业网络开发人员会使用的版本.

我们将介绍:

• Astra 概述和测试布局
• 优化测试设置
• 没有优化的速度测试
• 使用 Astra 和 Smush 进行优化
• 使用 Astra 和 Hummingbird 进行优化
• 蜂鸟和您的主机的进一步提升
• 其他优化技巧

要继续，您需要 Astra Pro、Smush 和 蜂鸟.如果您不熟悉 Astra 并想先尝试一下，您也可以使用免费版本.但是，考虑到性能优势(例如 CSS 文件生成)，结果可能很重要.

点击此处查看对比指南免费版与专业版包含的内容. >

在本文结束时，您的 Astra 网站将针对性能进行全面优化！

Astra 概述和测试布局

如果您不熟悉 Astra，那会令人惊讶.正如我之前提到的，它在超过 160 万个网站上使用并且还在不断增加.

至于 Astra 本身，它是一个非常可定制的 WordPress 主题，提供了大量功能.例如，有超过 150 个预先构建的网站设计模板，让非开发人员也能轻松使用.此外，一切都可以调整(例如颜色、样式等).

此外，它还附带大量免费插件供您使用，包括自定义字体、Astra Bulk Edit、Astra Hooks 等！

在速度方面，据开发人员称，由于它非常轻巧，使用默认 WordPress 数据时，Astra 网站应该可以在不到半秒的时间内加载.

测试版面设计

对于 Astra 提供的所有预制网站，很难选择最适合本文的网站.毕竟，我们不能在这篇文章中测试所有这些(这需要一段时间).

Astra 与您最喜欢的页面构建器合作，包括 Elementor、Divi (需要 Divi Builder 插件)，Beaver Builder……甚至是古腾堡.

我们将在本文中使用 Mountain 模板.它具有出色的图像和文本组合，因此对我来说似乎是赢家.

您可以从控制面板中的入门模板 和Gutenberg 下的模板下拉菜单中找到 Mountain 模板.此外，还有一个搜索栏可以找到它.

现在我们有一个很好的视图可以使用:)

既然我们有我们网站的模板，让我们继续......

优化测试设置

这个测试从一个几乎空白的 WordPress 画布开始.

该网站除了 WPMU DEV 仪表板、Astra Pro 和 入门模板.入门模板来自 Brainstorm Force，可以直接从 WordPress 的 Astra 仪表板激活，以便您拥有访问我们正在使用的 Mountain 模板.

此测试的其他参数包括:

• 在 WPMU DEV 的 青铜级计划上托管.
• 我所在的地区是美国/西部.
• Smush 和 Hummingbird 的免费版本.请注意，使用 WPMU DEV 托管，它将安装 Pro 版本.在此示例中，我禁用了 Pro 功能.
• 我使用的是 WordPress 5.7.2 版.
• PHP 版本为 8.0
• 页面缓存、快速 CGI(静态服务器缓存)和 CDN 一开始被禁用.此外，蜂鸟优化在 WordPress 网站上使用了多种类型的缓存和压缩功能，因此页面、Gravatar 和 RSS 缓存被禁用.
• Chrome(桌面)浏览器.

至于如何执行此测试，它是一个分步过程，如下所示:

1. 如上所述，在干净的 WP 站点上安装 Astra Pro 和随附的插件.
2. 优化 Astra.
3. 进行速度测试.
4. 激活 Smush 并设置推荐.
5. 再次进行速度测试.
6. 激活 Hummingbird 并设置推荐.
7. 再次进行速度测试.
8. 激活托管功能.
9. 进行最终速度测试.

对于速度测试，我将使用 Google PageSpeed Insights.如果多次运行后的整个测试(本文中就是这种情况)的测试结果都相同，我会附上屏幕截图.

请记住，每个网站都会有所不同.您的地理区域、媒体库的大小、您的主机和其他因素将决定不同的结果，这一点再怎么强调也不为过.

我们之前在之前的一些性能优化文章中也提到过这一点，如果您还没有，请查看:

• 如何使用我们的 Smush 和 Hummingbird 插件免费加速和优化 Avada
• 如何使用我们的 Smush 和 Hummingbird 插件免费优化 Divi
• 如何使用我们的 Smush 和 Hummingbird 插件免费优化 Elementor

但无论您的 WordPress 设置如何，您仍然可以通过使用此流程进行网站优化.

话虽如此，让我们开始吧！

没有优化的速度测试

在优化您的 WordPress 网站时，始终建议从您的主题开始.所以，我们将从这里开始.

正如我在本文中提到的，Astra 开箱即用的优化非常好！他们的首要任务之一是速度，而且他们还在不断改进.

没有太多可以调整或改变的地方.Astra Pro 的一项建议是启用CSS 文件生成.

启用后，内联 CSS 将不再显示在源代码中，而是作为单独的文件添加.CSS 文件生成将使浏览器缓存更快，并提高您网站的响应时间和加载速度.

直接从 Astra 仪表板即可轻松完成.只需点击启用文件生成.

就是这样！启用后，我们就可以进行第一次速度测试了.

首先，桌面的分数...

现在移动...

如您所见，这些都是出色的成绩！但是，改进的空间很小，我们还可以做更多的工作来更接近完美的分数，并让我们的 Astra 网站长期保持优化.

使用 Astra 和 Smush 进行优化

既然我已经讲过Smush在图像优化方面能做什么，我就不再吹嘘了.因此，您将亲眼看到她如何帮助将这个页面速度得分提高得更接近完美.

Smush 已经准备好解决一个不错的速度分数并让它变得更好！

该过程的第一部分是安装和激活插件.

Smush 立即让我知道有多少图像可以被 smush.这可以通过Bulk Smushing 一键处理.只需点按立即批量发送.

只需几分钟，她就会拉出结果.

您可以看到 Smush 总共节省了 10.0MB/33.3% 和 821 张图像 Smushed(其中很多来自初始激活).

当您向 Astra 网站添加更多图片时，她将继续保持超强的粉碎能力，从而节省开支.

此外，Smush 有一个设置向导，包括自动压缩、EXIF 元数据、全尺寸图像、延迟加载 和使用数据.

通过并保留默认设置.当然，您可以随时根据需要调整或关闭任何设置.

让我们为桌面版 Google PageSpeed Insights 运行另一个测试……

和移动...

Smush 的分数进一步提高.Google PageSpeed Insights 在桌面设备上从 96 上升到 99，在移动设备上从 88 上升到 94.

我的意思是，我们可以就此打住，对这些分数感到非常满意.它并没有变得更好！但是，让我们继续前进.可以用...做更多事情

使用 Astra 和 Hummingbird 进行优化

如果没有我们自己的 Hummingbird，我们就谈不上优化.她在优化文本压缩、预加载密钥请求、缓存等方面做得非常出色.

该过程的下一步是安装 Hummingbird 并让她进行进一步优化.

蜂鸟将优化提升到一个全新的水平.

首先，安装后，她会询问是否运行性能测试.您猜对了，点击运行性能测试.

与 Google PageSpeed Insights 一样，Hummingbird 会在测试后计算性能分数.在我们的第一次测试中，我们获得了台式机 97/100 和 移动设备 93/100 的得分，并有两次机会检查是否有改进.不错！

改进机会包括:

• 减少初始服务器响应时间
• 消除阻塞渲染的资源

解决机会只需点击任何提醒行即可.从那里，它将显示问题的详细描述、所涉及的特定资产的列表以及有关如何解决问题的分步说明.

一旦我们解决了问题并了解了一些改进机会，我们将继续运行 Hummingbird 的资产优化测试.我们将在禁用页面缓存和 CDN 的情况下执行此操作.

资产优化测试通过资产优化并通过点击重新检查文件完成.

一旦完成，她就有了一个可优化的 CSS 和 JavaScript 文件列表.

您可以单独浏览每一项或设置自动并确保快速滑块打开.

启用自动让 Hummingbird 自动检测新添加的插件和主题文件并为您优化它们.此外，她不会从删除的插件或主题中删除任何旧文件.这样可以避免冲突和问题.

现在我们已经用 Hummingbird 测试了我们的网站，让我们运行一些新的测试.

首先，我们将使用 Google PageSpeed Insights 进行检查.这是台式机的得分...

这是 PSI 移动得分...

这些分数太棒了！我很乐意独自离开；然而，有……

进一步提升蜂鸟和您的宿主

是的，你没听错.我们仍然可以做更多的事情来优化您的 Astra 网站.

有一件事是打开 Hummingbird 中的 CDN.从资产优化区域，只需打开 CDN 滑块.无论您是与我们托管还是其他提供商，您都可以使用此功能.

快速进入 The Hub 以实现 FastCGI.

如果您从 The Hub 与我们一起托管，您可以通过启用静态服务器缓存来开启 FastCGI .转到您的网站、托管，然后转到工具.只需点击它打开，你就可以了！

既然我们已经启用了这些优化功能，让我们运行一些最终测试......

我们也会看看 Hummingbird 怎么说.

如您所见，虽然 Astra 开始时得分很高，但您可以通过一些调整使其更好.此外，所有这些优化选项都是长期的，因此随着您网站的发展，您的优化保持不变，只需少量 TLC 和监控.

该网站最初的 Google PageSpeed Insights 得分为桌面版 96 分和移动版 88 分.我们能够获得台式机99分和移动95分的得分.

我们可以得出结论，最显着的改进是移动设备，其中桌面设备改进了一点，但考虑到它已经进行了多少优化，改进幅度不大.

每个站点都会有所不同.但是，遵循此优化路径将对您的 Astra 网站有所帮助，您应该会看到改进.

其他优化技巧

这不是一个充满大量内容的典型网站，因此随着您的 Astra 网站的发展，以下是一些其他需要考虑的事项以保持其优化:

• 删除未使用或过时的插件和主题
• 修复损坏的链接
• 有一个很棒的主人
• 保持图片优化
• 保持缓存启用
• 根据需要更新您的 WordPress、主题和插件
• 借助 The Hub

等 WordPress 网站管理工具监控您网站的性能

有关更多优化提示，请务必阅读我们的WordPress 加速终极指南.

Astra La Vista，优化不当

Astra 是一个极好的轻量级主题，用于优化您的网站，显然，它不需要太多.我们介绍的微小改进可以将您网站的速度提高到它的全部潜力并保持这种状态.

此外，您无需花费大量时间或金钱来使 Astra 优化变得更好.Smush 和 Hummingbird 可供您使用，并且有很多预算友好的选项(例如 WPMU Hosting — wink, wink)可以在托管方面完成工作.

如果您没有 Astra，请务必选择免费版或专业版试一试.结合我们的插件和一些好的托管，您也会说"Astra la vista"优化不好！