如何使用我们的 Smush 和 Hummingbird 插件免费优化 Divi
说到 WordPress 的主题，Divi 无需介绍.它只是最受欢迎的 WordPress 主题，由全球领先的 WordPress 主题商店之一创建，Elegant Themes .
考虑到它的受欢迎程度，值得展示如何尽可能地增强 Divi 的优化——这可以通过我们的 Smush 和 Hummingbird 插件完成(免费！).
Divi 拥有超过 203 个 WordPress 布局包和(目前)1495 个与主题相关的布局.这使得可以优化以实现最佳性能的照片、文本和功能几乎无穷无尽.
我们将看看我们的优化组合 Smush 和 Hummingbird 可以做些什么来通过流行的布局增强您的 Divi 网站.
在优化方面，Smush 是我们的 5 星级具有超过 1+ 百万活跃安装的图像优化插件.她能够优化图像、延迟加载、调整大小、压缩和批量模糊所有图像以提高速度.
Smush 已准备好帮助 Divi 优化！
我们的其他优化插件 Hummingbird 具有稳定的 4.5-星级评分和超过 100K 的活跃安装.她负责通过对文件压缩进行微调控制来增加提升 Google PageSpeed Insights 的方法，从而使您的网站运行得更快.
此外，她还可以缩小 CSS 和JS、延迟加载注释、缓存等.
蜂鸟将帮助您的 Divi 网站飞起来！
值得再次强调的是，Smush 和 Hummingbird 都免费使用！
(剧透警告！)您会看到我们如何将我们的 Divi 网站从桌面 GTmetrix 等级"C"提升到"A"！并且桌面版 Google PageSpeed Insight 得分提高了 31.9%，移动版提高了 126%！
此外，本文将介绍一些基本技巧，让您的 Divi 网站保持最佳状态以获得最佳速度和性能.我们将探索:
要继续，您需要 Divi(您可以无风险地尝试此处 30 天)、Smush 和 蜂鸟.安装并激活这些后，您就可以开始使用了.
在本文结束时，您将了解如何实施您可以使用的所有工具，以使您的 Divi 网站以最佳性能运行！
Divi 概述和测试布局
不详细介绍(因为您可能熟悉它)，Divi 非常棒.它是一个网站建设平台，用令人惊叹的可视化编辑器取代了标准的 WordPress 帖子编辑器，将您典型的 WordPress 主题提升了一个档次.
如果您还没有开始使用 Divi，并且想开始使用，请务必阅读我们关于开始使用 Divi 所需了解的一切.
就价格而言，Divi 绝对不会出错.它旨在为程序员和新手提供轻松和高效的体验.考虑到超过 200 万个网站是用这个主题构建的，它享有良好的声誉.
话虽如此，如果我们涵盖了 Divi 附带的每个预制布局，这将是一篇相当长的文章.因此，正如我之前提到的，我们将缩小范围并向您展示如何使用他们的 代理布局包.
Agency 布局很好地结合了文字和照片.另外，它是出现在 Divi 搜索中的顶级布局包之一.
您很可能会使用不同的布局(或不会)；然而，本文中的演示适用于任何布局——只是可能需要额外或更少的调整.
那么，让我们设置 Divi 并开始行动吧！
安装并激活 Divi 后，从 WordPress 仪表板创建一个新页面以访问 Agency 布局.然后，您将选择从预制布局中进行选择.
您会看到有大量选项可供选择.目前，Agency 是他们列表中的顶级布局之一.如果没有，请使用他们的搜索栏来定位.
现在我已经安装了 Agency，我准备测试 Divi、Hummingbird 和 Smush.当然，这种疯狂是有方法的.所以，这是……
优化测试设置
对于本文，我们将从头开始.我正在设置 Divi 的网站没有安装插件(除了 WPMU DEV 仪表板插件)、主题或超出 Agency 的页面.接近于绝对干净的石板.
它类似于我们关于使用 Elementor 和 WPBakery 进行优化的文章的配置.
至于本次测试使用的方法，它包括:
- 使用托管在我们的基本 WPMU DEV 托管 WordPress 托管计划(铜牌)上的网站
- WordPress 5.7 版
- PHP 8.0 版
- 页面缓存、Fast CGI(静态服务器缓存)和 CDN 被禁用
- GTmetrix 默认服务器位置(加拿大温哥华，使用 Chrome(桌面)浏览器
此外，我将把 Agency 设为我的主页.要从 WordPress 管理员执行此操作，请转到 外观 >自定义 >主页设置并选择此着陆页.
最后，对于我将如何执行此测试，它是一个 10 步过程，如下所示:
- 使用 Divi 和 Agency 布局设置 WordPress 网站
- 使用 Google PageSpeed Insights 和 运行速度测试href="https://gtmetrix.com/" rel="noopener" target="_blank">GTmetrix
- Divi 优化
- 再运行一次速度测试
- 激活 Smush 并设置推荐
- 再运行一次速度测试
- 激活蜂鸟并设置推荐
- 再运行一次速度测试
- 激活托管功能(例如 FastCGI)
- 运行最终速度测试
每个网站都会有所不同.变量包括位置、图像数量、您的主机和其他可能产生影响的因素.但是，这会让您很好地了解如何调整自己的 Divi WordPress 网站以进行优化.
未优化的速度测试
WordPress 网站被清理干净了? 检查.安装并激活了 Divi 的代理布局? 检查.所有其他变量(例如禁用的页面缓存)也已就位.我们已准备好进行速度测试，看看我们在看什么！
我们将在 Google PageSpeed Insights 上运行我们的第一个速度.输入网址时，以下是我们的桌面版 Google PageSpeed Insights 分数:
和移动设备:
让我们来看看 GTMetrix 上发生了什么:
整体上还有改进的余地.现在我们知道了我们的基线分数，让我们继续优化 Divi.
Divi 优化
如果您的主题提供内置优化功能，我们建议从它开始，因为这通常会对您网站的整体性能产生重大影响.Divi 允许您直接从仪表板优化主题布局.
在继续使用我们的 Smush 和 Hummingbird 插件之前，有几个方面需要检查并确保得到优化.
我将确保启用的一些调整包括一般优化和显示.
在 Divi 仪表板的常规区域中，您可以进行多项调整.您可以看到我已启用:
- 在定义时使用摘录
- 响应式短代码
- 响应式图片
- 缩小和合并 Javascript 文件
- 缩小和合并 CSS 文件
我启用的所有内容通常都是建议调整以帮助网站速度和显示.我在 Divi 中的 Builder > 下做了另一个优化调整.高级.我启用了静态 CSS 文件生成.
静态 CSS 文件生成意味着自定义设计样式将不再根据请求生成内嵌 CSS.相反，它们将提供浏览器缓存的静态文件，从而减少服务器资源的消耗并提高用户的加载时间.这些优化调整应该会给我们带来动力.
让我们看看我们的得分.
使用 Google PageSpeed Insights，我们现在达到了 78.
对于移动设备，现在最多 30 个.
GTmetrix 为我们提供了一个"B"和 79% 的性能评级.
我们为其余的优化奠定了良好的基础.Divi 本身的那些小调整有所帮助，但我们可以做得更好.让我们继续……
使用 Divi 和 Smush 进行优化
我已经介绍了 Smush 的所有功能.她是评分最高、最受欢迎的图像优化插件之一，因此她绝对是帮助提高 WordPress 网站速度的不错选择.
我们会先安装并激活她.
她立即告诉我有 12 张图片可以被抹去.让我们使用Bulk Smushing来解决这个问题.只需点击Bulk Smush Now按钮，即可一键完成批量清除.
点击 Bulk Smush 几分钟后，结果如下:
如您所见，我有 909.1KB/27% 的总节省和 104 张图片(许多来自初始激活).让我们继续进行另一个速度测试，看看我们得出了什么结果.首先，这是桌面版 Google PageSpeed Insights:
这是移动设备:
最后，GTMetrix 有话要说:
如您所见，只要激活 Smush，分数就会上升.Google PagesSpeed Insights 在台式机上从 78 上升到 82，在移动设备上从 30 上升到 51.使用 GTMetrix，分数也有所提高.它仍然是 B.但是，性能百分比从 79% 上升到 83%， 并且结构保持不变.
这是一个很好的开始，所以让我们继续前进.
使用蜂鸟优化 Divi
Hummingbird 是 Smush 的完美搭档，考虑到她处理其他优化领域，包括文本压缩、预加载关键请求、可以消除渲染阻塞资源以及我之前提到的更多内容.
我要让 Smush 保持活动状态，现在安装 Hummingbird.她推荐的第一件事是性能测试.您可以点击测试我的网站，然后她就可以开始工作了.
运行测试后，她得出了 82/100 的绩效得分，并有 3 次检查改进的机会.
改进机会包括:
- 减少初始服务器响应时间
- 消除阻塞渲染的资源
- 删除未使用的 CSS
接下来，我将运行 Hummingbird 的资产优化测试.我们将在禁用页面缓存和 CDN 的情况下运行它.这是直接通过资产优化完成的，然后点击重新检查文件.完成后，她编制了一份推荐修复程序列表.
有不少……
从这一点开始，您可以仔细检查并手动实施 Hummingbird 推荐的每一个修复程序，也可以批量解决它们.
让我们继续批量更新 CSS 和 JavaScript.您可以通过点击批量更新来执行此操作.从那里，我们将选择压缩和组合.
我还将文件移到页脚，除了 jquery-core 和 j-query migrate.这可以从批量更新区域完成.这样做之后，我最终得到了轻微的改善.首先，Google PageSpeed Insights 桌面版:
然后，Google PageSpeed Insights 移动版...
最后，GTmetrix...
经过多次测试并获得更好的页面速度后，我决定听从专家的建议并使用自动/快速选项优化资产.
根据您拥有的时间，在这里和那里进行一些调整，您或许可以手动提高分数.自动优化有助于简化此过程.
不管怎样，我想看看有没有区别.当我使用自动优化对其进行测试时，很有趣.我有全面的改进.使用桌面版 Google PageSpeed Insights:
移动版 Google PageSpeed...
最后，GTmetrix...
考虑到我通过自动优化获得了更高的分数，我把它留在了那里.但是，您可能需要对自己的进行微调，然后手动查看结果.
资产优化是一个可能需要一段时间的过程，具体取决于您的网站和主题.Hummingbird 直接从 Google 获得这些建议.您可以在在我们的文档中找到更多相关信息.
接下来，我们将以减少初始服务器响应时间结束.
为此，只需点击建议中的配置页面缓存即可.然后，您可以点击激活来激活它.
就这样，我们激活了页面缓存.
至于最后一条提到通过您的主机升级 SSD 存储和 RAM 选项的建议，我们也将不提.
这个网站不会有很多流量，也没有必要升级.但是，如果您确实有一个流量很大的 Divi 站点(希望如此)，则强烈建议升级 SSD 存储和 RAM.
我们可以通过我们的托管来帮助解决这个问题.此外，我们的 24/7 支持随时可以回答任何问题.
让我们看看现在我们激活了页面缓存.
首先，我们将查看 Google 桌面:
现在适用于移动设备的 Google PageSpeed Insight:
最后是 GTmetrix:
在大多数情况下，分数一直在上升！ Google PagesSpeed Insights 在桌面设备上从 87 上升到 90，在移动设备上保持在 59.使用GTMetrix，分数从 B(81% 性能和98% 结构)提高到A(96% 性能和98% 结构) ).
我认为现在是触及某些事情的好时机.您可能会问自己的一个问题是:
移动设备得分低是怎么回事?
您可以看到，我们在 Google PageSpeed Insight 上的移动得分并不值得大书特书.那么，这是怎么回事?
首先，这会因人而异，具体取决于您的情况.移动连接速度较慢，因此从 Google PageSpeed Insights 获得良好的阅读体验更具挑战性.
还有其他因素.例如，您可能使用 4G 互联网服务而不是 5G，从而影响速度.
以下是一些需要注意的事项:
- PageSpeed Insights 以较低的速度刺激蜂窝网络
- 所有移动设备都有不同的设备特定 CSS 规则
有关这方面的更多信息，我将向您推荐 Google.他们对他们的移动分析提供了一些见解.
蜂鸟和主机的进一步优化
为了确保我们的 Divi 网站以最高速度运行，我们将仅对 Hummingbird 和您的主机进行一些额外的调整.这将进一步提高我们网站的性能.
您可以在 Hummingbird 中进行的一个调整是 CDN.无论您是否与我们一起托管都无关紧要.您可以在 Hummingbird 中的资产优化下右键一键启用您的主机的 CDN.
一键即可.
一个好的 CDN 可以通过将静态资源存储在加载速度更快且位置更好的服务器的网络上来减少服务器延迟，从而提高站点的速度.有关 CDN 的更多信息及其有益之处，请务必查看这篇文章.
如果您与我们一起主持，请前往 The Hub 进行另一次调整.我们将打开静态服务器缓存以使用 FastCGI.您可以从 The Hub 转到工具，然后一键将其打开.
通过 Hummingbird、Smush、Divi 仪表板和托管的这些调整，我们针对速度进行了优化！让我们进行一些最终的速度测试，看看我们最终会达到什么程度.
首先，我们将看看桌面版 Google PageSpeed Insights:
通过打开我们的CDN 和FastCGI，我们的分数立即提高了几分.我们可能可以在蜂鸟资产优化区域调整和测试一些东西，看看我们是否可以接近 100.不过，这是一个我很满意的及格分数.
让我们看看移动设备:
所以，虽然它上升了很多，但并不是最好的数字.然而，同样，有很多变量会影响这一点.这取决于您的位置、互联网速度等.
虽然在这方面获得更高的分数会很好，但我必须记住，这是全面不同的.
话虽如此，让我们来看看 GTmetrix:
我们仍然有我们的"A"，我对此很满意.您可能还记得，我们从"C"开始！在我们对 Hummingbird、Smush、Divi 和托管进行所有调整和调整之后，有何不同?
总而言之，我们的优化性能，让我们看看我们从一开始就开始，然后我们最终得到了什么.
我们的 Google PageSpeed Insights 最初是:
- 72 桌面版
- 27 移动版
我们最终得到:
- 95 桌面版
- 61 移动版
台式机23 分，31.9% 的改进，移动设备34 分，126% 的改进！我们的 GTmetrix Grade 最初是:
- A级 C
- 71% 性能
- 96% 结构
我们最终得到:
- A级A
- 96% 性能
- 98% 结构
这是一个三级改进和25%的性能提升，以及2%的结构改进！现在都说了完成后，我可以说结果不言自明.
同样，每个网站都会有所不同.您可能需要进行一些额外的更改以提高性能(例如托管、Hummingbird PageSpeed Insight 建议等)；但是，您可以期待使用本文中的方法进行更好的优化.
更多提升 Divi 优化的技巧
除了拥有 Smush、Hummingbird 和良好的托管之外，这里还有一些其他技巧可以增强您的 Divi 优化速度.其中一些涉及已经提到的要点；但是，这是保持 Divi 网站优化的方法的简要概述.
- 数据库优化和清理:WordPress 文件在您的数据库中按表排序.每当您向站点添加新数据(例如插件)时，都会创建新表和数据.制作的表格和数据越多，它就会变得越混乱，从而减慢您的网站速度.清理数据库至关重要.在我们的文章优化您的 WordPress 数据库 — 完整指南中了解更多信息.
- DNS 优化:当用户访问您的 Divi 站点的 URL 时，首先发生的事情称为 DNS 查找.您的页面可能有多个域，需要在您的站点上访问这些域才能显示该页面.为了提高您的 DNS 查找速度，我们的托管 可以提供帮助.我们使用 DigitalOcean，根据 DNSPerf，它在网络上排名前 5 位表现最佳的 DNS 提供商.
- 良好的托管:这是一个显而易见的声明，但拥有良好的托管至关重要.完全专用的托管主机我们提供功能对象和页面缓存、IPv6 支持，并且我们的 CDN 站点可以正常运行.无论您是否与我们一起托管，请确保您的托管服务提供商为您设置了速度.
- TTFB 优化: TTFB(第一个字节的时间)是用户从您的主机或服务器检索网站数据的第一个字节所需的时间，使其成为任何数据之前的等待期已收到.确保优化很重要.TTFB 优化有很多内容，因此请务必在此处阅读更多相关信息.
- 缓存:这是涉及优化的一个广泛类别.有页面缓存、浏览器缓存、CDN 缓存和对象缓存.我们讨论了我们的托管、Smush 和 Hummingbird 可以如何提供帮助.如需了解详情，请务必阅读我们的文章，了解网络缓存的类型和增强网站优化.
- 缩小和聚合:缩小会使您的网站文件更小.聚合包括组合站点的文件以减少页面上的总请求.这就是蜂鸟可以提供帮助的地方.阅读我们的文档了解详细信息.
- Gzip 压缩:Gzip 压缩会先压缩您的网页和样式表，然后再将它们发送到访问者的浏览器，从而增加加载时间.蜂鸟会照顾到这一点.您可以在我们的文档中找到有关 Gzip 压缩的更多信息.
- 优质插件:务必使用信誉良好的最新、高评价插件.另外，如果您没有使用特定插件，请将其从您的管理员中删除.
- 最新的 PHP 版本:建议为您的 Divi WordPress 网站安装最新的 PHP 版本.如果您与我们一起托管，您可以直接从 The Hub 进行.此外，请参阅我们关于让您的 PHP 保持最新状态的文章中的更多信息.
- 降低 Divi CLS(累积布局偏移)分数:我们的成员 Lee 有一系列关于 减少 Divi 中的 CLS 分数.CLS 分数是衡量可见稳定性的重要指标.它有助于了解用户遇到意外布局变化的频率.最好的分数是 0.1 或更低.
问题排查
如果您在 Hummingbird 中使用缓存，并且遇到以下一个(或多个)问题，您可能希望在 Divi 中禁用页面缓存:
- Divi 网站很快就失去了所有样式，看起来很糟糕，但登录后显示效果很好.
- 部分和模块的间距(填充和边距)不正确，但在使用可视化构建器时可以正确显示
- WordPress 网站样式丢失，但刷新八九次即可解决问题
- 您在访问开发者工具和查看 JS 控制台时收到错误"et-core-unified-123.min.css not found"
发生这种情况的原因是，当您在 Hummingbird 中启用页面缓存时，它会缓存整个网站的 HTML 代码.此外，它将合并和缩小大部分 javascript 和 CSS 代码.
当您以任何方式更新 Divi 时，它都会创建一个具有新名称的新样式表.名称可能遵循相同的格式(未找到et-core-unified-123.min.css)，但是，"1,2,3"部分每次都不同，因为它是由创建日期和时间生成的.
这意味着，当用户访问您的 WordPress 网站时，Hummingbird 有一个缓存版本的 HTML，但它链接到旧的 CSS 文件.这会导致在没有任何样式的情况下在您的网站加载中找不到结果.
解决方法是进入Divi>主题选项并向下滚动到底部.在自定义 CSS 的正上方，您会看到用于缩小和合并 Javascript 文件 和合并 CSS 文件的选项.
禁用这两个选项，然后向上滚动并转到 Builder >高级>并禁用静态 CSS 文件生成.
如果您遇到此问题，这应该可以解决问题，而且这是一个快速解决方案(无需担心).当然，如果仍有问题，您可以随时与我们的 24/7 支持联系，我们可以提供帮助.
结合这些技巧，并添加 Smush 和 Hummingbird，您的 Divi 网站将尽可能优化速度.有关优化的更详细信息，您可以找到更多在他们关于优化 Divi 的文章中.
速度优化神器终于来了！
利用现有的工具和资源，优化您的 Divi WordPress 网站以提高速度并不困难.正如您刚刚阅读的那样，只需点击几下并使用 Smush 和 Hummingbird(免费！)进行调整即可对其进行优化.
当您添加良好的托管时，您的 Divi 网站可以立即达到最大速度.
如果您还没有尝试过 Divi，请务必通过他们的无风险的年度或终身会员资格查看它们.
同样，如果您不是 WPMU DEV 会员，请尝试我们的无风险免费试用.有了它，您可以立即访问 Smush Pro 和 Hummingbird Pro.Pro 选项包括改进功能，例如 45 点图像 CDN、Super Smush – 2 倍压缩、自动化和白标性能报告、高级资产优化、24/7 全天候支持等！
最棒的是，即将推出，Hummingbird Pro 将通过单击按钮自动压缩和优化您的 Divi 主题文件！
请继续关注这方面的更新.同时，享受您的 Divi 网站速度.应该是……神圣.
贡献者
本文与以下人员合作撰写:
Mike B. — DiviDuck.Mike 喜欢和 Divi 一起玩，看看它能做什么.他时不时地偶然发现一些很酷的东西，并认为每个人都需要了解它.今天可能就是这样的一天.
***
注意:我们不接受来自外部来源的文章.但是，WPMU DEV 成员可以通过 Blog XChange 为我们博客上的教程和文章贡献想法和建议.
