在 WordPress 上优化 Divi 的终极指南(2021 版)

Blair Jersyer WordPress Tutorials Apr 23, 2022

Divi无疑是当今最受欢迎的 WordPress 主题之一。 它带有一个强大的页面构建器,您可以使用它为任何类型的网站(字面意思)创建几乎任何类型的设计。 这种巨大的优势也有不利的一面。 由于 Divi 有很多功能,因此这些功能很重要。 对于那些不想承认这一点的人来说,考虑优化 Divi 很重要,特别是如果您想为访问者提供最佳体验。

虽然 Divi 确实收到了频繁的表演,但是,这些并不总是足够的,对于那些拥有不仅仅是一个简单的“ Hello World ”博客的人来说更是如此。

在本教程中,我们将探索我们可以做些什么来使 divi 加载更快(虽然它已经是一个快速的 WordPress 主题,考虑到可用的功能)。 以下是 we’ 将涵盖的一些关键主题:

为什么你必须有一个快速的网站?

这不再是任何人的秘密。 快速网站比慢速网站转换得更好。 您的网站速度和跳出率之间存在巨大的相关性。 更准确地说,这就是为什么现在必须这样做:

创建令人惊叹的网站

使用最好的免费页面构建器 Elementor

现在开始
  • 降低跳出率 – 您需要留住访问者? 让您的网站快速运行。
  • 提高转化率 – 如果您希望访问者看到您的商店或表单,您的网站需要在他们离开之前快速加载。
  • SEO – Google 可能会给您排名更高(可能是因为并非总是如此)。
  • 信誉 – 缓慢的网站会给访问者留下不好的第一印象。

网站加载速度应该多快?

根据各种研究,网站应在3 秒或更短的时间内加载。 通常,一个好的目标是让您的网页在 3 秒或更短的时间内加载完毕。 尽管现在大多数客户似乎都希望它是 2 秒或更短。 但显然,每个网站和网页都是不同的。

使 Divi 加载更快的提示和技巧

现在,我们将探索您可以立即在 Divi 网站上应用的所有提示和技巧,并查看性能的重大变化。 其中一些技术也适用于任何其他 WordPress 主题,因此您可能已经熟悉这些主题。

让我们开始吧。

如何优化数据库

WordPress 是与 MySQL 数据库交互以存储和检索数据(帖子、页面、元数据等)的动态 CMS。 这种工作方式使您的网站管理更容易,但缺点是页面加载需要更长的时间,因为它必须在加载页面之前在数据库中定位数据。 对于静态 HTML 网站,无需搜索动态内容,因为它不会动态变化。 这就是为什么静态 HTML 网站会比 WordPress 网站更快的原因。

尽可能快地保持 Divi 网站(或任何 WordPress 网站)的一种方法是确保优化您的数据库。 WordPress 站点文件在您的数据库中按表组织,每次您向站点添加新数据(如主题和插件)时,都会创建新表和新数据。 正如您所料,您的数据库越臃肿,就越难找到数据。 这会导致网站速度变慢。

现在,如果您写博客多年,您可能已经尝试了很多主题和插件。 这最终导致您的数据库保留它不需要的数据。 即使您卸载插件,也并不意味着该插件创建的所有数据也会被擦除。 一些插件会保留一些数据,以防您重新安装插件,或者开发人员可能忘记添加适当的卸载措施。 显然,这对您的数据库来说既不好也不公平。 剩余的数据可能会导致不必要的混乱并减慢您的网站速度。

就像每个人都需要组织更有效地工作一样,每个 WordPress 网站(无论是否为 Divi)都需要一个干净的数据库来更快地加载页面。 这就是为什么如果您现在暂时拥有自己的网站,那么您绝对应该考虑优化您的数据库。

有很多插件可以帮助解决这个问题,但您绝对可以尝试WP Optimize ,这似乎是一个可靠的选择。 但还有其他技巧需要考虑

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

如何优化 DNS

当您的网站即将被访问时,首先发生的事情之一就是 DNS 查找。 一旦输入(或单击) URL,visitor’s ISP 就会向名称服务器发送 DNS 查询,以查找与您的域关联的 IP 地址(每个域/网站都有一个特定的 IP 地址)。 更清楚地说,DNS 查找就像在电话簿中查找您的域名以查找该域的 IP 地址。

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

