具有大量 DOM 输出的网站会增加 HTML 的大小,这可能会损害网站的性能。但是,有一些技术可以减少网站的 DOM 大小。本篇文章将探讨如何通过使用各种策略来最小化 HTML 大小,从而增强 Elementor 网站。
![Elementor 性能提示:缩小 DOM 大小,让网站更快](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
理解“DOM 大小过大”问题
DOM (文档对象模型)表示网页的结构。DOM 大小过大通常表示 DOM 结构复杂,通常是由于使用了过多的 HTML 元素、嵌套节点或动态内容注入造成的。包含大量 HTML 元素的页面往往加载缓慢,并且会影响动画和其他用户交互。
DOM 大小对页面性能的影响
较大的 DOM 大小会增加渲染时间,导致页面渲染延迟和加载时间变慢。这是因为浏览器必须解析和渲染每个节点。此外,每个 DOM 节点都需要浏览器内存,这可能会导致系统资源耗尽和内存消耗增加。这可能会导致性能下降,尤其是在低端设备上。
此外,DOM 过大还会导致用户交互迟缓,网站使用过程中响应速度降低。大量的 DOM 元素通常包含许多事件监听器,这会增加开销并减慢用户交互速度。我们不会提及所有原因,但经验法则是 HTML 越大,页面越慢。
![Elementor 性能提示:缩小 DOM 大小,让网站更快](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如何使用外部工具测量 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 大小,让网站更快](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
减少 Elementor DOM 大小
Elementor 是一款可视化的拖放式网站构建器,可简化向页面添加元素的过程。使用 Elementor 通常不会对网站的性能产生负面影响。但是,可以采取一些步骤来进一步优化构建的页面。这包括减少可以最小化 DOM 的 HTML 元素数量,而不会影响设计。
为了有效优化,了解 Elementor 布局元素的结构很有用。我们将重点介绍布局元素,因为典型的页面包含数十个这样的元素,因此优化它们会产生更大的影响。
有三种推荐的技术可以优化您的布局元素:
- 从部分/列迁移到容器。
- 使用单个嵌套容器压平容器。
- 尽可能实现全宽而不是盒宽的嵌套容器。
让我们了解有关减少 Elementor DOM 大小的更多信息。
![Elementor 性能提示:缩小 DOM 大小,让网站更快](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
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 大小,让网站更快](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
盒装与全宽
优化 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,节假日休息 |