Divi 速度优化：终极指南

已发表: 2021-08-25

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

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

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

  • WordPress 性能与 Divi 性能
  • Divi 的内置速度和性能优化功能
  • 动态模块框架
  • 动态 JavaScript 库
  • 推迟 jQuery 和 jQuery 迁移
  • 动态 CSS
  • 关键 CSS
  • 临界阈值高度
  • 加载动态内嵌样式表
  • 改进谷歌字体加载
  • 禁用 WordPress 表情符号
  • 推迟古腾堡块 CSS
  • 动态图标
  • 响应式图像的原生 Srcset 支持
  • 您可以做 14 件事来优化您的 Divi 网站的速度和性能
  • #1 升级您的主机
  • #2 TTFB 优化
  • #3 优化您网站的数据库
  • #4 优化您的 DNS
  • #5 使用内容分发网络 (CDN)
  • #6 添加缓存
  • #7 添加缩小和聚合
  • #8 启用 Gzip 压缩
  • #9 图像优化
  • #10 视频优化
  • #11 建立你的 Divi 页面以提高速度
  • #12 小心谨慎地使用插件
  • #13 进行速度测试
  • #14 考虑我们的 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 网站变得如此容易的功能。

动态模块框架

动态模块框架功能通过按需选择和执行 PHP 函数以强大的方式提高站点速度。 Divi 处理所需的逻辑，以便在运行中仅呈现每个页面上使用的模块和功能——其他一切都被排除在外。 换句话说，任何可能被视为“膨胀”的东西都会从后端删除。

按需模块

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

分区速度优化

点播功能

正如 Divi 按需动态处理和加载模块一样，Divi 对页面上使用的所有功能也执行相同的操作。 Divi 不处理可在 Divi 元素上使用的所有可能特征的函数（滚动效果、动画、粘性选项、边框选项等），Divi 仅处理元素上实际使用的那些特征函数。 此功能不仅适用于模块，还适用于任何 Divi 元素，包括部分、行和列。

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

动态 Javascript 库

为了提高网站速度，我们优化了 Divi 的 JavaScript，使其更加简洁和模块化。 这允许 Divi 动态按需加载 JavaScript。 仅当页面上的模块或功能需要时，Divi 才会加载和处理 JavaScript 函数（如粘性选项）以及外部 JavaScript 库（如 Magnific Popup）。

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

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

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

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

推迟 jQuery 和 jQuery 迁移

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

分区速度优化

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

动态 CSS

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

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

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

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

关键 CSS

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

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

div 批判性 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 字体并在标题中内嵌加载它们。 这减少了渲染阻塞请求并加快了加载时间。

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

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

禁用 WordPress 表情符号

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

推迟古腾堡块 CSS

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

动态图标

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

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

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

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

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

响应式图像的原生 Srcset 支持

分区速度优化

Divi 包括对所有 Divi 图像的原生 SRCSET 支持，这意味着 Divi 将自动使您的图像具有响应性，并为每个设备提供完美尺寸的图像。 由于较小的图像提供给较小的设备，这可以大大提高加载速度，并且不需要您做任何额外的工作。

您可以做 14 件事来优化您的 Divi 网站的速度和性能

速度优化继续在您网站的用户体验及其搜索引擎优化 (SEO) 中发挥关键作用。 因此，为了让您的 Divi 网站对访问者和 Google 表现良好，您需要解决 Divi 之外的那些区域，以进一步优化您的网站速度。

您可以通过以下 14 件事来优化 Divi 网站的速度和性能……

#1 升级您的主机

如果您对网站的速度（和性能）非常重视，那么首先要选择一个好的托管服务提供商。 事实上，您可以尽一切努力优化您的网站以提高速度，但由于您的主机，您的网站仍然很慢。 真正优秀的托管服务提供商会为您进行大量速度优化，因此您不必担心。 因此，如果您的 Divi 站点速度较慢，则第一步是考虑升级您的主机。

使用 Divi 优化托管

如果您想要一个快速的 Divi 网站，那么选择不仅针对 WordPress 还针对 Divi 进行优化的托管服务提供商是有意义的。 因此，如果您正在寻找与 Divi 完美配合并带有自动安装 Divi 的出色 WordPress 托管，那么 Divi Hosting 是您的绝佳新解决方案。 我们与一些我们最喜欢的 WordPress 主机（Pressable、Flywheel 和 SiteGround）合作，为 Divi 客户提供一种简单的方法来创建快速的 Divi 网站，由满足 Divi 的所有要求的现代托管基础设施提供支持，并由领先的 WordPress 专业人士提供支持.

为什么选择 Divi Hosting？

