如何解决Google Pagespeed见解中使用DOM大小过大的问题

Question

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

Answer 1

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

• 减少不必要的插件。
• 减少不必要的css / js。
• 减少图像数量。 基本上，如果您认为可以从页面中删除某些内容，则可以这样做，并且您会在DOM中看到较少的节点数。

技术反馈（来自Google pagespeed建议）：

  

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

     

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

     

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

Answer 2

如果没有像did here那样从头开始完全重新设计网页，则无法解决此警告。如果此警告在您的网站上超过一页，您就不应忽略这一点，您应考虑以下几点。

1. 减少网页或页面布局中的小部件/部分的数量
2. 使用更简单的网页构建器，因为许多页面构建器会增加很多代码膨胀
3. 更改主题
4. 使用不同的滑块