一般来说,像 Godaddy 和 Namecheap 这样的大多数免费 DNS 提供商通常会比其他提供商慢。

可以提高 DNS 查找速度的最佳免费选项可能是Cloudflare 他们拥有DNSPerf.com上记录的最快的 DNS 性能。 它们比 GoDaddy 和 Namecheap 快得多。 而且,如果您愿意,您甚至可以优化 Cloudflare 以在没有其他服务(如 CDN 或 WAF)的情况下用于 DNS。

例如,您可能希望将 Cloudflare 用于 DNS 和安全性(DDOS 检测),并将 KeyCDN(或 MaxCDN)用于您的 CDN。 这也是一个很好的组合。

设置 Cloudflare

Cloudflare 易于设置。 您不必担心事先切换您的主机或任何东西。 您需要做的就是完成从进入您的域开始的 5 分钟设置。

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

完成设置需要做的一件事是将当前 DNS 提供商(如 GoDaddy)上的默认名称服务器更改为 Cloudflare’s 名称服务器。

从现在开始,您将能够从他们的仪表板轻松管理您的 DNS。

就这样,您可以提高 DNS 查找速度、提高安全性以及为您的网站免费提供 CDN。

如何选择一个好的主机

事先,在您的网站优化过程中首先要考虑的事情之一就是选择一个适合您的 WordPress 网站的主机。 几个月前,Elegantheme 发布了与流行的托管服务提供商合作的优惠,该服务与 WordPress 配合得很好。 这些提供商因为 Divi 提供更好的服务而受到认可,并且与优雅主题仪表板的集成是无缝的。 您只需从这些提供商中选择您将为您的网站选择的提供商。

现在没有什么可以强迫您使用这些提供程序,因为它们还有许多其他可用的解决方案也适用于 WordPress 和 Divi。 然后让我们通过考虑可用的托管类型来分解它。

托管类型

共享主机

这是迄今为止 WordPress/Divi 用户最流行的托管类型。 但不幸的是,这是拥有快速网站的最糟糕的选择。 通过共享主机,您将与他人共享服务器的所有可用资源。 因为您是共享的,所以这种托管的成本通常非常低。 但是,缺点是您无法控制其他网站获得的流量,以及他们的网站如何潜在地影响服务器的性能,进而影响您的网站性能。 因此,您很容易陷入加载时间极慢的时期,甚至是您的网站完全关闭的时期。 因此,您最好对共享主机可以处理的流量有一个很好的了解

VPS 主机

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

但是,除非您拥有托管 VPS,否则这种托管主要适用于那些精通技术以自行处理事情的 DIY 类型。

云主机

通过云托管,您可以访问服务器网络(在云中),而不是单个物理服务器。 这使您可以根据需要从该服务器网络中提取所需的所有资源。 更简单地说,您拥有一个由整个服务器网络的能力和资源支持的服务器空间虚拟分区。 因此,无需像共享主机那样担心流量高峰。 云托管非常灵活且可扩展,可满足您的需求。

云托管和 VPS 托管之间的一个主要区别是,VPS 托管有一个专用的(有时是有限的)资源可以从中提取,这些资源可能会也可能不会耗尽。 另一方面,云托管能够使您的资源保持可用而不会耗尽,因为它始终可以从云中的其他服务器中提取。 从理论上讲,云托管提供更一致和可靠的高速。 因此,如果您对速度很认真,那么云托管是一个不错的选择(甚至可能是最好的选择)。

专用主机

使用专用托管,您可以拥有自己的专用服务器。 无需与其他任何人共享任何资源。 这意味着您的网站将拥有更可预测和一致的快速加载时间。 这通常作为大公司的顶级选项以高溢价提供(显然)。 如果你能负担得起它继承的成本,你会考虑使用它。

托管 WordPress 托管

托管 WordPress 主机通常是指由 WordPress 专家管理的共享主机。 在这里,它不像 VPS 那样私密,也不像专用服务器那样强大。 但它确实有助于通过让 WordPress 专家完成工作来最大限度地提高共享环境的速度。 他们做得很好,因为他们为 WordPress 网站量身定制服务并严格配置服务器。 其中很多都带有许多很酷且方便的内置功能,例如一键登台环境、站点缓存、一键 CDN 部署、自动备份、SSL’s 等等。 它们非常适合那些不想自己手动处理这些事情的人。

