使用新的Divi版本，您将拥有强大的页面构建器的终极力量。 现在Divi更轻量级并且具有消除臃肿的内置功能。 您可以使用 Divi 的抗膨胀功能来加速您的网站。 这是 Divi 大规模性能优化程序的一小部分，通过它您可以获得最终的 Google 页面速度分数。
今天将讨论 4 个抗膨胀功能 -
- 动态模块框架
- 动态 CSS
- 动态图标
- 使用动态 JavaScript 库进行 JavaScript 优化
让我们不要浪费更多时间，看看Divi为我们准备了多少。
膨胀问题的Divi解决方案
网站膨胀的定义
任何由普通 HTML 和 CSS 组成的静态网页，带有复杂的 JavaScript 代码，使页面变得比应有的更重 - 称为网络膨胀。 由于网页只是简单的标记文本，它们应该只占用几千字节。 但是弹出窗口、运动效果和图形动画等关键页面项目会使页面变得沉重。
创建令人惊叹的网站
使用最好的免费页面构建器 Elementor
现在开始像Divi这样的 WordPress 主题动态地使用在 PHP 文件上呈现的 HTML 页面。 所以在这里我们必须考虑 PHP 文件的大小和效率作为网络膨胀。
简单地说，在页面上加载更多不必要的文件效率低下，并使页面超重 - 意味着网站臃肿。
它如何影响网站的速度
如果页面需要加载的后端异常文件多于页面上的文件，则加载时间会更长。 例如，有一个页面只需要 100 行 CSS，但页面有 2000 多行代码，这意味着 1800 行的加载时间完全是浪费。
再次假设，您正在使用 5 个 JavaScript 库来运行您的网站页面，您可以使用 1 来完成所有工作。因此，使用 4 个无用的 JavaScript 库是没有意义的。 请注意，JavaScript 库包含数千行代码。
除了 CSS 和 Js，您的网页运行在一个 PHP 文件上，该文件带有大量的功能。 假设，您的 function.php 有 20,000 行代码和数百个函数。 因此，将内容交付到特定页面会运行所有这些 - 在只需要其中几个的情况下，这是完全没有必要的。
在 Divi 中解决膨胀问题
Divi 的设计日益现代。 因此，臃肿问题也逐渐上升。 为了解决这个问题，我们应用了一个名为“Anti-Bloat”逻辑的新功能，可以完全消除这个问题。 有了这个抗膨胀功能，Divi 现在比以前快得多，用户可以以更有效的方式继续他们的活动。
这个抗膨胀功能有什么
Divi 的“抗膨胀”功能对特定页面执行 4 个主要角色 -
动态模块框架：通过优化 PHP 文件来解决问题。 因此，只有运行页面所需的功能和代码才能有效地为该页面工作。
动态 CSS：它将构建一个自定义样式表，该样式表仅包含页面加载所需的 CSS 代码。 额外的 CSS 文件没有加载时间。
动态 Javascript 库：它将优化并动态创建一个 script.js 文件，该文件将加载页面所需的外部 JS 库。
动态图标：它将加载页面上使用的图标子集，而不是网站使用的所有图标。
通过导航 Divi > 主题选项启用此功能。 他们从常规选项卡中选择“性能”并启用这些选项。
抗膨胀功能如何工作
正如我们已经知道的那样，Divi 推出了一项名为“anti-bloat”的新功能，以减少通过不相关的代码行发生的页面加载时间。 让我们看看这个功能是如何工作的。
动态 PHP 框架：函数
Divi 遵循一个简单的规则，即只执行那些需要的功能。 这是执行此操作的完整证明逻辑。
预处理检查
使用动态 PHP 将数据从您的服务器传送到您的网站非常简单且省时。 如果它发现某个组件或功能正在被使用，它会对系统进行速度检查，并获取所有支持该项目的代码并相应地交付它们，直到操作完成后才执行。
按需模块
有了这个新功能，页面可以灵活地加载模块。 由于 PHP 的反膨胀逻辑，Divi 只处理页面需要的那些短代码。 因此，例如，如果您在一个页面上有 5 个模块，Divi 将只处理这五个，而不是全部，并显示和输出这五个模块。
按需功能
对于页面上的每个功能，Divi 会自动处理和加载模块。 更准确地说，该系统仅处理页面上使用的滚动效果、动画、边框和粘性选项等模块。 它也适用于部分、行和列。
动态 CSS
Divi 样式表还维护了 PHP 框架中使用的反膨胀逻辑。 Divi CSS 功能非常大，它经常在页面上造成不必要的膨胀。
基于页面的 CSS 加载
这就是页面动态加载 CSS 时发生的情况，
- 它只加载需要设置 Divi 主题样式的 CSS 文件。 文件大小不超过 50kb。
- 然后它加载包含页面设计图的 CSS 文件。 它只会动态打开页面不同部分中使用的那些文件。 例如，对于一个简单的主页，只有 30kb 的文件。
在这里，它现在是 80kb 的 CSS 文件，没有任何膨胀。 以前，大小为 900kb，几乎满是臃肿。
在这里，这个主页是使用 Divi builder 制作的，你可以看到这个页面的原生 CSS 文件是如何显示页面组件的。
动态 JavaSript
我们通常使用 JavaScript 来提高网站性能，简化和现代化我们的设计。 使用动态 JavaScript，Divi 可以从外部库导入 Js 函数。 因此，页面上的编码将不那么复杂，并且页面肯定会比以前更快地轻 &。 防膨胀功能每页有效，因此您不必担心功能损坏，Divi 会处理它。
这是一个小例子，说明 Divi 抗膨胀功能如何处理灯箱和粘性功能。
动态图标
图标是网页中非常重要的一部分。 Divi允许以一种聪明的方式加载该页面所需的子集字体，而不是加载所有图标。 基本上，每个网页都有三个图标子集，
- Base - 来自模块的 Divi 主题默认图标。
- 社交 - 社交媒体遵循基本图标集中的图标。
- 全部 - 整个图标包，图标选择器可以选择和使用所需的图标。
如果任何页面不使用社交媒体模块或图标选择器选择的任何图标，则该页面将使用占用 6kb 空间的基本图标集。 如果我们包含社交媒体图标，大小会更高一些。
如果我们使用图标选择/模糊模块，那么整个图标集的大小可以达到 90kb。
包起来
Divi的抗腹胀功能绝对是非常有用的。 这将使Divi网站更快，并大大改善用户体验。 通过为Divi网站带来更多功能和速度，用户不断获得更好的支持。 希望这些努力将继续下去。 如果您喜欢这篇文章，请与您的朋友分享，并在评论部分告诉我们您的查询。