最终，每个 Divi 用户都需要对托管做出选择。 做出错误的选择会导致很多悲伤。 我们想让这个选择变得容易。 以下是使 Divi Hosting 与众不同的几件事：

  • 创建网站时，Divi 会自动安装。
  • 您的新网站会自动连接到您的 Elegant Themes 帐户并使用您的许可证密钥进行设置，以便您可以获得更新和支持。
  • 您的托管环境将配置为开箱即用地满足 Divi 推荐的所有 PHP 设置。 无需调整。
  • 您的网站将由快速且现代的托管基础​​设施提供支持，这意味着快速加载时间和自动缓存和 CDN 等现代工具。
  • 您将由一家内外都了解 WordPress 的公司托管。
  • 您将由我们的一位合作伙伴托管，这意味着他们致力于确保在其系统上获得出色的 Divi 体验。

有很多托管选项，而且它们并非都是平等的。 我们每天都在帮助客户处理与托管相关的兼容性问题，这些问题可能令人非常沮丧。 每个人都需要托管才能使用 Divi，而您的托管体验无需挣扎。 有关更多信息，请了解 Divi 托管如何成为 Divi 的最佳托管解决方案。

为您的 Divi 站点寻找合适的托管解决方案

请您将n EED用航空维修主机有一个快速的航空维修网站？ 绝对不。 还有其他出色的托管解决方案，而 Divi 将始终在出色的托管环境中运行良好。 但是由于托管在速度和性能优化方面起着如此关键的作用，您应该花必要的时间为您的 Divi 站点找到合适的托管解决方案。

那里有很多很棒的和不太优秀的托管公司。 每一个通常都提供多种托管解决方案和服务。 因此，找到合适的人可能会让人不知所措。 以下是有关在为您的 Divi 站点寻找合适的托管解决方案时要考虑的最常见托管类型的一些有用信息。

传统（共享）托管（不推荐）

这是迄今为止最受 WordPress 用户欢迎的托管类型，这在很大程度上是因为它最实惠。 但不幸的是，这是速度优化最糟糕的选择。 使用传统的共享主机，您将与他人共享服务器的所有可用资源。 因为您是共享的，所以这种托管的成本很低。 但缺点是您无法控制其他站点在您的共享服务器上获得的流量。 因此，您很容易陷入加载速度极慢的时期，甚至网站完全关闭的时期。 所以你最好清楚你的共享主机可以处理多少流量。

专用主机

使用专用主机，您将拥有专属于您的专用服务器。 无需与任何人共享任何资源。 这意味着您的网站将拥有更可预测且一致的快速加载时间。 这通常作为大公司的顶级选项以高溢价提供。

VPS 主机

虚拟专用服务器 (VPS) 托管基本上是共享和专用托管之间的中间地带。 您的服务器空间是“私有的”，这意味着它与其他人完全分开（有点像您站点文件的封闭社区）。 因此您的站点文件不会暴露给服务器上的其他人。 与共享主机不同，VPS 确实拥有大量的专用系统资源（或电源）供您使用，以确保您的站点始终获得所需的资源，从而始终如一地提供快速加载时间。 因此，您不必担心其他网站的流量高峰会影响您的网站速度。

但是，除非您有托管的 VPS，否则这种托管主要适用于那些精通技术以自行处理事情的 DIY 类型。 有关更多信息，请参阅 VPS 托管和共享托管之间的性能比较。

云主机

使用云托管，您可以访问服务器网络（在云中）而不是单个物理服务器。 这允许您根据需要从该服务器网络中提取所需的所有资源。 从本质上讲，您拥有一个由整个网络的力量和资源支持的服务器空间的虚拟分区。 因此，您不必像在共享主机中那样担心流量高峰。 云托管非常灵活，可根据您的需求进行扩展。

云托管和 VPS 托管之间的一个主要区别在于，VPS 托管具有专用（或有限）数量的资源可供提取，这些资源可能会耗尽，也可能不会耗尽。 另一方面，云托管能够在不耗尽资源的情况下保持您的资源可用，因为它始终可以从云中的其他服务器中提取。 理论上，云托管提供了更加一致和可靠的高速。 因此，如果您对速度很在意，云托管是一个不错的选择（甚至可能是最好的选择）。

托管 WordPress 托管

托管 WordPress 主机通常是指由 WordPress 专家管理的共享主机。 它通常比传统的共享主机贵一点，但如果你想要一个更快的 Divi 网站，托管 WordPress 主机可能是值得的。 它不像 VPS 那样“私密”，也不像专用托管环境那样强大。 但它确实有助于通过让 WordPress 专家完成工作来最大限度地提高共享环境的速度。 他们做得很好，因为他们为 WordPress 站点量身定制了服务并严格配置了服务器。 其中很多都带有许多酷炫而方便的内置功能，例如一键登台环境、站点缓存、一键 CDN 部署、自动备份、SSL 等。 它们非常适合我们这些不想依赖（或管理）一堆插件来进行基本速度优化、安全性和管理的人。

事实上，Divi Hosting 是针对 Divi 优化的托管 WordPress 托管。 这消除了为您的 Divi 站点优化托管环境的所有麻烦。

#2 优化第一个字节的时间（TTFB）

分区速度优化

什么是TTFB？

