WordPress网站如何优化延迟加载元素（优化 DOM 和 TBT）

较大的 DOM 会增加内存使用量，导致样式计算时间更长，并产生代价高昂的布局重排。在 PageSpeed Insights 中，当 body 元素的节点超过 800 个时，Google 会发出警告（橙色），当 body 元素的节点超过 1,400 个时，Google 会出错（红色）。您将看到消息“避免 DOM 大小过大”。

您可以将节点视为页面上的每个 HTML 元素。通常，元素越多，花费的时间就越多，从而导致总阻塞时间 (TBT)更高。在 WordPress 中优化可能很棘手，因为您不能直接删除构成页面结构的 DOM 元素。但是，您可以延迟加载选择性元素。可以将其想象成延迟加载折叠下方的图像，在这种情况下，您可以延迟加载折叠下方的元素链，从而减少整体 DOM 大小。

DOM 元素越少，浏览器解析和构建 DOM 树的工作量就越少。这可以加快FCP速度，因为浏览器可以更快地开始绘制内容。

如何延迟加载元素

您可以延迟加载元素以帮助减少整体 DOM 大小。请按照以下步骤操作。

步骤 1

点击进入 Perfmatters 插件设置。

第 2 步

在 Perfmatters 中切换到“显示高级选项”。

步骤3

点击“延迟加载”菜单。

步骤4

向下滚动到“Lazy Elements”部分。切换到“Elements”。注意：此功能处于测试阶段。

步骤5

从父容器添加属性字符串 ( class="example") 的任何唯一部分。这将延迟加载特定元素及其后代。格式：每行一个

或者，您也可以perfmatters-lazy-element在主题或页面构建器的容器中添加我们的类。

第 6 步

向下滚动并单击“保存更改”。

故障排除

• 您不应尝试延迟加载折叠上方的元素。
• 如果您注意到某些视觉上存在问题，请确保您在页面上使用了未与其他元素共享的唯一字符串。
• 就像延迟加载图片一样，内容被放置在<noscript>标签内。这意味着任何延迟加载的内容在技术上仍然可以被 Google 抓取和索引。但是，我们无法确定 Google 将如何处理链中的延迟加载元素。因此，就 SEO 而言，我们建议先进行测试。
• 如果我的图片已经延迟加载，会发生什么情况？如果您在 Perfmatters 中使用延迟加载，则无需担心这个问题。如果延迟加载的图片位于同样延迟加载的元素树中，则 DOM 监控会在元素加载后启动，以正确加载图片。当延迟元素打开时，我们会打开DOM 监控。
• 您不应尝试延迟加载包含启动灯箱的图像的元素。

 

网站性能优化是一件非常高深的工作，如果你想要优化网站没有一定的经验是比较难做好的，你可以把网站优化事情放心交给我们 厦门创意互动 来做。