WordPress divi主题

Divi 速度优化:终极指南

by | May 11, 2022 | Divi主题使用教程 | 0 comments

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

Divi 不仅仅是任何页面构建器。 Divi 通过完整的网页设计系统将设计过程提升到一个全新的水平,使您可以直观地设计网站的每个部分。 但这并不意味着 Divi 必须缓慢。 离得很远。

google广告开户

Divi 内置的速度和性能优化功能可以轻松地将您的网站置于 Google PageSpeed 分数的榜首。 凭借动态模块框架、动态 CSS、动态 JavaScript 库等功能,Divi 现在既是一个强大的页面构建器,也是一个轻量级的主题。 但与 Divi 一样快,还有其他潜在因素需要优化。 如果不解决,您的 Divi 网站的速度将不必要地受到影响。

在这篇文章中,我们将探讨已经为加速 Divi 所做的工作以及我们可以做些什么来使其更快。 以下是我们将涵盖的一些关键主题:

WordPress 性能与 Divi 性能

Divi 通常不是您网站性能的主要决定因素。 这只是拼图的一部分。 通常,您还需要考虑 WordPress 网站的底层优化需求。 Divi(Divi 主题和/或 Divi Builder)位于 WordPress(CMS)之上,后者位于服务器软件堆栈之上,后者位于托管基础设施之上。 所有这些都需要正确调整。 对于初学者来说,这些包括良好的托管、缓存和 CDN。 如果没有这些底层优化,无论我们如何优化 Divi,Divi 网站都会变慢。 因此,如果您的 Divi 网站非常慢,那么您也需要考虑这些其他难题。

有了 WordPress 网站的底层优化需求,我们需要解决 Divi 的性能优化问题。 这是通过增强 Divi 主题和/或 Divi Builder 的性能来完成的,确保它在基于 WordPress 的区域和在 WordPress 中工作的区域中表现最佳。 一旦所有这些部分都得到优化,我们就可以成功地建立一个具有最佳速度和性能的 Divi 网站。

在下面文章的其余部分,我们将首先解决 Divi 的内置性能优化(已经为您完成的东西)。 然后,我们将通过解决一些潜在的优化需求(您可以做的其他事情)来解决如何进一步优化您的 Divi 网站。

Divi 的内置速度和性能优化功能

首先,让我们看一下 Divi 已经内置的一些速度和性能优化。 这些优化功能从各个角度加速 Divi,使其成为市场上最快的页面构建器。 但这还不是全部。 Divi 采用动态框架构建,可消除臃肿,并为 Divi 提供更多模块和更多功能的基础,而无需向您的网站添加臃肿。 这为您提供了两全其美的优势:扩展页面构建器的强大功能和轻量级主题的灵活性。

可以通过导航到 Divi > 主题选项来管理性能优化功能。 在常规选项卡下,选择性能子选项卡。

divi速度优化

现在让我们仔细看看使构建超快速 Divi 网站变得如此容易的功能。

WordPress divi主题

动态模块框架

动态模块框架功能通过按需选择和执行 PHP 函数以强大的方式提高站点速度。 Divi 处理渲染所需的逻辑 只要 每个页面上使用的模块和功能都在运行中 – 其他所有内容都被排除在外。 换句话说,任何可能被认为是“膨胀”的东西都会从后端删除。

按需模块

例如,如果您在一个页面上有 3 个模块,Divi 将只处理这 3 个模块所需的功能,而不是处理所有模块的所有功能,无论使用哪个模块。 这 3 个函数会将该模块的简码/HTML 呈现到页面,而不会浪费任何处理时间。

divi速度优化

按需功能

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

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

动态 Javascript 库

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

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

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

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

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

推迟 jQuery 和 jQuery 迁移

在可能的情况下,jQuery 和 jQuery Migrate 将被移到正文中,以消除渲染阻塞请求并加快加载时间。 如下图所示,如果 jQuery 脚本提前加载(在标头中),它将暂停 HTML 的解析,直到脚本执行。 这会减慢页面的渲染速度

fiverr建站WordPress程序员

divi速度优化

只是另一方面,如果第三方插件将 jQuery 注册为依赖项,则会将其移回头部以避免冲突。 如果它导致问题,可以禁用此选项。

动态 CSS

动态 CSS 将相同的反膨胀逻辑(在动态模块框架中使用)应用于 Divi 的样式表。 可以想象,考虑到 Divi 的所有功能,它的主样式表会非常大。 但是在每个页面上加载大型样式表会导致不必要的膨胀和页面加载时间变慢。

使用动态 CSS,Divi 的 CSS 被分解成数百个小组件。 在每个页面上,这些 CSS 组件组合在一起形成一个独特的样式表,其中仅包含根据您正在使用的模块、模块功能和主题布局选项设置特定页面样式所需的部分。

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