首字节时间 (TTFB) 是用户从您的主机/服务器接收网站数据的第一个字节所需的时间。 因此，当用户发出 HTTP 请求（加载您的网页）时，TTFB 实质上就是浏览器接收任何数据之前的等待期。 这很重要，因为 TTFB 越长，页面加载所需的时间就越长。

把它想象成吃快餐。 餐厅可能会被优化以快速提供您的食物。 事实上，他们可能已经有一个汉堡包在等着你。 但是您仍然需要排队等候订购。 那个等待期就是你可以认为第一口的时间（看看我在那里做了什么）。

TTFB 应该在 200 毫秒左右（根据 Google 的说法）。 但是对于托管不佳且尚未优化的站点，TTFB 很容易达到 2 秒或更长时间。

是什么导致 TTFB 缓慢？

您的 Divi 站点上的 TTFB 延迟通常是由以下原因引起的：

  • 需要接收的动态内容量。 这可以通过缓存、数据库优化和 CDN 来减少。
  • 您的服务器当时正在经历的流量。 传统（或共享）托管服务提供商很难关闭 TTFB，因为您要与同一服务器上的其他人共享资源。 他们的流量高峰会降低您服务器的处理速度。
  • 您的网络服务器配置。 一个好的 WordPress 托管服务提供商可以通过提供可靠的后端基础设施和优化您的 Web 服务器配置（事情几乎不受您控制）来帮助您网站的 TTFB。

如何加速您的 Divi 站点的 TTFB

TTFB 是 Google 用来确定您网站排名的 Web Vitals（以及 FCP、LCP 和 CLS）之一。 所以优化它很重要。 好消息是 TTFB 可以优化。 以下是一些可用于减少 TTFB 的关键技巧。

  • 升级您的主机。 提升 TTFB 的最有效方法是简单地升级您的主机。 为 WordPress 或 Divi Hosting 的托管主机支付更多费用将对 TTFB 产生最大的影响。
  • 使用 CDN 。 这将允许访问者从离他们最近的服务器加载您网站的数据，以便您可以减少延迟并减少 TTFB。
  • 删除不必要的插件或主题。 插件和主题（尤其是过时的）可能会使您站点的服务器和加载时间（包括 TTFB）陷入困境。 因此，最好只使用基本质量的插件（或主题）并删除其他插件。
  • 实现缓存。 Divi 具有用于交付 Divi JS 和 CSS 的内置缓存。 但是将您的网站作为一个整体缓存，除了使用 CDN 之外，还会减少 TTFB。
使用 Cloudflare 提升 TTFB

快速提升站点 TTFB 的一种方法是使用 Cloudflare。 免费计划中提供的缓存和 CDN 肯定会提升 TTFB。 您还可以利用 Cloudflare 的自动平台优化功能，该功能已经过测试，显示 TTFB 减少了 72%。

要了解更多信息，请查看我们关于 TTFB 的完整文章以及如何为此优化您的网站。

#3 优化您网站的数据库

分区速度优化

为什么 WordPress 网站需要干净的数据库

与静态 HTML 站点不同，WordPress 是一个动态 CMS，它使用 PHP 检索存储在 MySQL 数据库中的数据，以便将该数据显示在网页上。 这使管理您的站点变得容易，但缺点是加载页面需要更长的时间，因为它必须在加载页面之前定位数据库中的数据。 通常，出于这个原因，静态 HTML 网站将比 WordPress 网站更快。

尽可能快地保持 Divi 站点的一种方法是确保您拥有一个干净的数据库。 WordPress 站点文件在您的数据库中按表组织，每次向站点添加新数据（如主题和插件）时，您都会创建新表和更多数据。 正如您所料，您的数据库越混乱，查找数据就越困难。 这会导致网站速度变慢。

因此，如果您在多年尝试其他主题和无数插件后将 Divi 主题添加到您的网站，那么您可能会存储一些不再需要的数据。 即使您卸载了插件，也不意味着数据库中的所有数据都消失了。 插件喜欢在那里留下一些数据，以防你重新安装插件。 不酷，我知道。 这些剩余的数据可能会导致不必要的混乱并减慢您的网站速度。

就像每个人都需要组织更有效地工作一样，每个 WordPress 网站（无论是否为 Divi）都需要一个干净的数据库来更快地加载页面。 因此，如果您的网站已经有一段时间了，清理它可以显着加快速度。

如何优化您的 Divi 站点的数据库

我建议为此使用插件。 WP Optimize 似乎是一个可靠的选择。 但是还有其他 WordPress 数据库插件需要考虑。

或者，如果您知道自己在做什么，您总是可以在 MySQL 中手动完成。

除了清理您的 WordPress 数据库之外，您可能还希望通过减少它存储的数据来使 WordPress 更加轻便。 例如，WordPress 会自动将已删除的项目保留在垃圾箱中 30 天。 您可能希望将该时间段缩短为 7。

#4 优化您的 DNS

分区速度优化

DNS 如何影响站点速度

