如何构建最快的 Divi 页面：优化您的 Divi 内容以提高速度

随着 Divi 的新性能更新，提供了大量提高页面速度分数的可能性。 今天，我们将分享一些从头开始构建 Divi 页面时应牢记的实用提示和技巧。 这些是建议，而不是一成不变的规则。 这将始终归结为您页面的主要目标。 有时，您会发现自己为设计牺牲了一些速度，反之亦然。 我们相信这是为了在两者之间找到健康的平衡，但使用以下提示，您绝对可以提高 Divi 页面速度。

让我们深入了解吧！

订阅我们的 YouTube 频道

1. 优化首屏内容

已添加到 Divi 的新性能特性之一称为关键 CSS。 简而言之，Divi 中的关键 CSS 会自动检测需要立即加载的 CSS，称为首屏 CSS，并延迟加载页面的其余 CSS。 这本身已经有助于自动提高页面速度，而无需您付出努力。 但是，如果您想加倍努力，您也可以决定优化首屏内容。

4 模块英雄概念

乍一看，与访问者分享尽可能多的信息可能很诱人，但这正是英雄应该避免的。 您的内容在样式和视觉效果上越直接越好。 这就是为什么限制您在折叠上方使用的模块数量将帮助您提高 Divi 页面速度的原因。 最好，你会使用：

• 标题
• 段落
• 按钮

但是，在许多情况下，您还希望包含某种图像。 如果这样做，请尽量避免将图像用作背景，而是将其用作模块。 将其用作具有最大宽度的特定容器内的模块将帮助您使用较小的图像尺寸，从而帮助您加快网站速度。 这将我们带到了 4 模块英雄概念：

• 标题
• 段落
• 按钮
• 优化图像

使用全屏英雄或将内容拆分为多个部分以进行精确的自动检测

全屏英雄设计受欢迎是有原因的。 它们不仅使您的设计更加透气，而且还有助于关键的 CSS。 如果你选择全屏英雄，你就决定这是唯一出现在折叠上方的东西，无论你使用什么屏幕尺寸。 要在 Divi 中创建全屏英雄，请记住在部分设置中分配最小高度“100vh”。 通过分配一个最小高度； 您确保该部分覆盖浏览器的整个高度。 从那时起，您可以在该部分内放置任何内容以成为您英雄设计的一部分。 或者，您也可以使用 Divi 的内置全屏标题。

或者，如果您不想遵循全屏英雄路线，您可以决定将折叠上方的内容分成多个部分。 Divi 将自动检测部分级别折叠上方出现的内容。 这意味着，如果您正在构建一个部分显示在折叠上方和部分显示在折叠下方的大部分，则将加载整个部分的 CSS 以及该部分中元素的 CSS。 将这些部分分成多个部分将帮助您避免将太多元素视为在折叠之上。

避免在 Hero 中使用动画以防止延迟

最好避免任何可能导致加载时间延迟的折叠。 这包括动画。 然而，这并不意味着你应该完全避免它。 您可以轻松地在页面下方使用动画和/或限制您在英雄内部使用的动画。 找到一个好的平衡点是关键。

修改平板和手机上的折叠内容

关于关键 CSS 需要提及的最后一件事是在较小的屏幕尺寸上修改您的设计。 确保您的首屏内容针对不同的屏幕尺寸进行了优化，这一点很重要。 这是一个调整设计的问题，因此您可以在桌面和移动设备上获得出色的页面速度分数。 例如，您可以在移动设备上隐藏整个主图，以提高页面在较小屏幕尺寸上的速度。

2. 使用智能样式

智能样式的工作原理

通过新的性能更新，Divi 通过减少重复样式进行了优化。 要激活智能样式，您需要深入 Divi Presets 的世界。 预设基本上允许您与不同元素共享样式，而实际上不必为以相同方式设置样式的每个元素分配唯一的样式块。

为部分和行使用 1 或 2 个预设

节和行是两种元素类型，当我们谈论预设时，它们似乎经常被遗忘。 就像模块一样，您可以为部分和行分配预设。 这不仅可以帮助您限制生成的 CSS，还可以帮助您保持页面级别的设计一致性。 例如，假设您希望为每个部分始终使用 100 像素的顶部和底部填充，以创建垂直节奏，您没有理由不应该在此过程中受益于 Divi 预设。 为使用这些填充值的部分创建一个新预设，并将其分配给您添加的每个新部分或使其成为默认部分预设。

