WordPress divi主题

Divi 的新抗膨胀功能如何提高网站速度

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

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

新版本的 Divi 消除了臃肿,并为您提供了两全其美的优势:扩展页面构建器的强大功能和轻量级主题的灵活性。 Divi 的新抗膨胀功能将以强大的方式提高 Divi 网站的速度。 这些功能只是 Divi 巨大的性能优化更新的一部分,它将使您的网站获得位于列表顶部的 Google PageSpeed 分数。 我们将在本教程中讨论的 4 个新的抗膨胀功能包括:

google广告开户

  • 动态模块框架
  • 动态 CSS
  • 动态图标
  • 使用动态 JavaScript 库进行 JavaScript 优化

膨胀问题和 Divi 的解决方案

什么是网站膨胀?

网站膨胀表示任何给定静态网页(HTML)的大小,以及它用于设置页面样式(CSS)和添加复杂功能(如弹出窗口和运动效果(JavaScript))的所有其他文件的大小。

但这还不是全部。 基于 WordPress 主题(如 Divi)构建的网站在后台使用 PHP 文件动态呈现页面上的 HTML。 因此,当我们谈论网站膨胀时,我们必须考虑这些动态呈现 HTML 到页面的 PHP 文件的大小和效率。

说网站臃肿通常意味着页面 (1) 加载和/或处理的内容超出了所需内容,以及 (2) 加载和/或处理效率低下。

膨胀如何影响网站速度

当网站加载超过任何给定页面所需的负载时,页面的加载时间会受到影响,从而导致网站速度变慢。 例如,如果您有一个包含 3000 行 CSS 的样式表,并且您将该样式表加载到仅使用该样式表中的 300 行 CSS 的页面上,那么您就浪费了时间来加载其他 2700 行从未使用过的 CSS。

同样,假设您指向 5 个在每个页面上运行的外部 JavaScript 库。 如果您的页面仅使用这 5 个库中的一个,则该站点在呈现页面时将无缘无故地浪费时间运行 4 个 JavaScript 库(包含数千行代码)。

但是除了未使用的 CSS 和 JS 之外,还有更多的膨胀风险。 您网站的 PHP 文件运行大量函数来确定向页面提供哪些内容。 因此,如果您有一个包含 25000 行代码和数百个函数的 functions.php 文件,那么在将内容传递到页面之前允许您的站点运行整个文件是多余的,尤其是当页面只需要其中一些函数来执行被执行。

所有这些花费在梳理不必要的 CSS、JS 和 PHP 上的时间无疑会影响您网站的整体速度。

我们如何解决 Divi 的臃肿问题

由于 Divi 多年来积累的大量设计功能,臃肿成为一个需要解决的问题。 为了解决膨胀问题,我们将“反膨胀”逻辑应用于使 Divi 的膨胀问题完全过时的新功能。 有了这些抗膨胀功能,Divi 现在可以非常高效地处理和呈现页面所需的内容,仅此而已。 有了这些新功能,Divi 就不会出现臃肿问题。

Divi 的抗膨胀功能

解决 Divi 臃肿问题的四个关键功能包括:

WordPress divi主题
  • 动态模块框架——这通过优化 PHP 文件以仅运行渲染页面上添加的模块和功能所需的函数来解决 PHP 膨胀问题。 不处理额外的函数。
  • 动态 CSS – 这通过动态构建仅包含页面所需 CSS 的自定义样式表来解决 CSS 膨胀问题。 没有加载其他 CSS。
  • 动态图标——这通过加载页面使用的特定图标字体子集而不是不必要地加载所有图标字体来减少臃肿。
  • 使用动态 JavaScript 库进行 JavaScript 优化——这通过优化 Divi 的主 script.js 文件(现在是一半大小)并仅在需要使用外部 JavaScript 库时将其动态加载到页面来解决 JavaScript 膨胀问题。 不会运行其他不必要的 JS 库。

您可以通过导航到 Divi > 主题选项来启用这些功能。 然后在常规选项卡下,选择性能子选项卡。 在那里,您将看到所有可用的性能选项,包括上面提到的四个。

divi 抗膨胀功能可提高网站速度

现在让我们更详细地了解 Divi 的每个抗膨胀功能如何提高 Divi 网站的速度。

Divi 的新抗膨胀功能如何提高网站速度

divi 抗膨胀功能可提高网站速度

动态 PHP 框架:按需函数

动态 PHP 框架功能通过按需选择和执行功能以强大的方式提高站点速度。 Divi 的内置反膨胀逻辑将仅执行仅呈现页面上使用的模块和功能所需的功能,仅此而已。

处理前检查

将内容从您的网站文件(服务器端)提供到网页(客户端)的动态 PHP 过程非常有效。 通过 PHP 文件执行快速初始检查以确定是否使用了模块或功能。 完成后,该页面不会再次执行检查,因为它会记住该页面需要执行的功能。 在加载页面之前,无需再运行数千行未使用的代码和数百个不必要的函数。

按需模块

此功能具有用于将模块动态加载到页面的新框架。 由于通过 PHP 的反膨胀逻辑,Divi 将只处理页面上使用的模块所需的简码函数。 因此,如果您在一个页面上有 3 个模块,Divi 将只运行这 3 个模块所需的功能,而不是运行所有模块的所有功能,无论使用哪个模块。 这 3 个函数会将该模块的简码/HTML 呈现到页面,而不会浪费任何处理时间。

divi 抗膨胀功能可提高网站速度

按需功能

就像 Divi 按需动态处理和加载模块一样,Divi 对页面上使用的所有功能执行相同的操作。 Divi 不会为所有可能在 Divi 元素上使用的功能(滚动效果、动画、粘性选项、边框选项等)运行函数,而是只处理那些实际在元素上使用的功能。 此功能不仅适用于模块,还适用于任何 Divi 元素,包括部分、行和列。