当用户访问您的某个网页的 URL 时，需要进行的第一件事是 DNS 查找。 输入（或单击）URL 后，访问者的 ISP 会向名称服务器发送 DNS 查询，以查找与您的域相关联的 IP 地址（每个域/网站都有特定的 IP 地址）。 从本质上讲，DNS 查找就像在电话簿中查找您的域名以查找该域的 IP 地址。

但是当用户访问您网站上的某个页面时，该页面可能需要访问多个域才能拉出该页面。 因此，您可以在单个页面加载（可能更多）上进行 3 或 4 个域查找。

一般来说，像 Godaddy 和 Namecheap 这样的大多数免费 DNS 提供商通常会比您喜欢的速度慢。

使用 Cloudflare 进行 DNS 优化（如果需要，还可以进行更多）

可以提高 DNS 查找速度的最佳免费选项可能是 Cloudflare。 他们拥有 DNSPerf.com 上记录的最快 DNS 性能。 这将比 GoDaddy 和 Namecheap 快得多。 而且，如果需要，您甚至可以优化 Cloudflare 以用于 DNS，而无需其他服务（如 CDN 或 WAF）。

例如，您可能希望将 Cloudflare 用于 DNS 和安全性（DDOS 检测），并将 KeyCDN（或 MaxCDN）用于 CDN。 这似乎是一个很好的组合。

设置 Cloudflare

Cloudflare 真的很容易设置。 您不必担心事先切换您的主机或任何事情。 您需要做的就是完成他们从输入域开始的 5 分钟设置。

分区速度优化

他们将自动检索您当前的 DNS 记录。

分区速度优化

完成设置所需要做的主要事情是将当前 DNS 提供商（如 GoDaddy）上的默认名称服务器更改为 Cloudflare 的名称服务器。

分区速度优化

然后，您可以从他们的仪表板轻松管理您的 DNS。

分区速度优化

就像这样，您可以提高 DNS 查找速度、更高的安全性以及您网站的 CDN（以及更多）。

说到 CDN，您肯定需要使用其中之一。

#5 使用内容分发网络 (CDN)

分区速度优化

StackPath CDN PoP

内容交付网络 (CDN) 将站点速度提升到另一个水平。 顾名思义，CDN 是用于传送内容的网络。 该网络由世界各地的服务器组成，这些服务器存储您网站内容的缓存静态文件（图像、视频、脚本等）。 然后，当某人发送对该内容的请求（通过访问您的网站）时，距离该人最近的服务器（或 PoP）将提供该内容。 如果没有 CDN，您的网站文件可以从一个服务器位置访问（无论您的主机在哪里存储这些文件），因此您离该服务器越远，将该网站内容传送到您的浏览器的速度就越慢。

想一想，当您想要将披萨送到您家时，您不会选择 30 英里外的披萨店。 您选择 5 英里外的那家是因为您希望它尽快送达（如果您是一个和我一样喜欢披萨的普通人）。 CDN 的工作方式类似。 由于您希望网站尽快出现在您的浏览器中，因此 CDN 将使您的网站文件准备好从离您所在位置最近的服务器传送。 因此，如果您的站点文件存储在旧金山的服务器上，而伦敦的某个人打开了您的站点，则可能需要 1 或 2 秒才能从数千英里之外的服务器接收该数据。 但是使用 CDN，您可以用一半的时间从伦敦的服务器传送相同的数据。 这是一个很大的不同！

因此，即使您在家中看不到结果的全部范围，您也正在加快将您的网站传送到世界各地的速度。

有很多方法可以为您的站点获取 CDN。 许多托管公司将提供一个选项，用于在其服务中部署 CDN。 还有像 Cloudflare 和 StackPath（以前称为 MaxCDN）这样的网络平台提供 CDN 功能以及其他性能和安全功能。

以下是一些值得考虑的可靠 CDN 平台：

  • Cloudflare CDN：除了 DNS 优化（如上所述）之外，Cloudflare 还提供了一个快速且安全的全球 CDN，可以缓存静态内容并将其快速交付给用户。 这包含在他们的免费计划中，这对大多数网站来说都很棒。
  • KeyCDN（您甚至可以使用 CDN Enabler WordPress 插件来集成 KeyCDN；此设置也适用于 Cache Enabler）
  • StackPath（以前是 MaxCDN）
  • 亚马逊云前线
  • 苏库里

有一些缓存插件，如 WP Total Cache 或 CDN Enabler，其中包括一个选项，用于自动集成多个 CDN 提供商，这非常方便。

以下是一些支持 CDN 的插件：

  • WP 最快的缓存
  • WP火箭
  • 自动优化
  • W3 总缓存
  • WP 超级缓存
  • CDN启动器

#6 添加缓存

分区速度优化

可以实施四种主要类型的缓存来加速您的站点。

  • 页面缓存- 此过程存储页面的缓存静态 HTML 版本，以便快速交付。
  • 浏览器缓存- 这使您可以更好地控制浏览器可以缓存哪些内容以及缓存多长时间。 只有某些插件可以执行此操作，因此最好手动执行此操作以获得更多控制。 这将有助于在进行速度测试时处理“利用浏览器缓存”指标。
  • CDN 缓存– 从离您的用户最近的 CDN 提供缓存的网站页面/文件。
  • 对象缓存– 对象缓存缓存 PHP 发起的重复查询结果，以从数据库中检索数据并将其提供给用户。 这与字节码缓存不同，字节码缓存存储用于显示您的网站的已编译 PHP 代码的缓存版本。