要考虑的其他托管服务提供商

那里有许多 WordPress 托管公司。 如果可能的话,如果您认真考虑速度优化,您将希望避免使用传统的共享主机(非托管)。 但是,如果您有一个简单的站点,并且愿意为托管支付额外的费用,Siteground 似乎是共享托管的最佳选择之一。

现在,这里是一个快速的 Divi 网站需要考虑的主机列表。

  • Kinsta – 专门从事托管 WP 托管
  • SiteGround – 提供共享主机。
  • Cloudways – 专注于基于 SSD 的托管云托管
  • Flywheel – 专门从事托管 WP 托管

这并不是所有可能的提供者,但绝对有这些,你将拥有一个快速的 WordPress 网站。

如何优化第一个字节的时间

第一个字节的时间 (TTFB) 是用户从您的服务器接收网站数据的第一个字节所花费的时间。 这意味着,当用户尝试访问您的网站时,TTFB 本质上将是浏览器接收任何数据之前的等待期。

TTFB 通常在 200ms 左右。 但是对于托管不佳且没有优化的网站,TTFB 很容易达到 2 秒或更长。

Divi 网站上的 TTFB 延迟通常是由以下原因引起的:

  • 需要接收的动态内容的数量。 这可以通过缓存、数据库优化和 CDN 来减少。
  • 您的服务器当时正在经历的流量 共享主机提供商的 TTFB 不能太低,因为您正在与同一服务器上的其他人共享资源。 他们的流量高峰会降低您的 server’s 处理速度。
  • 您的网络服务器配置 一个好的 WordPress 托管服务提供商可以通过提供可靠的后端基础设施和优化您的 Web 服务器配置(这几乎是您无法控制的事情)来帮助您的 site’s TTFB。

简而言之,如果您想快速提升 TTFB,请获得更好的托管服务并按照以下步骤操作。

如何缓存您的 WordPress 网站

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

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

Divi 确实执行缓存以在幕后提供 Divi’s 静态 JS 和 CSS 文件。 但这主要是为 Divi 主题文件提供更好的 Divi Builder 功能。

您仍然需要使用缓存来优化整个 WordPress 网站。 大多数网站都有多个插件,它们带有自己的 CSS 文件,可能需要合并、缩小和缓存。 因此,您可以利用第三方插件来提供所有页面的缓存静态 HTML 版本。

流行的缓存插件包括:

如何执行缩小

缩小使您的站点文件更小。 缩小站点文件(CSS、JavaScript、HTML)会删除所有不必要的东西(如空格和分页符),从而缩小文件大小。 这将减少浏览器下载该资产的时间。

聚合意味着组合站点文件以减少页面上的总请求并加快访问者的加载时间。 但是,这也意味着为您的用户提供更大的文件,例如,您应该确保提供 1MB 的 CSS 文件,并考虑分成小块。

如前所述,Divi 会缩小和合并 Divi 主题默认使用的 Javascript 和 CSS 文件。 因此,从技术上讲,您不必担心使用第三方插件来进一步缩小和组合 Divi’s Javascript 和 CSS 文件。 但是,Divi 不会缩小 HTML 输出。 因此,您可以从第三方插件中受益,以缩小(和缓存)页面的整个 HTML。

此外,几乎每个 Divi 站点都将依赖于 Divi 主题之外的文件(如插件或由子主题添加的其他文件),这些文件将受益于缩小和组合 CSS 和 JS 文件。 这可以通过插件轻松处理。

一些可以缩小站点文件的合适插件包括:

这些插件之一应该与 Divi 一起使用。 但是没有办法衡量一个网站的所有细微差别来说出最适合每个人的网站。 有时,第三方插件会以可能导致错误/问题的方式自动缩小 JavaScript 文件,因此您应该确保在整个网站上执行深度测试以确保没有任何损坏。 如果缩小 CSS 可能是安全的,那么 JavaScript 并非总是如此。

有时,您会面临缩小解决方案之间的冲突。 然后,您应该确保只让一个人处理。 此外,安装更多的插件进行缩小会带来更多的问题而不是解决方案,一次只使用一个解决方案。

如何启用 Gzip 压缩

Gzip 压缩有时比缩小更有效,因为它可以将页面大小减少多达 70%。

