如何修复 WordPress 中的“避免 DOM 大小过大”警告

已发表: 2024-01-10
主要的
关注@Cloudways

您是否曾经在 WordPress 网站上工作过，突然收到“避免 DOM 大小过大”警告？ 是的，就是有点头疼。 当网页的文档对象模型 (DOM) 大小超出建议值时，会弹出此警告。

但不用担心，您可以通过优化 WordPress 网站来解决此问题。 这包括减少页面上的元素并有效地构建 HTML。 另外，选择插件和主题时要小心，因为它们会增加 DOM 大小。

这篇博文旨在提供帮助。 它提供了修复“避免 DOM 大小过大”警告的实用步骤。 最后，您将准备好优化您的 WordPress 网站、加快速度并改善用户体验。 让我们开始吧！

表中的内容
  • 什么是“避免 DOM 大小过大”警告？
  • 大型 DOM 如何影响网站速度和用户体验？
  • DOM 尺寸过大的原因有哪些？
  • 诊断 DOM 大小过大的工具和技术
  • 如何修复“避免 DOM 大小过大”警告？
  • 防止 DOM 大小过大的最佳实践

什么是“避免 DOM 大小过大”警告？

“避免 DOM 大小过大”警告是Google Lighthouse 等网站审核工具的性能标志。 它表明网页的文档对象模型（DOM）节点过多。 这可能会对网站的性能产生负面影响。

DOM 是浏览器用来呈现网站的网页的表示形式。 它由节点组成，节点是 HTML 元素，例如标签和文本。 当 DOM 具有太多节点时，称为“DOM 大小过多”。

为了保持最佳性能，通常建议DOM 节点少于 1,500 个
在一页上。 DOM 的深度应最小化到少于32 层嵌套。 这降低了 DOM 的复杂性。

还建议避免父节点的子节点数量超过 60 个。 这可以防止任何单个节点变得过于复杂。 这些做法可以帮助避免“DOM Size 过大”警告。

Google Lighthouse Showing Recommendations

– Google Lighthouse 显示推荐

大型 DOM 如何影响网站速度和用户体验？

网站性能至关重要，因为它直接影响用户体验。

性能良好的网站加载速度快，能够及时响应用户交互，并提供流畅的浏览体验。 这在用户对数字体验抱有很高期望的时代尤为重要。

另一方面，糟糕的网站性能可能会导致加载时间更长和界面无响应。 这些问题可能会导致令人沮丧的用户体验，从而导致更高的跳出率和更低的用户参与度。

最终，糟糕的表现可能会导致转化或销售的损失。 因此，保持最佳的网站性能（包括管理 DOM 大小）对于任何网站的成功至关重要。

想要提高您的网站速度和用户体验吗？ 立即切换到 Cloudways！

凭借优化的服务器配置和高级缓存，无论 DOM 大小如何，Cloudways 都能确保您的 WordPress 网站顺利运行。

立即体验！

DOM 尺寸过大的原因有哪些？

由于 DOM 大小较大，网页可能会变慢且性能不佳。 这是优化 Web 性能时值得研究的常见问题。 我们来看看造成这个问题的主要原因：

1.页面上的元素太多

复杂的设计或冗余代码可能会导致页面上出现太多元素。 如果设计没有针对性能进行简化，您会得到一棵混乱的 DOM 树。 这会减慢页面速度并影响用户体验。

2. 深度嵌套结构

HTML 中的深度嵌套可能会导致性能问题。 当有大量嵌入时，DOM 树就会变得复杂。 这种复杂性会使浏览器更难有效地渲染页面，从而减慢 CSS 和 JavaScript 处理速度。

3. 未优化的主题和插件

主题和插件可能会添加不必要的元素、JavaScript 或 CSS。 主题通常具有使 DOM 膨胀的默认功能，而插件可能会添加增加加载时间的脚本和样式，即使不使用这些功能。

诊断 DOM 大小过大的工具和技术

让我们看一些有效的工具和技术来帮助诊断这个问题并指导您的优化工作。

1.谷歌灯塔

Google Lighthouse 是一款免费的开源工具，可以帮助您诊断各种网站性能问题，包括 DOM 大小过大。 使用方法：

  1. 打开 Chrome 浏览器并导航到您要分析的网页。
  2. 右键单击该页面并选择“检查”以打开 Chrome 的开发人员工具。
  3. 单击Lighthouse选项卡，然后单击分析页面加载。

2.Chrome开发者工具

Chrome DevTools 提供网页 DOM 的详细视图。 您可以使用它来计算 DOM 节点数量并识别导致较大 DOM 大小的元素。 就是这样：

  1. 在 Chrome 中打开网页。
  2. 右键单击并选择Inspect以打开 DevTools。
  3. 在Elements选项卡中，您可以看到 DOM 树并计算节点数。

3.网页测试

WebPageTest 是一个在线工具，可提供网页性能的详细分析。 它包括页面 DOM 元素的细分。 使用方法：

  1. 转到WebPageTest.org 。
  2. 输入您要测试的网页的 URL。
  3. 单击开始测试。

如何修复“避免 DOM 大小过大”警告？

要修复“避免 DOM 大小过大”警告，您需要优化网页以减少 DOM 中的元素数量。 您可以使用以下技术来解决此问题：

1. 简化 HTML 结构

