Elementor 性能提示:缩小 DOM 大小,让网站更快

具有大量 DOM 输出的网站会增加 HTML 的大小,这可能会损害网站的性能。但是,有一些技术可以减少网站的 DOM 大小。本篇文章将探讨如何通过使用各种策略来最小化 HTML 大小,从而增强 Elementor 网站。

Elementor 性能提示:缩小 DOM 大小,让网站更快

理解“DOM 大小过大”问题

DOM (文档对象模型)表示网页的结构。DOM 大小过大通常表示 DOM 结构复杂,通常是由于使用了过多的 HTML 元素、嵌套节点或动态内容注入造成的。包含大量 HTML 元素的页面往往加载缓慢,并且会影响动画和其他用户交互。

DOM 大小对页面性能的影响

较大的 DOM 大小会增加渲染时间,导致页面渲染延迟和加载时间变慢。这是因为浏览器必须解析和渲染每个节点。此外,每个 DOM 节点都需要浏览器内存,这可能会导致系统资源耗尽和内存消耗增加。这可能会导致性能下降,尤其是在低端设备上。

此外,DOM 过大还会导致用户交互迟缓,网站使用过程中响应速度降低。大量的 DOM 元素通常包含许多事件监听器,这会增加开销并减慢用户交互速度。我们不会提及所有原因,但经验法则是 HTML 越大,页面越慢。

Elementor 性能提示:缩小 DOM 大小,让网站更快

如何使用外部工具测量 DOM 大小?

要衡量 DOM 大小对网站性能的影响,可以使用以下工具:

Google Chrome DevTools: 转到“元素”面板检查 DOM 元素及其嵌套深度。使用“性能”选项卡评估渲染性能并发现由 DOM 操作导致的潜在瓶颈。

Lighthouse:Lighthouse 审核提供了对 DOM 大小指标的见解,例如“DOM 大小”、“DOM 深度”和“最大 DOM 深度”,指出了需要改进的领域。

WebPageTest :评估瀑布图和性能结果中的 DOM 大小指标,以了解 DOM 复杂性和页面加载时间之间的关系。

什么才算是较大的 DOM 尺寸?

Lighthouse使用 DOM 树标记页面,如下所示:

  • <body>当元素超过818 个节点时发出警告。
  • <body>元素有超过1,400 个节点时会出现错误。

但是,这些指标将来可能会发生变化。此外,不同的工具可能会设置不同的阈值来警告 DOM 大小过大。

Elementor 性能提示:缩小 DOM 大小,让网站更快

减少 Elementor DOM 大小

Elementor 是一款可视化的拖放式网站构建器,可简化向页面添加元素的过程。使用 Elementor 通常不会对网站的性能产生负面影响。但是,可以采取一些步骤来进一步优化构建的页面。这包括减少可以最小化 DOM 的 HTML 元素数量,而不会影响设计。

为了有效优化,了解 Elementor 布局元素的结构很有用。我们将重点介绍布局元素,因为典型的页面包含数十个这样的元素,因此优化它们会产生更大的影响。

有三种推荐的技术可以优化您的布局元素:

  1. 从部分/列迁移到容器。
  2. 使用单个嵌套容器压平容器。
  3. 尽可能实现全宽而不是盒宽的嵌套容器。

让我们了解有关减少 Elementor DOM 大小的更多信息。

Elementor 性能提示:缩小 DOM 大小,让网站更快

Elementor 元素类型

Elementor 有两种类型的元素:

  • 小部件:用来构建网站的所有常规元素,如标题、图像、图标、按钮、分隔线等。
  • 布局元素:结构元素,例如部分/列和容器。这些元素包装小部件并将它们分组在一起。

重点关注布局元素,以了解如何减少 DOM 大小。

布局元素的 HTML 结构

在 Elementor 中,每个结构元素由两个<div>标签组成:一个 outer<div>和一个 inner <div>。这一点很重要,因为我们将了解如何减少结构布局元素中的 HTML 元素数量。

部分/列的 HTML 结构:

