WordPress divi主题

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

by | Apr 27, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

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

google广告开户

让我们深入了解它!

订阅我们的 Youtube 频道

1.优化首屏内容

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

4 模块英雄概念

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

最快的分页

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

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

最快的分页

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

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

WordPress divi主题

最快的分页

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

避免英雄中的动画以防止延迟

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

在平板电脑和移动设备上修改首屏内容

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

最快的分页

2. 使用智能样式

智能样式如何工作

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

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

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

您还可以设置具有您选择的宽度和最大宽度的行预设,并将其作为标准。 玩转这些预设,发现它们如何不仅使您的设计过程更轻松,而且还帮助您提高页面速度得分。

最快的分页

为模块使用预设

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

fiverr建站WordPress程序员

最快的分页

是否覆盖预设?

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

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

限制您要使用的模块的选择(动态模块)

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

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

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

选择动画风格(动态特征)

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

独立站选品工具

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

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

4.手动优化

响应式内容:在移动设备上缩小图像大小

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

最快的分页

文件类型和压缩

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

幕后花絮

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

高质量外链购买

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

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

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题