对于 WordPress 网站，您可以通过遵循以下技术来简化 HTML 结构；

  • 对于您的 WordPress 网站，请选择一个简单的主题，例如 Astra 或 Elementor。 这些不会向您的页面添加不必要的元素。
  • 在 WordPress 编辑器中浏览您的页面和帖子。 删除未使用的短代码、额外的 div 标签和空元素。
  • 右键单击您的 WordPress 站点并选择“查看页面源” 。

select View page source

  • 查找重复的代码部分，例如具有相同类或样式属性的多个 div 标签。

Look for code sections

  • 转到 WordPress 仪表板，然后
    外观→主题编辑器。 在这里，您可以看到主题的 PHP 文件。
  • 删除任何不必要的嵌套结构。

Remove any unnecessary nested structures

  • 进行更改后，保存文件。 始终测试您的网站以确保一切仍然正常工作。
  • 右键单击网站并选择检查。 转到Lighthouse选项卡并单击分析页面加载以生成报告。 这将显示是否有“避免 DOM 大小过大”警告。

Analyze page load

在这里，您看不到这样的“避免 DOM 大小过大”警告。

no warning

2. 内容丰富的页面分页或无限滚动

您可以通过编辑以下内容向 WordPress 主题添加分页
函数.php
您的主题文件，可能还有您希望显示分页的模板文件。

  • 转到您的 WordPress 仪表板并导航至
    外观→主题编辑器。 选择您的活动主题。
  • 找到functions.php文件并单击它进行编辑。 在这里，您可以添加自定义函数来创建分页链接。
  • 将以下函数添加到您的functions.php文件中：
 函数 my_custom_pagination() {

    全局 $wp_query;

    $大= 999999999；

    回显分页链接（数组（

        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),

        '格式' => '?paged=%#%',

        '当前' => max( 1, get_query_var('paged') ),

        '总计' => $wp_query->max_num_pages

    ) );

}
  • 打开您想要分页的模板文件（例如， index.php ）。 在需要分页链接的位置添加以下代码：
 <?php my_custom_pagination(); ?>
  • 如果您使用WP_Query创建新循环，请确保它处理分页。 您可以通过添加以下代码来完成此操作：
 $args = 数组(

    'posts_per_page' => 10,

    '分页' => get_query_var('分页') ？ get_query_var('分页') : 1

）；

$my_query = new WP_Query( $args );
  • 添加代码后，将更改保存在functions.php 文件和添加分页调用的模板文件中。

3.优化或删除不必要的脚本和插件

通过管理脚本和插件，您还可以修复 DOM 大小过大的警告问题。

要做到这一点：

  1. 检查您已安装的插件，并停用或卸载任何未使用的插件或给您的页面添加不必要的膨胀的插件。
  2. 使用WP Rocket或Autoptimize等插件来缩小和组合脚本，从而减少请求和 DOM 元素。

4.利用服务器端渲染和延迟加载

要修复 DOM 大小警告，您可以在 WordPress 网站上启用服务器端渲染和延迟加载。

1.服务器端渲染（SSR）

SSR 涉及在服务器上处理和渲染网页的初始 HTML，而不是依赖客户端 JavaScript。

这可以显着提高网站的加载时间和整体性能。 有关在 WordPress 网站上启用 SSR 的详细步骤，请遵循此详细指南。

2. 延迟加载

这是优化加载时间和解决 DOM 大小问题的另一种有效技术。 它的工作原理是仅在需要时加载必要的内容，例如进入视口的图像。 这减少了页面的初始加载时间。

要在 WordPress 网站上实现延迟加载，请遵循此详细指南。 另外，请考虑使用最好的延迟加载插件之一以实现更流畅的实现。

防止 DOM 大小过大的最佳实践

以下是一些避免 WordPress 中“DOM Size 过大”警告的预防措施：

  1. 选择一个简单的主题：
    选择一个简单的主题，不要向页面添加不必要的元素。 Astra 或 Elementor 等主题是不错的选择。
  2. 限制插件的使用：
    每个插件都可以向 DOM 添加额外的元素。 仅使用必要的插件，并定期检查和删除任何未使用的插件。
  3. 清理你的页面：
    定期在 WordPress 编辑器中查看您的页面和帖子。 删除未使用的短代码、额外的 div 标签和空元素。
  4. 优化您的图像：
    大图像可以添加到您的 DOM 大小。 使用图像优化插件来减小图像大小而不损失质量。
  5. 实施延迟加载：
    延迟加载可以通过仅加载需要的元素来减少初始 DOM 大小。
  6. 使用分页：
    对于内容较多的页面，请考虑使用分页或无限滚动来限制同时加载的元素数量。
  7. 缩小你的代码：
    使用工具来缩小 HTML、CSS 和 JavaScript。 这有助于减小 DOM 的整体大小。
  8. 定期监控您的网站：
    使用 Google Lighthouse 等工具来监控网站的性能并尽早发现任何 DOM 大小问题。

概括

所以你有它！ 您刚刚了解了修复 WordPress 中“避免过多 DOM 大小”警告的细节。 从理解问题到实施解决方案，您在优化网站和用户体验方面迈出了重要的一步。

请记住，您为优化采取的每一步都有助于打造更快、更流畅、更用户友好的网站。 因此，请将这些技巧放在手边，继续您的 Web 开发之旅。 如果您有任何疑问，请在评论中写下。