在您的 Divi 站点上启用 Gzip 压缩可以大大提高速度。 如果您熟悉在计算机上创建压缩(或压缩)文件,那么您已经对 Gzip 压缩的工作原理有了基本的了解。 这个想法是,当一组文件被压缩成一个文件时,它可以更容易地下载和上传! Gzip 压缩为您的网站做同样的事情。 它告诉服务器将它可以压缩的所有文件压缩成更小的版本,以便它们可以更快地提供给客户端。 这确实可以提高页面加载速度。

这是即使在全新安装主题时也可以提高 Divi 速度的领域之一。 由于 Divi 已经压缩了核心主题文件,Gzip 压缩将使这些文件变得更小。 Gzip 压缩将使您的文件比以往任何时候都小得多。

以下是一些支持 Gzip 压缩的插件:

一些托管服务提供商会自动启用 gzip 压缩,因为它对网站性能来说是一件轻而易举的事。 随意检查您的站点是否启用了 Gzip 压缩

您可以使用哪个 CDN

内容交付网络 (CDN) 将网站速度提升到另一个层次。 顾名思义,CDN 是一种旨在更快地向用户交付内容的网络。 该网络由世界各地的服务器组成,这些服务器存储您网站的缓存静态文件(图像、视频、CSS、js 等)。 然后,当一个人访问您的网站时,离该人最近的服务器(或 PoP)将提供内容,而不是在远离用户的情况下到达您的服务器。 如果没有 CDN,您的网站文件可以从一个服务器位置(无论您的主机存储这些文件的位置)访问,因此您离该服务器越远,将该网站内容传送到您的浏览器的速度就越慢。

由于您希望网站尽快出现在您的浏览器中,因此 CDN 将使您的网站文件准备好从离您所在位置最近的服务器传送。 因此,如果您的站点文件存储在旧金山的服务器上,而伦敦的某个人打开了您的站点,则可能需要 1 或 2 秒才能从数千英里外的服务器接收该数据。 但是使用 CDN,您可以在一半的时间内从伦敦的服务器交付相同的数据。 那’s有很大的不同!

因此,即使您在家中看不到全部结果,您也在加快将您的网站交付到世界各地的速度。

有很多方法可以为您的网站获取 CDN。 许多托管公司将包含一个选项,用于在其服务中部署 CDN。 CloudflareMaxCDN等网络平台提供 CDN 功能以及其他性能和安全功能。

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

一些用于缓存的插件已经包含一个自动集成多个 CDN 提供商的选项,这非常方便。

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

如何优化图像

图像优化是加载页面速度慢的最大罪魁祸首之一。 这样做的原因可能是很多人忽略了大图像对网站速度的危害。 毕竟,一张背景图片能对网页造成多大的伤害? 好吧,你可能会感到惊讶。 只是一些没有针对网络进行优化的大图像可能会对页面加载速度产生灾难性的影响。

每个网站都应该这样做。 单独的图像压缩可以使您的站点明显更快,并且较小的图像尺寸将节省存储空间和带宽。 但是,您还应该考虑其他重要的图像优化。

简而言之,以下是优化图像时需要考虑的事项:

使用正确的文件类型

当您考虑使用网络图像时,您确实应该坚持使用以下图像文件类型:

  • JPG – 这种格式应该用于彩色图像。 通常,这是摄影的完美搭配。 如果然后提供比 PNG 更好的压缩,除非您想使用具有透明背景的图像。
  • PNG – 对需要透明背景的图像使用 PNG。 此格式也可用于可能具有较少颜色的图像。 它是信息图表图像和徽标的一种很好的格式。
  • SVG – 这是一种矢量格式,使用 HTML 代码提供极其清晰的细节。 SVG 非常适合制作徽标、图标和其他矢量动画。

调整大小并裁剪图像

您的图像应该相当大。 如果您的网站将正文宽度设置为最大 800 像素,则无需使用 1200 像素的大图像。 结果可能在前端看起来很相似,但是大尺寸会浪费您的页面加载时间。

使用 Divi 将图像上传到您的页面时,了解这些图像在 Divi’s 列结构中需要多大是很有帮助的。

压缩图像

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

优化您的互联网图像

互联网的图像优化可以通过像 Photoshop 这样的照片编辑器来完成,其中包括 “Save for Web” 选项。 此外,您可以使用TinyPNG.com或 Compressor.io 等免费的第三方网站来压缩图像,然后再将其上传到您的网站。

