时间戳

首页 > 解决方案 > 如何延迟加载 HTML 块（避免大的 DOM 大小），同时让网络爬虫注意到延迟内容？

javascript - 如何延迟加载 HTML 块（避免大的 DOM 大小），同时让网络爬虫注意到延迟内容？

问题描述

我正在使用侧边栏脚本创建一个汉堡菜单，一旦用户单击汉堡，就会弹出一个带有多个链接的导航栏。

我在该菜单中链接了许多类别和子类别，因此在我的 HTML 中，我有大约 200 行以下模式：

<li><span>A</span>
<ul><li><a href="/a/">Show A</a></li>
<li><a href="/a/1/">1</a></li>
<li><a href="/a/2/">2</a></li>
...
...
<li><a href="/a/20/">20</a></li>
....
....
<li><span>Z</span>
<ul><li><a href="/Z/">Show Z</a></li>
<li><a href="/z/1/">1</a></li>
<li><a href="/z/2/">2</a></li>
...
...
<li><a href="/z/20/">20</a></li>

Google Page Speed 会因为我的 DOM 尺寸大而扣分：

避免过多的 DOM 大小：1,215 个元素

浏览器工程师建议页面包含少于 ~1,500 个 DOM 元素。最佳点是树深度 < 32 个元素和少于 60 个子/父元素。大型 DOM 会增加内存使用量，导致更长的样式计算，并产生代价高昂的布局重排。

但是，只有一小部分访问者会费心浏览其他页面并实际单击汉堡菜单以查看所有这些链接。

因此，我能想到的唯一解决方案可能是以某种方式延迟加载所有这些 HTML 块，因此它不会被视为大 DOM 大小。

一种选择是仅在页面加载时加载它，另一种选择是仅在用户单击汉堡按钮时加载它。（一旦用户单击汉堡，菜单就会被隐藏并被“拉出”。

另一个考虑因素是 SEO - 如果我这样做，Google Crawler 将如何查看我的页面：

目前，谷歌可以看到，用户可以从任何页面访问所有其他页面。此菜单用作主要的导航方法。但是如果我从最初的 HTML 输出中隐藏这个菜单，我猜 Google Bot 可能不会再考虑这些链接，并且可能会因为站点内没有足够的链接而惩罚页面（给访问者导航带来负担）。虽然我不太确定。

标签： javascriptjqueryseolazy-loadingpagespeed

解决方案

对此的简短回答不必担心（事实上，如果您的 JavaScript 失败，延迟加载内容可能是个坏主意）

1215 个 DOM 节点很高，但不是一个需要过多担心的指标。

我有一个包含 2080 个 DOM 节点的页面（当我使用内联 SVG 时），它在页面速度洞察力方面仍然得分 99 / 100，并且可以在 5 岁的智能手机上正常工作。链接到我的页面速度结果以确保安全

您不会因此受到惩罚，只要您的 HTML 在语义上是正确的，它就只是一个建议项目。（因为许多 DOM 节点通常表明您的 HTML 需要重构，这就是他们提到它的原因）。

推荐阅读