过大的 DOM 会增加内存占用，导致样式计算时间延长，并产生代价高昂的布局重排。在 PageSpeed Insights 中，当 body 元素节点超过 800 个时，Google 会发出警告（橙色）；当 body 元素节点超过 1400 个时，则会发出错误提示（红色）。您会看到“避免 DOM 过大”的提示信息。
你可以把节点想象成页面上的每个 HTML 元素。通常来说，元素越多，加载时间就越长，导致总阻塞时间 (TBT)增加。在 WordPress 中优化节点比较棘手，因为你无法直接移除构成页面结构的 DOM 元素。不过，你可以对特定元素进行延迟加载。这就像延迟加载首屏下方的图片一样，在这个例子中，你可以延迟加载首屏下方的一系列元素，从而减小 DOM 的整体大小。
DOM 元素减少意味着浏览器解析和构建 DOM 树的工作量也相应减少。这可以加快首次渲染速度 (FCP)和延迟渲染速度 (LCP)，因为浏览器可以更快地开始绘制内容。但是，请记住，延迟加载元素并不会减小页面（HTML）的整体大小，因为代码仍然保留在源代码中，可以稍后渲染。因此，FCP/LCP 的改进幅度有限，因为它主要体现在减少首次加载时的渲染时间上。
- 如何延迟加载元素
- 关于如何进行懒加载的技巧
如何懒加载元素
你可以使用延迟加载来减小元素的整体 DOM 大小。请按照以下步骤操作。
步骤 1
点击进入Perfmatters插件设置。
步骤 2
在Perfmatters中启用“显示高级选项”。
步骤 3
点击“延迟加载”菜单。
第四步
向下滚动到“懒人元素”部分。启用“元素”。
第五步
class="example"添加父容器属性字符串的任何唯一部分（） 。这将延迟加载指定元素及其后代元素。格式：每行一个。
我们支持以下选择器： div，，， sectionfigurefooter
或者，您也可以perfmatters-lazy-element在主题或页面构建器中将我们的类添加到容器上。
步骤 6
向下滚动并点击“保存更改”。
关于如何进行懒加载的技巧
我们通常建议查找页面首屏下方包含大量 DOM 元素的静态 div 元素。您可以使用Chrome 开发者工具中的AI 助手功能来查询父 div 元素下有多少个 DOM 元素。这有助于了解此类问题可能造成的影响。
故障排除
- 你不应该尝试对首屏以上的元素进行延迟加载。
- 如果您发现视觉上出现问题，请确保您在页面上使用了与其他元素不共享的唯一字符串。
- 与图片延迟加载类似，内容会被放置在 `
<noscript><head>` 标签内。这意味着任何延迟加载的内容在技术上仍然可以被 Google 抓取和索引。您可以使用Google Search Console 中的网址检查工具或富媒体搜索结果测试工具来验证这一点。内容仍然可见。但是，我们无法确定 Google 将如何处理链式延迟加载的元素。因此，就 SEO 而言，我们建议您先进行测试。 - 如果我的图片已经懒加载了会怎样？如果您在 Perfmatters 中使用懒加载，则无需担心这个问题。如果懒加载的图片位于同样懒加载的元素树中，那么元素加载完毕后，DOM 监控会启动，以确保图片正确加载。启用“懒加载元素”时，我们会启用DOM 监控。
首页
点击拨打 18150366706(微信同号)