您还可以使用您选择的宽度和最大宽度设置行预设，并将其设为标准。 尝试使用这些预设并了解它们如何不仅使您的设计过程更轻松，而且还帮助您提高页面速度得分。

使用模块预设

当然，您还需要为模块使用智能样式。 在下面的示例中，您会注意到每个模块的整体外观和感觉是相似的。 为 Blurb 模块创建预设将帮助您保持页面的 CSS 文件较小。

是否覆盖预设？

但是您不应该为每个小的更改都创建一个新的预设。 例如，在上面的示例中，您可以注意到最后两个 Blurb 模块具有不同的文本颜色。 您可以为此创建一个新预设，通过复制旧预设，或者您可以决定覆盖预设。 在这种情况下，与创建新预设并添加多行 CSS 代码相比，仅覆盖文本颜色（这会导致多出一行 CSS 代码）更有意义。

3. 将设计选择与速度相匹配

限制您要使用的模块的选择（动态模块）

当您选择要用于正在构建的页面的模块时，记住这些模块将被动态加载是一件好事。 这意味着如果您不使用某个模块，它不会对您的页面速度产生任何影响。 您需要考虑添加的每个模块，看看它是否“值得”。 但是，在理想情况下，您将确保 Divi 内容的其余部分得到充分优化，因此您不必牺牲模块。

找到您的设计的 LCP 并对其进行优化

可以帮助您提高页面速度的另一件事是找到最大的内容绘制并对其进行优化。 简而言之，您的 LCP 是您页面上帮助确定页面速度得分的最大元素。 您可以在此处阅读更多相关信息。 通过确保您的设计的 LCP 得到优化，您可以大大降低页面的加载时间。

选择动画风格（动态特征）

就像我们有动态模块一样，我们也有动态特性。 这意味着，如果您根本不使用某个功能，则不会在您的页面上加载该功能，从而提高页面速度。 出于这个特殊原因，确保您选择一种动画风格并坚持下去很重要。 例如，您可以选择使用运动效果并将所有动画集中在页面上围绕该功能。 或者您可以进行常规动画设置并遵循该路线。 这不仅允许您创建轻量级页面，而且还增强了可预测性，这在用户体验方面通常是一件好事。

字体配对：坚持使用 1 或 2 个字体系列

我们还建议您为您设计的页面坚持最多 2 种字体系列。 通过这样做，您可以限制进入页面之前需要加载的字体数量。

4.手动优化

响应式内容：在移动设备上缩小图像尺寸

另一件可以帮助您提高移动页面速度得分的事情是在 Divi 中使用响应式内容。 这可能是可以帮助您在较小的屏幕尺寸上最好地提高分数的功能之一。 虽然这需要付出更多的努力，但这绝对是值得的。 通过图像编辑软件缩小图像的尺寸/大小，并在移动设备上使用这些较小的图像，而不是您在桌面上显示的图像。 这将大大减少图像文件的大小，并提高移动设备上的页面速度。

文件类型和压缩

确保您也尽可能多地使用 JPEG，因为它们的文件大小往往较小。 PNG 通常只有在您需要图像透明度以提升设计时才有意义，但即便如此，您也可以尝试寻找替代方法来使设计发挥作用。 避免使用更重的文件类型，例如 GIF。 至于视频，这通常是行不通的，特别是如果您希望它在后台播放。 当然，即使在将文件上传到 WordPress 媒体库之前，也要确保压缩您使用的文件。

幕后花絮

上面的所有提示都可以帮助您提高页面速度，但是，重要的是要提到您必须注意 Divi 之外的网站优化最佳实践。 您可以通过访问此终极指南找到更多技术见解。

使用 Divi 构建快速页面——比以往更容易

我们可以很容易地得出结论，Divi 的性能特征与您处理构建网站的方式之间存在很大的重叠。 Divi 负责部分方面，因此您可以专注于将它们整合到一个漂亮而快速的网站所需的前端最佳实践。 如果有任何对您有用的最佳实践，请随时在下面的评论部分分享它们，以保持对话的进行！