当使用部分和列时,最终的 HTML 由两个布局级别组成,每个级别有两个<div>元素,两个用于部分,两个用于列。总共,我们用四个<div>元素包装小部件:

<div class="elementor-section">
	<div class="elementor-container" >

		<div class="elementor-column">
			<div class="elementor-widget-wrap">

				<!-- widget –>
				<!-- widget –>
				<!-- widget –>

			</div>
		</div>

	</div>
</div>

容器的 HTML 结构:

Elementor 引入了容器作为构建具有更精简结构和 DOM 的页面的一种方式。

切换到容器时,生成的 HTML 仅包含两个<div>元素,而不是四个,这意味着可以使用一半的元素获得相同的设计<div>

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

使用容器扁平化 HTML 结构

过去,网站结构通常采用部分或列。如今,现代网站使用 CSS flex 和 CSS grid 来实现相同的视觉结构,同时减少代码量。为此,Elementor 引入了容器。通过将结构元素转换为容器,可以简化 HTML 结构并消除不必要的冗余。

虽然部分是堆叠在一起的,但列是并排放置的。另一方面,容器可以将内部元素堆叠成一行或一列。可以利用这些差异来优化一些结构。

如果某个部分有多列,转换后的结构将具有单个列方向容器和多个行方向容器。但是,如果某个部分只包含一列,可以在转换为容器时优化此结构。可以消除一个容器级别而不影响设计。DOM 大小减少 50%,从四个<div>元素减少到只有两个。现在将此乘以每个页面的布局元素数量,以计算对您网站的影响。

值得注意的是,可以真正减少嵌套内部部分的部分/列元素的 DOM 大小。在这些情况下,元素<div>在显示小部件之前会使用八级元素。转换为容器可以将其从八级元素减少<div>到四级,在某些情况下可以减少到只有两级元素<div>

如果仍在使用部分/列布局结构,那么是时候迁移到容器了。这样做的好处大于在迁移过程中投入的工作。为了简化迁移,Elementor 甚至为此提供了一个方便的“转换”按钮。

Elementor 性能提示:缩小 DOM 大小,让网站更快

盒装与全宽

优化 DOM 大小的另一种方法是区分盒装容器和全宽容器。

盒装容器具有最大宽度,因此需要在 Elementor 中使用内部元素<div>。另一方面,向两侧拉伸的全宽容器因此只需要一个<div>元素。

盒装结构:

<div class="e-con">
	<div class="e-con-inner">

		<!-- widget –>
		<!-- widget –>
		<!-- widget –>

	</div>
</div>

全宽结构:

<div class="e-con">

	<!-- widget –>
	<!-- widget –>
	<!-- widget –>

</div>

优化嵌套容器结构

现在了解了盒装容器和全宽容器的不同 HTML 结构,可以开始优化我们网站的 DOM 输出,尤其是嵌套其他容器的容器。

下一个优化技巧如下:如果有一个使用盒装宽度的父容器,则可以使所有嵌套容器都具有全宽。这样,你可以获得相同的设计,但 HTML 更少。

<div class="e-con e-con-parent">
	<div class="e-con-inner">

		<div class="e-con e-con-child">
			…
		</div>

		<div class="e-con e-con-child">
			…
		</div>

	</div>
</div>

上面的 HTML 结构有一个带框的父容器。如果两个子容器也带框,则每个容器将由两层<div>元素组成。但如果它们是全宽的,则只会<div>使用一个。

再次强调,只有当父容器被装箱时,此优化才有效。

结论

如你所见,有三种简单的策略可以优化布局元素的 DOM 大小:用容器替换部分/列布局元素;带有单个嵌套容器的容器可以展平;如果使用嵌套容器并且父容器是盒装的,要将所有内部容器设置为全宽。这些策略可以帮助<div>从网站的 HTML 中消除大量不必要的元素,并提高网页的整体性能。


联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/10799/

(2)
上一篇 2024年 5月 30日 上午11:26
下一篇 2024年 5月 31日 上午9:50

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信
购买我们的托管服务器,享受免费运维!