在后台提供 Divi 的 JS 和 CSS 文件时，Divi 确实会执行缓存。 但这主要用于 Divi 主题文件，以获得更好的 Divi Builder 功能。

仍然需要为整个网站使用缓存。 大多数站点都有多个插件，这些插件可能需要组合、缩小和缓存它们自己的 CSS 文件。 因此，您绝对可以利用第三方解决方案来提供所有页面的缓存静态 HTML 版本。

Cloudflare 的 CDN 是向您的 Divi 站点添加缓存的好方法。 它将网站内容（静态资源）的副本存储在地理位置更靠近访问者的位置，以减少页面加载和延迟。 Cloudflare 的 WordPress APO 似乎是一个更有针对性的解决方案，用于使用他们的 WordPress 插件为 WordPress/Divi 站点缓存网页和第三方字体。

流行的缓存插件包括：

  • WP火箭
  • 缓存启动器（阅读我们的评论）
  • W3 Total Cache（阅读我们的评论）
  • W3 超级缓存（阅读我们的评论）
  • Comet Cache（阅读我们的评论）
  • WP 最快的缓存

提示：每当您使用插件在您的网站上启用页面缓存时，您都需要确保并在您对网站进行更改时删除（或清除）缓存，以确保您和您的访问者获得最新版本的地点。

#7 添加网站缩小和聚合

分区速度优化

缩小使您的站点文件更小。 缩小站点文件（CSS、JavaScript、HTML）会删除所有不必要的字符（如空格和分页符），从而缩小文件大小。 这减少了浏览器加载页面内容所需的时间。

聚合涉及组合站点文件以减少页面上的总请求并加快访问者的加载时间。

如前所述，Divi 默认情况下会动态缩小和组合 Javascript 和 CSS。 因此，从技术上讲，您不必担心使用第三方插件来进一步缩小和组合 Divi 的 Javascript 和 CSS。 但是，Divi 不会缩小 HTML 输出。 因此，您可以从第三方插件中受益，以缩小（和缓存）页面的整个 HTML。

此外，几乎每个 Divi 站点都将依赖于 Divi 主题之外的文件（如添加到子主题的插件或其他文件），这将受益于缩小和组合 CSS 和 JS 文件。

向整个网站的 HTML、JS 和 CSS 添加缩小的最佳方法之一是使用 Cloudflare。 Cloudflare 使用 Auto Minify 来减小您网站上所有源代码的文件大小。 此外，它是免费版本的标准配置。

一些可以缩小站点文件的可靠插件包括：

  • 自动优化
  • W3 Total Cache（阅读我们的评论）
  • W3 超级缓存（阅读我们的评论）
  • WP火箭（付费）

这些插件应该与 Divi 一起使用。 但是没有办法衡量一个网站的所有细微差别，说一个网站对每个人都是最好的。 有时，第三方插件会以可能导致错误/问题的方式自动缩小 JavaScript 文件，因此请务必彻底测试您的网站。 一般来说，缩小 CSS 文件总是安全的。 但是要小心那些 JavaScript 文件。

如果有冲突，你可能需要禁用 Divi 的内置选项，让第三方插件来处理。

如果您不想为此依赖第三方，您可以随时手动完成。 有关如何执行此操作的更多信息，请查看有关如何缩小您网站的 CSS、HTML 和 JavaScript 的完整帖子。

#8 启用 GZIP 压缩

分区速度优化

Gzip 压缩如何帮助加速您的 Divi 站点

在您的 Divi 站点上启用 Gzip 压缩可以大大提高速度（在某些情况下高达 70%）。 如果您熟悉在计算机上创建压缩（或压缩）文件，那么您已经对 Gzip 压缩的工作原理有了基本的了解。 我们创建 zip 文件（或文件夹）来缩小文件（或文件夹）的内容。 为什么？ 所以我们可以更快地上传和下载文件！ Gzip 压缩为您的网站做同样的事情。 它告诉服务器将它可以压缩的所有文件压缩成更小的版本，以便可以更快地将其提供给客户端。 这确实可以提高页面加载速度。

这是即使在全新安装时也可以提高 Divi 速度的领域之一。 由于无论如何 Divi 已经缩小了核心主题文件，Gzip 或 Brotli 压缩将使这些文件比缩小时小得多。

Gzip 压缩是使用最广泛的压缩算法，但看起来 Brotli 压缩是下一代算法，旨在使文件大小更小以加快数据传输速度。 它被 SiteGround 等托管公司和 Cloudflare 使用。

如何在您的 Divi 站点上启用 Gzip 压缩

一些托管服务提供商会自动启用 gzip 压缩，因为它对站点性能来说非常简单。 随意检查您的网站是否启用了 Gzip 压缩

