解决PageSpeed Insights DOM过大问题：跨浏览器div懒加载方案

针对你遇到的DOM尺寸过大问题，除了简化布局，以下是几种全主流浏览器（包括Safari）支持的div懒加载方案，同时附带根源优化建议：

1. Intersection Observer API 实现JS懒加载（最可靠跨浏览器方案） #

这是目前兼容性最好的懒加载方式，通过监听元素是否进入视口再触发内容渲染，所有现代浏览器（包括Safari 12.1+）都支持。

实现步骤： #

• 给需要懒加载的div添加自定义类（比如lazy-render-div），通过Elementor的「高级」选项卡即可添加。
• 初始用CSS隐藏元素或设置占位：

.lazy-render-div {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  /* 可选：设置占位比例避免布局跳动 */
  aspect-ratio: 4/3;
  background-color: #f5f5f5;
}

.lazy-render-div.loaded {
  visibility: visible;
  height: auto;
}

• 添加JS代码（可以放到主题的functions.php，或用Elementor的自定义HTML模块）：

document.addEventListener('DOMContentLoaded', () => {
  const lazyDivs = document.querySelectorAll('.lazy-render-div');
  if (!lazyDivs.length) return;

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const target = entry.target;
        target.classList.add('loaded');
        observer.unobserve(target); // 停止监听已加载元素
      }
    });
  }, {
    rootMargin: '150px 0' // 提前150px触发加载，提升流畅度
  });

  lazyDivs.forEach(div => observer.observe(div));
});

2. CSS特性检测 + content-visibility 降级方案 #

针对支持content-visibility的浏览器（Chrome、Edge、Firefox）用原生优化，Safari则自动降级到JS懒加载：

/* 支持content-visibility的浏览器启用原生优化 */
@supports (content-visibility: auto) {
  .lazy-div {
    content-visibility: auto;
    contain-intrinsic-size: 800px; /* 给浏览器预估高度，防止布局跳动 */
  }
}

/* Safari及不支持的浏览器用JS配合的懒加载样式 */
@supports not (content-visibility: auto) {
  .lazy-div {
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
  .lazy-div.loaded {
    visibility: visible;
    height: auto;
  }
}

配合上面的Intersection Observer代码即可实现全浏览器兼容。

3. 从根源减少DOM数量（辅助优化） #

懒加载是治标，减少DOM才是治本：

• 在Elementor中禁用不必要的嵌套容器：编辑模块时，关闭「自定义CSS类」外的冗余包装，避免生成多余div。
• WooCommerce产品列表优化：用插件或自定义代码隐藏产品卡片中不必要的元素（比如冗余标签、次要描述），分页加载产品而非一次性渲染全部。
• 利用Elementor的「条件显示」：仅在目标页面加载对应模块，避免全局加载未使用的元素。

4. 布局跳动预防技巧 #

不管用哪种懒加载方案，都要给元素设置占位尺寸，避免内容加载时页面偏移：

.lazy-render-div {
  /* 根据你的内容比例设置 */
  aspect-ratio: 16/9;
  /* 或者固定高度 */
  /* min-height: 300px; */
}

内容的提问来源于stack exchange，提问作者Hans Noone