Nuxt 3 博客广告位拖慢页面：我把广告改成路由空闲加载和固定占位

博客接了广告后，最直观的变化不是收入，而是首屏变慢了。打开文章页，正文还没完全稳定，广告位先开始加载，页面跳一下，滚动也跟着卡。查了一圈发现，问题主要出在第三方广告脚本加载太早、广告位高度不固定，以及路由切换时组件重复初始化。

先把问题拆开：重复初始化、CLS、首屏阻塞

广告平台的脚本通常会注入容器、iframe 或异步资源。如果广告位没有固定高度，加载完成后会把正文顶开，CLS 就会很明显。另一个坑是 Nuxt 3 路由切换时，广告组件可能重新挂载，如果每次都直接调用初始化方法，容易出现重复初始化，甚至重复请求。对读者来说，体验变差；对 SEO 来说，页面稳定性和加载速度也会受影响。

我的处理：路由空闲再加载，占位先稳住

1. 给广告位固定容器高度或比例，先占位，避免加载后跳动。
2. 路由进入后不立即加载广告，先保证正文可读。
3. 用 IntersectionObserver 监听广告位，接近视口时再加载。
4. 广告脚本全局只加载一次，路由切换只重置展示状态，不重复初始化。

const route = useRoute()
const loaded = ref(false)
const el = ref<HTMLElement>()
onMounted(() => {
  const io = new IntersectionObserver(([entry]) => {
    if (!entry.isIntersecting) return
    loaded.value = true
    io.disconnect()
  }, { rootMargin: '300px' })
  if (el.value) io.observe(el.value)
})
watch(() => route.fullPath, () => {
  loaded.value = false
})

这里我没有在路由变化时直接销毁全局广告脚本，而是只重置当前广告位是否展示。因为脚本一旦反复插入，很容易造成重复执行和闪烁。如果广告平台要求每次路由后刷新广告，具体做法以官方文档为准，最好再加一个去重标记或短防抖，避免连续跳转时频繁触发。

效果与取舍：体验优先，但别把广告藏没

改完后，首屏少了一个第三方脚本，正文区域稳定很多，文末广告也不会突然把页面顶开。需要注意的是，延迟加载不能无脑做。若广告位本身就在首屏，延迟太久会影响展示；若是文末或侧边广告，等用户滚动到附近再加载会更合适。个人站做广告，先保住阅读体验，再观察展示和点击变化。

“广告优化的核心不是删掉广告，而是让页面先可读，让广告在合适时机出现。”