时间戳

首页 > 解决方案 > 如何解决 Google pagespeed 洞察中的 Uses An Excessive DOM Size 问题

google-pagespeed - 如何解决 Google pagespeed 洞察中的 Uses An Excessive DOM Size 问题

问题描述

避免在 Google Pagespeed Insights 结果中显示过多的 DOM 大小问题。我该如何解决这个问题？请提及减少它的方法。我的网站是一个wordpress网站。

标签： google-pagespeedlighthouse

解决方案

非技术性答案是通过加载更少的资源来减小 DOM 大小来最小化您的 WordPress 网站 DOM 大小，您可以通过多种方式做到这一点，例如：

  • 减少不必要的插件。
  • 减少不必要的 css/js。
  • 减少图像数量。基本上，如果您认为可以从页面中删除某些内容，请执行此操作，您会在 DOM 中看到较少数量的节点。

技术反馈（来自 Google pagespeed 推荐）：

大型 DOM 树会以多种方式损害您的页面性能。

网络效率和负载性能。如果你的服务器发送了一个大的 DOM 树，你可能会发送很多不必要的字节。这也可能会减慢页面加载时间，因为浏览器可能正在解析许多甚至没有显示在首屏的节点。运行时性能。当用户和脚本与您的页面交互时，浏览器必须不断地重新计算节点的位置和样式。大型 DOM 树与复杂的样式规则相结合会严重减慢渲染速度。内存性能。如果您使用通用查询选择器，例如 document.querySelectorAll('li')，您可能会在不知不觉中存储对大量节点的引用，这可能会超出用户设备的内存容量。建议 最佳 DOM 树：

总共少于 1500 个节点。最大深度为 32 个节点。没有超过 60 个子节点的父节点。

推荐阅读