如何利用页面构建器的内置优化选项

您是否了解流行的页面构建器,例如 ElementorWPBakeryDivi 配备了开箱即用的优化选项?继续阅读以了解如何最大化这些鲜为人知的设置.

如果可能,最好先优化页面构建器的主题.这为其他优化方法奠定了良好的基础,例如使用性能插件和出色的托管 WordPress 主机.

在这篇博文中,我们将研究一些简单的优化技术,可以直接从三位流行的页面构建者的管理员那里使用.

然后,我将为您提供一些全面的提示,这些提示将进一步帮助您优化 WordPress 网站的速度和性能.

如果您想跳过,这正是我们将要介绍的内容:

到最后,您将对每个页面构建器可用(和不可用)哪些优化功能以及如何实施它们有很好的了解!

开始使用 Elementor.

优化 Elementor

Elementor image.
Elementor 作为页面构建器并不陌生.

Elementor 是最受欢迎的页面构建器(超过 5+ 百万用户),它来了您可以自定义多个优化选项,以及一些常规提示.

这些包括:

让我们更详细地看看它们.

使用轻量级主题

在某些情况下,轻量级主题可使页面加载时间减少 50% 或更多.

这对于我们将要研究的所有页面构建器来说都是正确的:主题越轻越好.

Elementor 的一些不错的免费选择包括 Hello ElementorAstraOceanWP.所有内容都可以在 wp.org 上找到.

Hello Elementor theme.
Hello Elementor 是免费、轻量级主题的绝佳选择.

无论您选择什么轻量级主题,请确保它适用于您的 WordPress 网站设计并考虑到 Elementor.

优化的 DOM 输出

优化的 DOM 输出是 Elementor 通过减少 Elementor 生成的 HTML 中的包装元素数量来提高性能的一项实验.

这是从 Elementor 3.0 开始建立的,以提高速度和性能.从 DOM 中移除包装器元素会增加更简化的代码输出、更好的可读性和更低的复杂性.

目前,它仅适用于新网站,因为它处于实验模式.

在 Elementor 仪表板中,转到设置>实验>优化的 DOM 输出.然后从下拉菜单中选择活动保存更改.

Optimized DOM output area.
一旦您单击"活动",您就大功告成了!

优化的 DOM 输出是一种一键增强优化的简单方法.

优化资产加载

改进的资产加载是另一个实验性功能Elementor 正在使用它减少默认加载到页面上的 JS 代码量.一旦激活,基础设施代码部分将在需要时异步加载.

要激活此功能,请转到设置>实验>改进的资产加载.从下拉列表中选择活动保存更改.

Improved asset loading.
Elementor 仍在试验此功能,因此受制于改变.

Elementor 提到激活它可能会导致与不兼容的插件发生冲突,因此请注意您可能遇到的任何问题.如果您有任何,这可能值得停用或联系 Elementor 支持.或者,如果您是 WPMU DEV 成员,我们的 24 小时支持也可以提供帮助.

Elementor 的响应模式

响应式设计通常比仅限移动设备的 WordPress 网站加载速度更快.Elementor 中的背景图像会自动响应设备,但是,还有其他一些很棒的工具可以用来控制移动选项.

您可以调整移动平板电脑桌面的设置.最常用的调整是文字大小边距元素填充.

要开始使用,请点击您要控制的任何单个元素旁边的视口图标.执行此操作,然后选择要为其编辑设置的特定设备,包括桌面平板电脑移动.

在台式机、移动设备和平板电脑之间进行选择.

我提到 Elementor 中的背景图像是自动响应设备的,但仍然-您可以为其调整更多选项.

例如,为每个设备选择不同的图像.这可以包括不同大小的相同图像或完全不同的图像.

The edit background section of Elementor.
为每张图片选择要使用的设备.

此外,您还可以选择背景图片显示选项(例如大小、位置等).

当谈到可见性时,通过转到部分设置>高级>,根据设备显示/隐藏部分;响应式.一键搞定!

选择您希望特定部分显示在哪些设备上.

其他一些响应式选项包括更改移动设备和平板电脑断点列排序.您可以在 Elementor 的网站上这篇文章中查看有关这些功能的更多信息.

总而言之,这是一个简短的视频,向您展示了 Elementor 中响应式选项的概述.