显然,WordPress 通过其插件提供了一种优化图像的方法。 一些插件(如 Imagify)会压缩您网站上已经使用的图像,并在您将图像上传到 WordPress 媒体库时自动压缩它们。

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

网站:

插件:

Divi’s 内置 SRCSET 支持

Divi 也内置了具有本机 SRCSET 支持的响应式图像 使用此功能,您将根据设备尺寸(无论是手机、平板电脑还是台式机)使用您的图像。

如何优化您的视频

视频优化比图像优化要难一些,但绝对不那么重要。 视频可能很大,因此会显着影响页面速度。 如果您在服务器上托管大量视频,您可能很快就会发现您有另一个磁盘空间问题以及带宽使用量的增加。 这就是为什么经常建议使用第三方服务(如YouTubeVimeo )为您托管视频的原因。 或者,您可以考虑将视频媒体内容卸载到Amazon S3等存储平台上。 这将允许您从 Divi’s 视频模块中链接到这些视频,而不必降低您的服务器速度。

您可以使用Handbrake等免费工具轻松减少视频文件,该工具易于使用。

如何在 Divi 上进行速度测试

您可能已经对网站的速度进行了测试,结果可能会将您带到本文。 这实际上是优化开始时的一个重要步骤,了解当前分数是多少,在优化结束时,比较与新分数的差异。 进行速度测试是您可以做的最简单的事情之一。 有很多网站可以免费为您做这件事。 他们提供的指标对于确定进一步优化网站以获得更好性能的方法非常宝贵。

这里有几个很好的起点:

结果为您的网页在各个领域的表现提供了有用的细分。 然后,您可以将他们的建议用作清单,以便在优化您的网站时完成工作。

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

  • 完全加载时间/加载时间
  • 总页面大小(例如缩小、图像优化等)
  • 要求
  • PageSpeed/YSlow 分数
  • 提供缩放图像
  • 优化图像
  • 利用浏览器缓存
  • 缩小 CSS/HTML
  • 启用 gzip 压缩
  • 减少 HTTP 请求
  • 添加过期标头

你的目标是体面的速度不是不可能的速度

测试您的网站并将其优化至完美很容易陷入困境。 但是没有一个网站是完美的。 您甚至可能会发现提高某些速度测试性能等级实际上可能会减慢您的页面加载时间。 That’s 因为即使是那些速度测试也不是完美的。

如何避免 Divi 与其他优化插件之间可能发生的冲突

每当您部署用于缩小和缓存的第三方插件时,您可能会遇到某些冲突。 例如,您可能会发现 Divi 模块无法正确显示或某些 JavaScript 文件无法正确呈现。

为了避免这些类型的冲突,您可以禁用 Divi’ 的内置优化功能,让第三方插件为您处理。 您要禁用的三个选项是:

  • 静态 CSS 文件生成
  • 缩小和合并 Javascript 文件
  • 缩小和合并 CSS 文件

您可以通过转到主题选项 > 常规选项卡来禁用缩小和合并 Javascript 和 CSS 文件的选项。

您可以在 Theme Options > Builder > Advanced 下禁用静态 CSS 文件生成选项。

其他提示和技巧

We’ve 几乎涵盖了有助于加快 Divi/WordPress 网站的所有主要因素。 但是,您仍然可以做一些重要的事情。

  • 使用最新 PHP 版本的最新主机
  • 更改您的 WordPress 登录 URL 以防止这些机器人超载您的服务器
  • 避免对外部服务的不必要调用。 某些插件和嵌入要求您使用托管在其服务器上的文件。 这些额外的调用会减慢页面加载速度。
  • 结合图像和视频的延迟加载,以提高页面加载速度。

最后的想法

随着最近对Divi的优化,它比以前更快。 通过内置的性能升级,您的标准 Divi 安装在前端具有更快的页面加载速度,在后端具有更快的 WordPress 管理员,以及更快的 Divi Builder 来编辑和设计您的网站。 这是一个很好的开始,但要确保您的 Divi 网站尽可能快地运行,还有很多工作要做。

本指南中包含的速度和性能优化肯定会提高您的网站速度。 在大多数情况下,这些优化将适用于任何 WordPress 网站/主题,而不仅仅是 Divi。 令人惊讶的是,您可以免费做很多简单的事情!

Divi WordPress Theme