独立站选品工具

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

关键 CSS

Divi 的关键 CSS 系统通过识别首屏内容样式所需的 CSS 并推迟其他所有内容来提高网站速度。 由于页面首次加载时只需要关键样式,并且由于渲染阻止资产在页面速度方面发挥着如此重要的作用,因此 Divi 自动分离关键和非关键样式的能力使其比其他 WordPress 主题和构建器具有巨大优势. 在 Divi 处理完其 CSS 后,网站标题中几乎没有任何剩余内容,这意味着内容会立即显示,这就是为什么 Google 开箱即用地为 Divi 网站提供如此高的分数的原因。

例如,如果您的首屏内容包含标题、段落、按钮和图像,则只有与这些元素相关的 CSS 才会在您的访问者加载页面时被加载。 当然,其余的 CSS 也会被加载,但不是在第一次交互时加载。 这就是所谓的非关键 CSS。

divi 批判性 css

有关此功能如何工作以及如何使用它的更完整说明,请查看我们关于 Divi 的关键 CSS 功能如何提高站点速度以及如何构建最快的 Divi 页面的文章。

高质量外链购买

临界阈值高度

与临界 CSS 相关的是临界阈值高度选项。

启用关键 CSS 后,Divi 确定“首屏阈值”并推迟首屏以下元素的所有样式。 但是,此阈值只是一个估计值,可能会因不同设备而异。 增加阈值高度将延迟更少的样式,从而导致加载时间稍慢,但发生累积布局移位 (CLS) 的机会更小。 如果您遇到 CLS 问题,您可以增加阈值高度。

加载动态内联样式表

Load Dynamic In-Line Stylesheet 选项是最终的 CSS 优化,它删除了所有渲染阻塞 CSS 请求。

由于动态 CSS,基本 Divi 样式表现在足够小,可以在实际页面上在线加载! 内联加载此 CSS 可消除渲染阻止请求并提高 Google PageSpeed 分数。 当启用关键 CSS、动态 CSS 和加载动态内联样式表选项时, 移除所有阻止渲染的 CSS 请求.

改进谷歌字体加载

改进 Google 字体加载选项启用 Google 字体缓存并将它们内联加载到标题中。 这减少了渲染阻塞请求并加快了加载时间。

JasperAI 10000字免费额度试用

我们还添加了限制旧版浏览器的 Google 字体支持选项。

这基本上删除了旧字体文件以减少有效负载。 启用此选项将减小 Google 字体的大小并缩短加载时间,但是,它会限制某些非常旧的浏览器对 Google 字体的支持。 您可以将其关闭以增加对旧浏览器的支持,但会降低性能。

禁用 WordPress 表情符号

WordPress 带有一个原生表情符号系统,但由于现代浏览器支持原生表情符号,这真的不再需要了。 事实上,原生表情符号看起来比 WordPress 版本好得多。 Divi 为您提供禁用本机 WordPress 表情符号的选项,从而删除不需要的资源。 并且具有更少的资源来呈现导致更快的页面加载。

推迟古腾堡块 CSS

在页面上使用 Divi Builder 时,您也选择不使用默认的 WordPress 块编辑器 (Gutenberg)。 而且由于您不会使用块来设置页面样式,因此您不需要 Gutenberg CSS 渲染阻止您的 Divi 页面加载。 启用延迟 Gutenberg 块 CSS 选项后,Divi 现在(默认情况下)在您使用 Divi Builder 的页面上延迟加载 Gutenberg 块 CSS。 它仍然会加载以防万一(在页脚中),但它将不再是渲染阻塞。

动态图标

Divi 现在附带图标字体子集,可根据您使用的模块和功能按需加载。 这将 Divi 的基本图标字体大小从 90kb 降低到 6kb。 仅在需要时才加载完整的图标集。 如果您使用子主题或自定义 Divi 模块,此选项默认禁用。 如果您的子主题或第三方 Divi 模块使用完整的 Divi 图标集,则此选项应保持禁用状态。

WordPress备份工具updrafplus

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

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

这是由于页面上存在社交媒体关注模块而动态加载的社交图标字体子集的示例。

如果您需要访问所有页面上的整个图标字体(例如,如果您在子主题中使用我们的图标字体),那么您可以禁用此选项并在所有页面上加载整个图标字体库。

对响应式图像的原生 Srcset 支持

divi速度优化

Divi 包括对所有 Divi 图像的原生 SRCSET 支持,这意味着 Divi 将自动使您的图像响应并为每个设备提供完美尺寸的图像。 由于较小的图像提供给较小的设备,这可以大大改善……

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