Elementor 最近还制定了一些计划来改进核心 Web Vitals.根据他们的公告:

"该公司优化了其开发周期并制定了一个专注于特定性能领域的五轨计划,例如优化的资产加载、JavaScript/CSS 库、优化的内部 JavaScript 和 CSS、优化的后端和渲染流程,以及更精简的代码输出.

Elementor 的计划确保性能的各个方面都得到显着改进,无论是正面还是背面."

有关其他提示,我们发表了一篇文章,如何使用我们的 Smush 和 Hummingbird 插件免费优化 Elementor.请务必检查一下,以便真正将您的 Elementor 优化提升到一个新的水平.

优化WPBakery

WPBakery image.
WPBakery 在这里准备了一些优化技巧.

WPBakery 是另一个流行的 WordPress 页面构建器(4.3 + 百万用户并不算太寒酸).

如您所见,它在开箱即用的优化方面并没有提供很多.

您需要良好的托管和优化插件才能真正增强您的网站.但是,您可以执行一些操作和一些提示.

您拥有的主要选项是设置列响应选项.正如我们刚刚介绍的 Elementor,响应式 WordPress 网站往往加载速度更快,因此它是一个重要的优化元素.

WPBakery 可让您跨多个设备控制列.这一切都可以通过从任何列转到设置中的响应式选项标签来完成.

A look at the responsive options.
响应式选项标签很容易调整设置.

此区域将允许您调整默认列大小的列宽和偏移量的设置,此外还适用于其他设备和屏幕尺寸也是如此.

您会注意到宽度有很多选项.

要针对不同屏幕尺寸调整列,您可以控制宽度偏移可见性设置.此外,如果您不希望某个块显示在具有固定屏幕尺寸的移动设备上,您可以隐藏特定设备的列.

WPBakery optimization area.
相应地进行调整,使站点响应在您的控制之下.

设备区域用于为各种屏幕尺寸(例如桌面,屏幕尺寸大于 1200 像素)设置不同的列行为.

偏移量表示到页面边缘的空间量,可以为每一列设置.

当涉及到响应式 WordPress 网站时,这些小调整可以对您的 WPBakery 优化产生很大的影响.

有关响应式设置的更多信息,请观看此视频:

关于优化 WPBakery 的另一个提示是:如果您的网站速度很慢,请尝试不同的浏览器.

我知道这听起来可能很简单,但是,这可能会解决问题.通常,主浏览器的内存或扩展中可能有很多缓存元素,这些元素可能会干扰 WPBakery 的页面构建器功能.

请务必阅读我们关于借助我们的 Smush 和 Hummingbird 插件免费优化 WPBakery 的文章.我们创建了一个速度测试,并逐步向您展示如何调整您的网站以进行全面优化——将我们的 WPBakery 网站从 D 的等级提升到 A! >

优化Divi

Divi header.
Divi 并不陌生.

最后但并非最不重要的一点是,让我们来看看优化另一个人群的最爱——Divi .

除了是一个很棒的页面构建器之外,Divi 还提供了很多内置的速度性能增强功能.

我们将研究如何:

如您所见,一切都可以直接从 Divi 管理员轻松快捷地完成.

缩小和合并 Javascript 文件

缩小和合并 Javascript 文件将有助于加快您网站的页面加载速度.

缩小是从代码中删除空白和注释的过程,从而使文件更小,下载速度更快.

启用合并 JS 后,所有 JS 文件和内联脚本都合并为一个 JS 文件,从而减少了 WordPress 站点上的 HTTP 请求数.

简单地说,缩小可以帮助您的网络浏览器更快地读取文件.

要进行设置,只需转到主题>常规标签.

到达此处后,您需要向下滚动一点,但您会看到启用缩小和合并 Javascript 文件的选项.点击启用,然后点击保存.

The minify and combine javascript files area.
您也可以随时禁用它.

缩小和合并 CSS 文件

类似于缩小和合并 Javascript 文件,您可以缩小和合并 CSS 文件.它位于主题>常规标签中.这是为了帮助改善您网站的页面加载时间.

Minify and combine CSS files area.
它位于缩小和合并Javascript文件旁边选项.

请记住,使用这些缩小选项,Divi 不会缩小 HTML 输出.因此,像 Hummingbird 这样的 3rd 方插件可以帮助缩小和缓存整个页面的 HTML.