如前所述，Cloudflare 为免费计划中的所有域提供 Brotli 压缩。

许多 WordPress 性能插件（如 W3 Total Cache 和 WP Super Cache）将包含 Gzip 压缩作为一个选项。 但是，似乎没有必要为这一优化添加性能插件。

启用 Gzip 压缩（在 Apache 服务器上）的一种常用方法是使用 mod_deflate 手动进行。 您所要做的就是通过 FTP 访问您的网站（根目录）（确保显示隐藏文件）。 然后将一段代码复制并粘贴到 .htaccess 文件的底部。

#9 图像优化

分区速度优化

图像优化是导致页面加载速度缓慢的最大罪魁祸首之一。 这可能是因为它很容易被忽略。 毕竟，一张背景图片可以对网页造成多大的损害？ 好吧，你可能会感到惊讶。 一些没有针对 Web 优化的大图像可能会对页面加载速度产生灾难性的影响。 让我们面对现实吧，您的网站可能会有很多图片。

真的没有足够强调图像优化的基本需求。 每个网站都应该这样做。 单独的图像压缩可以使您的站点明显更快，较小的图像尺寸将节省存储空间和带宽（双赢！）。 但是您还应该考虑其他重要的图像优化。

简而言之，在为 Web 优化图像时，您需要执行以下操作：

使用正确的文件类型

对于网络上的图像，您确实应该坚持使用以下图像文件类型：

  • JPG – 这应该是您在网站上使用的大多数图像/照片的首选文件类型，因为您可以获得比 PNG 或 GIF 更小的文件大小的漂亮图像。 除非您需要透明背景，否则避免将 PNG 格式用于背景图像或照片等内容。
  • PNG – 将 PNG 用于需要透明背景的图像。 JPG 不支持透明度。
  • SVG – 这是一种矢量格式，使用 HTML 代码提供极其清晰的细节。 SVG 非常适合制作徽标、图标和其他矢量动画。

调整图像大小和裁剪图像

你永远不希望你的图像比它需要的更大。 例如，如果您在 Divi 的主题选项中添加徽标，则在大多数情况下，您只需要它的宽度为 100 像素。 因此，请勿上传宽度为 5000 像素的徽标并强制 Divi 为您调整该图像的大小。 前端的结果可能看起来相似，但大尺寸正在扼杀您的页面加载时间。

使用 Divi 将图像上传到您的页面时，了解这些图像在 Divi 的列结构中需要多大是有帮助的。 这份终极指南可以帮助您指明正确的方向。 （但是，自那篇文章以来已经添加了新的列结构，因此我们将尝试尽快更新）。

压缩文件大小

在您注意到质量下降之前，您需要将图像文件的大小降低到一定程度。 这是通过图像压缩完成的。 大多数照片编辑器、插件和网站（如 tinypng.com）使用无损压缩（在不损失任何图像质量的情况下缩小图像文件）和智能有损压缩（通过减少元数据和图像质量来减小图像文件的大小）来压缩图像。用户并没有真正注意到的方式）。

利用图像优化工具

如果可以，我建议您在将图像上传到 Divi 站点之前针对 Internet 优化图像。 这可以通过像 Photoshop 这样的照片编辑器来完成，其中包括“保存为 Web”选项。 此外，您可以使用免费的第三方网站（如 TinyPNG.com 或 Compressor.io）在将图像上传到您的网站之前对其进行压缩。

有一些很棒的插件可以为您进行图像压缩。 某些插件（如 Imagify）会压缩您网站上已经使用的图像，并在您将图像上传到 WordPress 媒体库时自动压缩图像。 请记住，为此使用插件可能会在压缩这些图像时对您的网站造成负担，因此最好尽可能事先进行图像优化。

以下是您可以使用的一些出色的图像优化工具和插件：

  • 网站：
    • Compressor.io
    • Tinypng.com
  • 插件：
    • 想象
    • Smush 图像压缩和优化
    • 可湿性粉剂火箭

有关更多信息，请查看 6 种质量图像优化插件的比较。

Divi 的内置 SRCSET 支持

Divi 还内置了具有本机 SRCSET 支持的响应式图像。 通过为不同的响应式显示器（如平板电脑和手机）提供合适尺寸的缩放图像，这进一步改进了 Divi 中使用的图像的优化。

#10 视频优化

分区速度优化

视频优化比图像优化要难一些，但绝对不那么重要。 视频文件可能很大，因此对页面加载速度非常不利。 如果您在服务器上托管大量视频（例如在 WordPress 媒体库中），您将遇到额外的磁盘空间问题。 这就是为什么通常建议使用第三方服务（如 YouTube 或 Vimeo）为您托管视频的原因。 或者，您可以考虑在 Amazon S3 等存储平台上卸载您的视频媒体内容。 这将允许您从 Divi 的视频模块中链接到这些视频，而不必降低服务器的速度。

如果您要自托管视频，则肯定需要减小视频大小以加快加载速度。 您可以使用 Handbrake 等免费工具（易于使用）轻松缩小视频文件。