divi 抗膨胀功能可提高网站速度

fiverr建站WordPress程序员

制作三明治的最快方法

如果你要去厨房做一个花生酱和果冻三明治,你不会花时间在选择你需要的三种配料(面包、花生酱、果冻)之前把所有东西都从储藏室里拿出来。 当然不是! 您将快速查看储藏室中的物品,然后仅取出这三种成分。 然后你做三明治。 以同样的方式,Divi 将在逻辑上浏览您在 PHP 文件(食品储藏室)中需要的功能,然后仅使用这些功能来提供您的页面(三明治)所需的模块和功能(成分)。

动态 CSS

PHP 框架中使用的相同抗膨胀逻辑也已应用于 Divi 的样式表。 可以想象,考虑到 Divi 的所有功能,它的主样式表相当大。 但是在每个页面上加载这个大型样式表会导致不必要的膨胀和页面加载时间变慢。

Divi 根据每个特定页面设计动态加载 CSS

使用动态 CSS,每次加载页面时,都会发生以下情况:

  • Divi 的基本 CSS 已加载,其中仅包含设置 Divi 主题样式所需的 CSS。 这个 CSS 在 50kb.
  • Divi 还根据页面需要动态加载额外的 CSS。 因此,此 CSS 将仅包含页面上使用的任何模块、功能或布局设置所需的样式。 通过简单的主页设计,这个 CSS 只能添加另一个 30kb.

divi 抗膨胀功能可提高网站速度

这解决了 CSS 膨胀问题,因为它现在不存在。 有 膨胀,因为没有加载其他 CSS。 在 Dynamic CSS 之前,Divi 的样式表就在身边 900kb 并且无论内容如何,​​它都会加载到所有页面上。 现在,如果您的页面只需要 80kb 的 CSS,Dynamic CSS 消除了您不需要加载页面的 800+kb。 这意味着您的页面加载速度更快。

独立站选品工具

例子

假设您使用 Divi Builder(或加载预制布局)构建主页,如下面的屏幕截图所示。 您可以看到动态生成的 CSS 如何与页面上的设计元素对应。 Divi 检查在该页面上添加和设计的每个元素(部分、图像、文本、分隔符等)并加载它需要的 CSS,仅此而已。

divi 抗膨胀功能可提高网站速度

另外,这只是在页面上工作的一个动态 CSS 实例的示例。 另一个页面可能需要更少的 CSS 并且加载速度更快!

动态图标

图标字体子集的智能交付以加载您需要的字体,而无需在每个页面上加载所有图标字体。

根据页面需要使用三个图标字体子集。

高质量外链购买
  • 基本 – 此子集包括默认情况下在 Divi 主题及其模块中使用的所有图标。
  • 社交——这个子集包括所有基本图标和所有社交图标,在使用社交媒体关注模块时加载。
  • 全部 – 这是您在 Divi 模块中使用图标选择器选择自定义图标时使用的整个图标集。

如果您的页面未使用社交媒体共享模块或使用图标选择器添加图标的模块,则该页面的基本图标字体文件大小仅为 6kb。 使用社交媒体共享模块会增加一些尺寸,以包含更多所需的社交图标字体。 这是由于页面上的社交媒体关注模块而动态加载的社交图标字体子集的示例。

divi 抗膨胀功能可提高网站速度

例如,在简介模块上使用图标选择器将使用接近 90kb 的完整图标集。 这是一个将所有图标字体子集添加到使用模块图标选择器中的字体的页面的示例。

divi 抗膨胀功能可提高网站速度

很高兴知道,如果您不在页面上使用图标,页面会快一点。

JasperAI 10000字免费额度试用

使用动态 JavaScript 库进行 JavaScript 优化

为了提高网站速度,我们优化了 JavaScript,使其更加简洁和模块化。 这允许 Divi 按需动态加载 JavaScript。 因此,现在,Divi 可以加载 JavaScript 函数(如 Sticky Options)以及外部 JavaScript 库(如 Magnific Popup),仅当页面上的模块或功能需要它们时。

较小的基本 Javascript 文件大小与动态 JavaScript 库相结合肯定会提高网站速度,因为每个页面加载需要处理的代码更少。 而且,由于这种抗膨胀逻辑发生在每页的基础上,如果您在一个页面上有一个粘性行,您不必担心粘性 JavaScript 会加载到没有它的页面上。 这就是 Divi 动态 JavaScript 的美妙之处。

示例 1:使用 Lightbox 的图像模块的动态 JavaScript 库

假设您有一个带有启用了灯箱的图像模块的页面。 Divi 将动态指向并运行该页面的 Magnific Popup JS 库,以应用该灯箱弹出功能。 如果在图像上禁用了灯箱,则 JS 库不会在页面上加载或运行。

divi 抗膨胀功能可提高网站速度

示例 2:使用粘性选项的 Divi 元素的动态 JavaScript

假设您决定使用 Divi 的粘性选项使 Divi 元素具有粘性。 Divi 会将该脚本动态添加到页面中,以便将粘性功能应用于元素。 如果没有为该元素(或页面上的任何其他元素)提供粘性选项,则该脚本永远不会添加到页面中。

WordPress备份工具updrafplus

divi 抗膨胀功能可提高网站速度

力量 速度:不再妥协

使用 Divi 的新抗膨胀功能,您可以拥有一切。 您可以想象的所有设计工具,选择何时使用它们的能力,以及您想要的速度的网站。 使用 Divi 设计网站时,您不再需要牺牲网站速度。

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