修复“避免过大的 DOM 大小”警告的 7 个行之有效的策略
已发表: 2022-11-23大多数 Google PageSpeed Insights 的改进建议都非常简单明了。
无论是“延迟屏幕外图像”、“消除渲染阻塞资源”还是“减少未使用的 CSS”，您都可以掌握处理这些问题需要采取的后续步骤。
然而，当你滚动得更深一点时，你会突然收到“避免过大的 DOM 大小”警告：
第一反应：
嘿，DOM 大小是什么，我该如何解决？！
你来对地方了。
在接下来的段落中，您将了解有关 DOM 大小以及如何处理此警告的所有信息：
- 什么是 DOM（文档对象模型）？
- DOM 大小对页面性能有何影响？
- 为什么您会看到“避免过大的 DOM 大小”警告
- 如何修复“避免过大的 DOM 大小”警告
单击一个按钮即可获得 90+ PSI 分数。 使用 NitroPack 查看您的网站！
什么是DOM？
您的网站包含 HTML 文档、CSS 和 JavaScript 文件等资源。
每当用户加载您的网站时，他们的浏览器都会建立连接并接收资源。 一旦接收到第一个数据块，解析过程就开始了。
解析是浏览器将数据（HTML 标记）转换为 DOM 树的步骤。
DOM 是一种将 HTML 表示为分支和节点树的文档模型。
树的每个分支都以一个节点结束，每个节点都包含对象。 节点代表文档的一部分，例如元素、文本字符串或注释。
简单来说，当您听到 DOM 时，它意味着浏览器在每次加载网页时构建的对象结构。
关键词：
|
DOM 大小对页面性能有何影响？
DOM 的分支和节点越多，它的大小就越大。
相应地，DOM 大小越大，您可能面临的负面性能问题就越多。
以下是一些与较大的 DOM 大小相关的问题：
1. 数据成本增加，加载时间变慢
大型 DOM 树通常包含许多在用户首次加载页面时不可见的节点。 这将不必要地增加数据成本，因为他们将不得不为您的用户加载更多元素并减慢加载时间。
2. 淹没用户设备的内存资源
与 JavaScript 查询的持续交互会导致性能不佳和渲染缓慢。 这会给您网站的用户带来负面的页面体验。
3.增加渲染时间
当用户与您的页面交互时，浏览器必须不断地重新计算节点的位置和样式。 庞大而复杂的 DOM 树会大大降低渲染速度。
4. 增加首字节时间 (TTFB)
TTFB 测量客户端浏览器从服务器接收响应的第一个字节所花费的时间。 过多的 DOM 表示较大的 HTML 文档。 因此，需要传输的数据量更多，这可能需要更多时间。
为什么您会在 PageSpeed Insights 中看到“避免过大的 DOM 大小”警告
PSI 使用 Lighthouse 在受控环境（即使用实验室数据）中分析 URL，以展示性能、可访问性、最佳实践和 SEO 分数。
为了让 Lighthouse 标记您的页面并分别在您的 PSI 报告中显示“避免过大的 DOM 大小”警告，其 DOM 树必须满足以下任一错误：
- 它总共有超过 1,500 个 DOM 节点。
- 它的最大节点深度大于 32 个节点。
- 一个父节点有60 多个子节点。
加入通过 Core Web Vitals 的前 31% 的网站！ 使用 NitroPack 查看您的站点
如何修复避免过大的 DOM 大小
Google 的一个很好的经验法则是：
“一般来说，寻找只在需要时创建 DOM 节点的方法，并在不再需要时销毁节点。”
当然，说起来容易做起来难，有时您需要深入了解优化网站的细节。
然后，我们建议应用以下一些修复：
1.避免编码不当的插件和主题
它们基本上会使您网站的代码膨胀，增加您的 DOM 大小，并损害您网站的速度和整体性能。
您如何判断主题/插件是否编码不当？
很好的问题。 答案是：
- 阅读评论。 如果有问题，很可能有人已经遇到并发表了评论。
- 不要害羞花一些钱。 就像其他任何东西一样，一分钱一分货。 通过获得免费主题/插件来省钱听起来不错，但长期效果会让你付出更多代价。
- 查看上次更新时间。 您绝对希望避免使用过时的主题和插件。
如果您是 WooCommerce 用户或计划开店，您一定要查看我们对 2022 年表现最佳的 Woo 主题的深入研究。
以下是选择主题时应注意/避免的事项清单：
|
2. 最小化基于 JavaScript 的 DOM 节点
在您的网站上添加动态元素是有代价的，因为它们可能会因额外的 JavaScript 节点而变得臃肿。
对于初学者，您可以通过分配导致问题的 JS 文件并将其删除来修复它。 如果它是第三方小部件（例如，聊天小部件），您应该寻找优化的替代方案。
3. 生成臃肿 HTML 的页面构建器
页面构建器的易用性使其成为许多用户网站创建过程中不可或缺的一部分。
不幸的是，页面构建器有时会生成带有过多 DOM 节点的臃肿代码。 他们通过注入过多的 div 标签来做到这一点。
要处理它，您可以访问您的 HTML 并手动修复它。
好消息是一些页面构建器会采取措施解决这些众所周知的问题。 例如，Elementor 宣布 Elementor 3.0 对 DOM 进行了重大改进，以提高新网站的速度和性能。
4. 不要将文本复制/粘贴到所见即所得的编辑器中
大多数 WYSIWYG（所见即所得）编辑器无法清理粘贴的代码。 尤其是从另一个富文本源（如 Microsoft Word）粘贴时。 问题是它不仅会复制文本，还会复制其样式。 它们是罪魁祸首，因为它们可能嵌入了大量 DOM 节点。
你有几个选择来处理它：
- 避免在编辑器中粘贴文本
- 使用粘贴为纯文本选项
- （如果您的编辑器允许）粘贴后使用高级功能清理代码
最后但并非最不重要的一点——回到你的旧页面并清理它们。
5.将您的单页网站分解为多个页面
当单页网站的唯一目的是展示您的业务时，它是一个好主意。
相反，如果您决定添加商业信息、博客文章、产品、联系表等，请将它们分成单独的页面并通过导航菜单链接它们。
将大页面拆分为多个页面可能会减少 DOM 节点的数量。
6. 不要使用 display:none 隐藏不需要的元素
display: none 通常与 JavaScript 一起使用来隐藏和显示元素而不删除和重新创建它们。 但是，这并不意味着它们会从您的 HTML 标记中消失，让访问者加载不需要的元素。
7. 避免使用复杂的 CSS 声明和 JavaScript
复杂的 CSS 声明和 JavaScript 可能会额外增加内存使用量并降低您的网站速度。 如果您处理过多的 DOM 节点，最好跳过它们。
自动修复 CSS 和 JavaScript 问题！ 使用 NitroPack 查看您的站点
综上所述
确实，修复您的 DOM 问题不会导致您的 PageSpeed Insights 得分提高。
然而，努力处理“避免过大的 DOM 大小”警告的隐藏好处要大得多：
- 增加网站的加载时间
- 提高页面的感知性能
- 为访问者提供更好的用户体验
最重要的是，这三件事是谷歌奖励的！ 最重要的是，它们是降低跳出率、增加平均花费时间以及最后但并非最不重要的——提高转化率的必经之路。
如果您正在寻找解决任何其他 PSI 建议的方法，请务必查看我们的其他文章：
- 轻松提供下一代格式的图像（WordPress、OpenCart 和 Magento）
- 如何延迟加载屏幕外图像（5 种行之有效的技术）
- 网络图像优化：2022 SEO 和网站速度技术
- 8 种字体加载策略可改善您的核心 Web Vitals（2022 年）
- 如何消除渲染阻塞资源（CSS 和 JavaScript）
- 减少第三方代码的影响（有/无插件）
- 最小化主线程工作的 7 种方法