有关如何在 Divi 中使用视频的更多信息（例如将第三方托管的视频 URL 添加到视频模块），请查看此终极指南。

#11 建立你的 Divi 页面以提高速度

当涉及到它时，网站的速度取决于它加载页面内容的速度。 因此，在考虑性能优化的情况下构建 Divi 网站的每个页面是有意义的。 重要的是确定您构建的每个页面的主要目标。 之后，您可以找到速度和设计的健康平衡，以构建一个在前端看起来很棒的页面，同时保持对后端的依赖。 有关如何优化 Divi 页面内容以提高速度的实际示例，请查看我们关于如何构建最快的 Divi 页面的文章。

在构建页面时，请牢记以下几个关键提示：

  • 优化首屏内容以与 Divi 的内置关键 CSS 配合使用。
  • 使用 Divi 预设来利用 Divi 的内置智能样式功能。 这将允许元素基于类共享 CSS 代码片段，并避免必须为每个元素加载唯一的 CSS 块。
  • 如果可能，请限制用于构建页面的模块类型。 由于 Divi 的动态框架，Divi 不会处理或加载您不使用的模块（及其独特的 CSS）。 例如，如果您可以使用两个文本模块（而不是一个文本模块和一个模糊模块）获得相同的结果，那么最好不要在页面上使用不必要的处理和加载模糊模块。
  • 为您的页面使用动画要聪明。 由于 Divi 的动态特性，如果您不使用它们，Divi 将不会处理或加载 Motion Effects 等功能所需的 JS 或 CSS。 例如，如果您在整个页面中使用常规动画设置，您可能希望避免仅对一个元素使用运动效果。 相反，保持动画风格一致并享受更快的页面加载。

#12 小心谨慎地使用插件

分区速度优化

使用质量插件

质量是插件的关键因素。 事实上，你可以拥有 10 个高质量的插件，它们不会像一个坏插件那样拖慢你的网站。 一般来说，请确保您选择经得起时间考验并获得好评的插件。 并且始终在速度测试之前和之后测试插件如何影响您的网站性能以确保。

删除未使用或过时的插件

除了使用高质量的插件外，从站点中删除任何未使用和/或过时的插件也很重要。 它们可能会损害您的网站性能并带来严重的安全风险。 另外，每个插件（甚至是高质量的插件）都会添加额外的资源，这会增加每个页面加载的时间。 如果您想要一个快速的 Divi 站点，您将希望使用尽可能少的插件。

注意渲染阻塞错误

Divi 没有任何渲染阻塞资产，这意味着你的渲染阻塞样式和脚本来自插件。 如果有一些大型渲染阻止脚本会影响您的速度，您可能会考虑远离这些插件。

#13 进行速度测试

分区速度优化

如果您没有在您的网站上进行过至少一次速度测试，您可能不会阅读本文。 确实如此，了解您的页面为访问者加载的速度非常重要。 进行速度测试是您可以做的最简单的事情之一。 有很多网站可以免费为您执行此操作。 他们提供的指标对于确定进一步优化网站以获得更好性能的方法非常宝贵。

以下是一些不错的起点：

  • GTMetrics
  • 谷歌页面洞察
  • Chrome 开发工具
  • Lighthouse（适用于 Chrome 开发工具）

这些测试的结果促使我们中的许多人开始优化我们的 Divi 网站以加快加载时间。 它们提供了有关您的网页在各个领域的表现的有用细分。 然后，您可以将他们的建议用作检查清单，以在优化网站时进行处理。

将这些在线速度测试工具用于您的 Divi WordPress 网站的最佳方法是在进行任何优化之前先在页面上运行测试。 然后，您可以将其用作基础，以便在进行更改时比较未来的测试。 在您进行每次优化后，您可以查看您的分数是否有所提高。

例如，您可能会注意到使用一个缓存插件会比使用另一个更好。 不要害怕测试多个插件以获得最佳性能。

这是 GTMetrix 提供的有用的 WordPress 优化指南，很有帮助。

当您对网站实施速度优化时，您应该会看到以下方面的改进：

  • 首字节时间 (TTFB)
  • 首次内容绘制 (FCP)
  • 交互时间 (TTI) – 衡量页面何时准备好进行用户交互。
  • 速度指数 (SI) – 衡量您的页面在视觉上完整的速度有多快
  • 总阻止时间 (TBT) – 类似于 Google 的网络重要首次输入延迟 (FID)，它是用户首次与您的网站交互和他们的浏览器响应该操作之间的时间量
  • 最大的内容绘制 – 测量最大的内容元素（如图像）对用户可见所需的时间。
  • 累积布局偏移 – 测量用户加载页面时布局的意外偏移（或移动）。

有关更多信息，请查看我们关于如何提高谷歌页面速度得分的帖子。

目标是速度，而不是完美