启用响应式图片

主题>常规标签中,还有一个图像选项.通过启用响应式图片选项,您将获得上传图片时生成的响应式图片大小,包括 srcset 图像元素的属性.

Where you enable responsive images.
您只需点击一下即可获得响应式图片.

启用静态 CSS 文件生成器和内联输出样式

启用静态 CSS 文件生成后,构建器的每个页面的内嵌 CSS 样式将被缓存并作为静态文件提供.通过启用此功能,您还可以提高网站的性能.

要启用此功能,请转到主题选项>构建器>静态 CSS 文件.只需点击启用保存更改,您就可以开展业务了.

您还会注意到,一旦启用此功能,内联输出样式选项也会出现.它将自动启用.

之所以有这个选项,是因为在以前版本的构建器中,模块设计选项的 CSS 样式是在页脚中内联输出的.启用后,这将恢复该行为.

Static CSS file generation and out styles inline.
除非静态 CSS 文件,否则您不会看到内联输出样式生成已启用.

如果您与 3rd 方插件有任何冲突,请尝试禁用其中一些选项.如果您没有使用任何其他优化插件,那么启用这些插件来增强您的 Divi 网站应该会处于良好状态.

检查 PHP 的推荐服务器设置

Divi 有一份您可以随时访问的报告,其中包括 PHP 的推荐服务器设置.PHP 必须保持最新状态,以确保您的网站通过减少内存和 CPU 相关问题来优化性能.

要从 Divi 管理员访问报告,请点击支持中心.在顶部,您会看到一个区域,上面写着系统状态.

从这里,您可以点击显示完整报告选项来查看完整报告.

The system status area.
您也可以在此处复制完整报告.

点击后,您将获得一份完整的报告,涵盖从显示错误到内存限制最大输入时间等所有内容.

然而,出于优化的目的,我们将专注于 PHP.您可以看到有一个 PHP 版本区域,显示您正在运行的版本以及它是否符合他们的建议.

The PHP version.
如果您的 PHP 版本有任何问题,它会在这份报告中让你知道.

您可以在本文中阅读有关保持 PHP 最新的更多信息.

随着 Divi 的人气飙升,我们还有另一篇文章介绍了在我们的插件的帮助下对 Divi 网站的完整优化,Smush蜂鸟 您可以在此处查看.

全面优化

无论您使用哪种页面构建器,在您的网站优化方面,都有一些基本框需要勾选.这在所有 WordPress 网站中都非常一致.

因此,在开始优化页面构建器之前,这里简要介绍了几种优化 WordPress 网站的方法.

优秀主机:托管 WordPress 托管(就像我们拥有的)通过提供明确构建的服务器,提供了一种更加以 WordPress 为中心的方法使用 WordPress,帮助优化您的网站.

删除不必要的插件:插件会增加请求,也可能导致问题,例如安全漏洞.删除所有不活动或过时的插件.

确保主题和插件是最新的:就像删除不必要的插件一样,确保您的主题和插件都是最新的,否则它们可能会成为安全风险并使您的网站陷入困境. >

在页脚中加载脚本:这不会减少请求或文件大小;但是,它会先加载某些必要的内容.我们的Hummingbird 插件 可以在资产优化区域处理此问题.

图像优化:图像优化对于速度至关重要,我们的免费 Smush 插件可以批量或单独处理图像优化.

启用缓存:缓存可能是最好的使用方法,因为它可以带来最显着的改进.简而言之,它会在给定时间内保存网站的 HTML 副本,下次加载您的网站时,它将从内存中加载 HTML,而不是让服务器处理它.像 Hummingbird 这样的优秀缓存插件可以提供帮助.

CDN:内容交付网络将请求的资源放置在离您更近的位置,以便更快地交付内容.改进优化和速度非常棒.

这只是一个候选名单.在优化方面还有很多.请务必阅读我们的文章,加速 WordPress 的终极指南.

构建完整优化

如您所见,可以做很多事情来优化内置于其平台中的页面构建器;无论是 Elementor、WPBakery 还是 Divi.

首先了解如何优化您的主题是一个很好的经验法则.优化主题后,您就可以开始考虑其他提高网站性能的方法并进行相应调整.

无论您为 WordPress 网站使用什么页面构建器,构建良好的优化都是从头开始的.

1

发表回复