如何实现iframe点击/进入视口时加载 优化PageSpeedInsight得分

你之前用的懒加载脚本失效的核心原因很明确：只要页面初始HTML里存在带src属性的iframe标签，哪怕你给它加display:none、loading="lazy"、甚至用JS延后修改src，浏览器在HTML解析阶段就会提前识别到Maps资源地址，发起预连接、预加载请求，PageSpeed Insights的检测爬虫在首屏资源扫描阶段就会抓到这些请求，判定为影响首屏性能的冗余资源。
以下是不需要修改iframe内部代码、可以100%通过PageSpeed检测的实现方式： #

第一步：替换初始DOM结构，从根源切断提前加载路径 #

初始渲染阶段页面里不要放完整的iframe标签，用和地图等尺寸的占位容器代替，把真实的iframe地址存在data-*自定义属性上，同时设置固定宽高比避免布局偏移（CLS扣分）：

<!-- 占位容器宽高比和实际地图iframe保持一致即可 -->
<div 
  class="lazy-map-container" 
  data-real-src="这里替换成你的Google Maps iframe完整src地址"
  style="aspect-ratio: 4/3; width: 100%; background: #f5f5f5; position: relative;"
>
  <!-- 点击触发的按钮，如果用滚动自动加载可以去掉这个按钮，放加载提示即可 -->
  <button style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 8px 16px;">
    点击加载地图
  </button>
</div>

关键注意点：初始DOM里绝对不能出现带src的地图iframe，哪怕src=""、src="about:blank"都不行，部分浏览器会对iframe标签做特殊的预加载处理。

第二步：按需加载逻辑实现 #

两种触发方式可以二选一，也可以同时支持（滚动到位置自动加载，没滚动到的时候点击也能加载）。

1. 点击触发加载（首屏性能最优，无任何Maps相关提前请求） #

给触发按钮绑定点击事件，用户点击时才动态创建iframe标签插入容器，此时才会真正发起Maps API的资源请求：

document.querySelectorAll('.lazy-map-container button').forEach(triggerBtn => {
  triggerBtn.addEventListener('click', () => {
    const container = triggerBtn.closest('.lazy-map-container');
    const realSrc = container.dataset.realSrc;
    // 动态创建iframe，此时设置src才会发起网络请求
    const mapIframe = document.createElement('iframe');
    mapIframe.src = realSrc;
    mapIframe.style.cssText = 'width:100%;height:100%;border:0;';
    mapIframe.allowFullscreen = true;
    // 替换占位内容
    container.innerHTML = '';
    container.appendChild(mapIframe);
  })
})

2. 滚动进入视口自动加载 #

如果需要用户滚动到地图位置时自动加载，用IntersectionObserver实现监听，比传统scroll事件性能好很多，可以设置提前加载阈值避免用户看到空白：

const iframeObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 进入可视区域范围时才加载
    if (entry.isIntersecting) {
      const container = entry.target;
      const realSrc = container.dataset.realSrc;
      const mapIframe = document.createElement('iframe');
      mapIframe.src = realSrc;
      mapIframe.style.cssText = 'width:100%;height:100%;border:0;';
      mapIframe.allowFullscreen = true;
      mapIframe.loading = 'lazy';
      container.innerHTML = '';
      container.appendChild(mapIframe);
      // 加载完成后取消监听，避免重复触发
      iframeObserver.unobserve(container);
    }
  })
}, {
  rootMargin: '200px 0' // 距离视口还有200px时提前开始加载，优化体验
})

// 注册所有需要懒加载的地图容器
document.querySelectorAll('.lazy-map-container[data-real-src]').forEach(container => {
  iframeObserver.observe(container);
})

必看避坑项 #

• 不要在页面<head>里提前添加Google Maps相关的preconnect、dns-prefetch标签，这类标签会让浏览器提前和Maps服务器建立连接，同样会被PageSpeed判定为首屏不必要的网络请求
• 不要直接用第三方懒加载库的iframe懒加载功能，绝大多数这类库的实现是初始就渲染iframe，只是把src临时替换为空白页，依然会触发浏览器的iframe预解析逻辑，无法通过PageSpeed检测
• 占位容器一定要设置固定宽高比，不然iframe插入后会引发布局偏移，拉低性能得分

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