减少网站 DOM 大小的关键

已发表: 2020-11-17

影响在网页上实现良好 SEO 定位的方面之一是其加载性能。这是一个页面的 DOM 大小起着关键作用的主题。

这就是为什么我们要解释如何认为 DOM 过大以及如何减少它。

让我们开始！

什么是 DOM？

简单地说，当我们谈论 DOM 时，我们指的是浏览器每次加载页面时生成的对象的结构。 它的名字来源于首字母缩写词文档对象模型。

它是一种层次结构，其中有不同的对象，其中一些对象依赖于其他对象。该结构类似于树，因为存在其他次要项目所依赖的主要对象。 DOM 将页面的 HTML 结构表示为一棵树，由一系列标签组成。

换句话说，当浏览器准备一个页面向我们展示时，它会根据其 HTML 结构构建一个由页面的所有元素组成的对象树。

每当浏览器收到一个 HTML 文档时，它就必须将它转换成这种树状结构，我们称之为 DOM 或 DOM 树。 JavaScript 代码可以访问该 DOM 并对其进行修改。

网络性能

事实上，DOM 的大小会影响页面的性能。 过大的 DOM 会降低网站速度，因为它具有以下影响：

要减小 DOM 大小使其不会对 Web 性能产生负面影响，您必须删除所有不必要的 HTML 元素。 正如我们所看到的，如果我们不采取必要的措施，它会减慢页面速度有几个原因。

而不是使用此代码；

 <div id = ”navigation-main”>   <ul>           etc ..   </ul> </div>

最好使用另一个；

 <ul id = ”navigation-main”>   etc .. </ul>

关于树形结构，我们需要知道以下术语：

也就是说，最好的事情是树的深度由形成：

Google 建议在开发网站时，页面包含少于 1,500 个 DOM 节点，这意味着设计不应过于复杂。

有几种方法可以减小 WordPress 中 DOM 的大小：

您是否有一个页面显示您网站的不同类型的内容？例如，联系表格、博客文章、产品等。

在这种情况下，最好将所有这些元素分类在不同的页面中，并通过导航栏将它们链接起来。

您可以在所有允许它的元素中启用延迟加载模块。 您可以使用来自 WordPress WP-Rocket 的 Youtube Lite 或 Lazy Load 来处理来自 YouTube 的视频。

限制每个博客页面的帖子数量也很重要。 合理的最大帖子数为每页 10 个。这种做法也适用于每页应显示的产品数量。

有一个选项可以更改每页的帖子数。转到设置菜单 > 阅读子菜单，更改博客页面显示的最大值并保存更改.

我们还建议将相关出版物的数量限制在最多三个或四个。

在某些情况下，可能需要默认删除 WordPress 主题附带的某些元素，例如产品页面上的“添加到购物车”按钮、发布日期、作者信息等。

检查 WordPress 主题的配置，看看是否有删除这些元素的选项，如果没有，请查找相应的 PHP 代码来删除它们。

WordPress 主题的质量直接影响 DOM 的大小。 因此，建议使用编码良好的主题，例如 Astra 或 GeneratePress。

页面构建器还经常插入太多 div 标签，因此使用像 Oxygen Builders 这样的解决方案很重要，它不会注入不需要的元素并允许对 HTML 结构进行更多控制。

HotJar 之类的工具可以让您查看用户正在使用的内容以及不适合他们的内容。运行仔细分析是获得正确 DOM 大小的基础。

过多的 Dom Size 会损害您的 Web 性能，从而减慢页面加载时间。保持您的HTML 结构简单，没有不必要的元素。 检查您的 DOM 树并删除那些不会为您的站点增加价值的节点。您不仅会加快网站速度，还会提供更好的用户体验。

毫无疑问，谷歌将在未来几个月发布的Page Experience 更新中考虑 DOM 大小。确保有一个足够的，所以它不会影响您的网络性能。