测试您的网站并将其优化到完美很容易陷入困境。 但没有网站是完美的。 您甚至可能会发现提高某些速度测试性能等级实际上可能会减慢您的页面加载时间。 那是因为即使是那些速度测试也不是完美的。 像本文一样，它们只是帮助提高网站性能和速度的指南。

#14 考虑我们的 Divi 高速页面蓝图

在我们构建的这个测试网站中，很容易构建一个 Divi 网站，在 Google PageSpeed Desktop 上得分为100 ，在 Google PageSpeed Mobile 上得分为99，在 GTmetrix 上得分为100% 。 这个网站蓝图让开发者可以在真实网站上亲身体验Divi内置的速度优化。 它还可以作为如何优化 Divi 页面内容以提高速度的一个很好的例子。

本次测试站点优化如下：

  • 托管在 SiteGround
  • 使用 CloudFlare 进行缓存、CDN、Brotli 压缩
  • 没有使用额外的插件。
  • 使用 Divi 的内置性能功能
  • 优化页面内容
    • 使用智能样式（Divi Presets）来减少为每个页面生成的动态 CSS。
    • 在首屏优化以确保关键 CSS精简。
    • 使用网络安全字体 (Arial) 以避免必须从第三方服务器下载字体。
    • 使用压缩图像
    • 没有使用动画或动作效果
    • 限制使用图标来加载较小的图标字体子集，其中包括所需的社交图标。

结果：

  • CSS 大小减少了 94%。
  • 所有阻止渲染的资产都被完全消除，Divi 的 JavaScript 大小减少了一半。
  • 没有不需要的资源请求。
  • 折叠内容上方立即显示。
  • 在 Google PageSpeed Desktop 上的得分为100% ，在 Google PageSpeed Mobile 上的得分为99%
  • 在 GTmetrix 上得分100% 。

我们可以为测试站点学到什么？

最终，Divi 赋予您选择使用方式和网站速度的权力。 测试站点表明，您可以立即获得近乎完美的页面速度分数。 但是，仅仅因为我们没有使用使 Divi 如此出色的所有强大的设计工具，并不意味着您必须害怕使用它们。 如果您不在页面上使用模块或功能，Divi 将不会不必要地处理和/或加载元素或其 CSS。 但是，如果您决定包含一个模块或功能，Divi 将小心处理和/或仅加载所需的元素和 CSS，仅此而已。 这为您提供了一个轻量级的框架来构建，当您决定释放 Divi 的力量来构建您的网站时，无需担心网络膨胀。

其他提示

我们几乎涵盖了所有有助于加快 Divi/WordPress 网站速度的主要因素。 但是还有很多事情需要考虑，可以进一步提高您的速度。

  • 拥有正确的 Divi 子主题设置
  • 更改您的 WordPress 登录 URL 以防止这些机器人使您的服务器过载。 这将是使用 Divi 创建自定义登录页面的好机会。
  • 避免对外部服务的不必要调用。 某些插件和嵌入要求您使用托管在其服务器上的文件。 这些额外的调用会减慢页面加载速度。
  • 为图像和视频加入延迟加载，以提高页面加载速度。

使用 Divi 和其他第三方性能插件

Divi 的内置性能优化将加速每个 Divi 站点，因为它们消除了任何性能插件都无法消除的膨胀。 也就是说，除了 Divi 的内置优化之外，您还可以使用其他第三方性能插件来提高网站速度。 Divi 性能改进仅适用于 Divi 而不是第三方插件，因此您的性能插件可能会在 Divi 之外的其他领域使您受益。 例如，您仍然可以从缓存网站和使用 CDN 中受益。

处理冲突的性能插件

因为Divi已经优化过了，使用第三方性能插件可能会导致冲突。 因此，保持 Divi 主题更新并事先彻底测试所有第三方插件非常重要。 我们尽力使用其他流行的优化插件来测试 Divi 的内置优化。 但是没有办法衡量一个网站的所有细微差别，说一个网站对每个人都是最好的，或者不会发生冲突。

例如，第三方插件可能会以可能导致错误/问题的方式自动缩小或移动 JavaScript 文件，因此请务必彻底测试您的网站。

如果有冲突，你可能需要禁用 Divi 的内置选项，让第三方插件来处理。 如果您遇到任何问题，请随时联系我们的支持团队寻求帮助。 我们很高兴帮助您解决问题。

最后的想法

Divi 比以往任何时候都快。 通过内置的性能升级，您的标准 Divi 安装在前端具有更快的页面加载速度，在后端具有更快的 WordPress 管理员，以及更快的 Divi Builder 来编辑和设计您的网站。 这是一个很好的开始，但要确保您的 Divi 站点尽可能快地运行，还有很多工作要做。 本文中包含的速度和性能优化肯定会提高您的网站速度。 在大多数情况下，这些优化将适用于任何 WordPress 网站/主题，而不仅仅是 Divi。 令人惊讶的是，您可以免费做多少简单的事情！

我敢肯定还有很多建议和资源没有提到，所以请随时在评论中与我们分享。

我期待着您的回音。

干杯!

精选图片来自 Sammby/shutterstock.com