说到 WordPress 的主题,Divi 无需介绍.它只是最受欢迎的 WordPress 主题,由全球领先的 WordPress 主题商店之一创建,Elegant Themes .
考虑到它的受欢迎程度,值得展示如何尽可能地增强 Divi 的优化——这可以通过我们的 Smush 和 Hummingbird 插件完成(免费!).
Divi 拥有超过 203 个 WordPress 布局包和(目前)1495 个与主题相关的布局.这使得可以优化以实现最佳性能的照片、文本和功能几乎无穷无尽.
我们将看看我们的优化组合 Smush 和 Hummingbird 可以做些什么来通过流行的布局增强您的 Divi 网站.
在优化方面,Smush 是我们的 5 星级具有超过 1+ 百万活跃安装的图像优化插件.她能够优化图像、延迟加载、调整大小、压缩和批量模糊所有图像以提高速度.
Smush 已准备好帮助 Divi 优化!
我们的其他优化插件 Hummingbird 具有稳定的 4.5-星级评分和超过 100K 的活跃安装.她负责通过对文件压缩进行微调控制来增加提升 Google PageSpeed Insights 的方法,从而使您的网站运行得更快.
此外,她还可以缩小 CSS 和JS、延迟加载注释、缓存等.
蜂鸟将帮助您的 Divi 网站飞起来!
值得再次强调的是,Smush 和 Hummingbird 都免费使用!
(剧透警告!)您会看到我们如何将我们的 Divi 网站从桌面 GTmetrix 等级"C"提升到"A"!并且桌面版 Google PageSpeed Insight 得分提高了 31.9%,移动版提高了 126%!
此外,本文将介绍一些基本技巧,让您的 Divi 网站保持最佳状态以获得最佳速度和性能.我们将探索:
要继续,您需要 Divi(您可以无风险地尝试此处 30 天)、Smush 和 蜂鸟.安装并激活这些后,您就可以开始使用了.
在本文结束时,您将了解如何实施您可以使用的所有工具,以使您的 Divi 网站以最佳性能运行!
Divi 概述和测试布局
不详细介绍(因为您可能熟悉它),Divi 非常棒.它是一个网站建设平台,用令人惊叹的可视化编辑器取代了标准的 WordPress 帖子编辑器,将您典型的 WordPress 主题提升了一个档次.
如果您还没有开始使用 Divi,并且想开始使用,请务必阅读我们关于开始使用 Divi 所需了解的一切.
就价格而言,Divi 绝对不会出错.它旨在为程序员和新手提供轻松和高效的体验.考虑到超过 200 万个网站是用这个主题构建的,它享有良好的声誉.
话虽如此,如果我们涵盖了 Divi 附带的每个预制布局,这将是一篇相当长的文章.因此,正如我之前提到的,我们将缩小范围并向您展示如何使用他们的 代理布局包.
Agency 布局很好地结合了文字和照片.另外,它是出现在 Divi 搜索中的顶级布局包之一.
您很可能会使用不同的布局(或不会);然而,本文中的演示适用于任何布局——只是可能需要额外或更少的调整.
那么,让我们设置 Divi 并开始行动吧!
安装并激活 Divi 后,从 WordPress 仪表板创建一个新页面以访问 Agency 布局.然后,您将选择从预制布局中进行选择.
您会看到有大量选项可供选择.目前,Agency 是他们列表中的顶级布局之一.如果没有,请使用他们的搜索栏来定位.
现在我已经安装了 Agency,我准备测试 Divi、Hummingbird 和 Smush.当然,这种疯狂是有方法的.所以,这是……
优化测试设置
对于本文,我们将从头开始.我正在设置 Divi 的网站没有安装插件(除了 WPMU DEV 仪表板插件)、主题或超出 Agency 的页面.接近于绝对干净的石板.
它类似于我们关于使用 Elementor 和 WPBakery 进行优化的文章的配置.
至于本次测试使用的方法,它包括:
- 使用托管在我们的基本 WPMU DEV 托管 WordPress 托管计划(铜牌)上的网站
- WordPress 5.7 版
- PHP 8.0 版
- 页面缓存、Fast CGI(静态服务器缓存)和 CDN 被禁用
- GTmetrix 默认服务器位置(加拿大温哥华,使用 Chrome(桌面)浏览器
此外,我将把 Agency 设为我的主页.要从 WordPress 管理员执行此操作,请转到 外观 >自定义 >主页设置并选择此着陆页.
最后,对于我将如何执行此测试,它是一个 10 步过程,如下所示:
- 使用 Divi 和 Agency 布局设置 WordPress 网站
- 使用 Google PageSpeed Insights 和 运行速度测试href="https://gtmetrix.com/" rel="noopener" target="_blank">GTmetrix
- Divi 优化
- 再运行一次速度测试
- 激活 Smush 并设置推荐
- 再运行一次速度测试
- 激活蜂鸟并设置推荐
- 再运行一次速度测试
- 激活托管功能(例如 FastCGI)
- 运行最终速度测试
每个网站都会有所不同.变量包括位置、图像数量、您的主机和其他可能产生影响的因素.但是,这会让您很好地了解如何调整自己的 Divi WordPress 网站以进行优化.
未优化的速度测试
WordPress 网站被清理干净了? 检查.安装并激活了 Divi 的代理布局? 检查.所有其他变量(例如禁用的页面缓存)也已就位.我们已准备好进行速度测试,看看我们在看什么!
我们将在 Google PageSpeed Insights 上运行我们的第一个速度.输入网址时,以下是我们的桌面版 Google PageSpeed Insights 分数:
和移动设备:
让我们来看看 GTMetrix 上发生了什么:
整体上还有改进的余地.现在我们知道了我们的基线分数,让我们继续优化 Divi.
Divi 优化
如果您的主题提供内置优化功能,我们建议从它开始,因为这通常会对您网站的整体性能产生重大影响.Divi 允许您直接从仪表板优化主题布局.
在继续使用我们的 Smush 和 Hummingbird 插件之前,有几个方面需要检查并确保得到优化.
我将确保启用的一些调整包括一般优化和显示.
在 Divi 仪表板的常规区域中,您可以进行多项调整.您可以看到我已启用:
- 在定义时使用摘录
- 响应式短代码
- 响应式图片
- 缩小和合并 Javascript 文件
- 缩小和合并 CSS 文件