优化 Next.js 第三方脚本加载策略：提升首屏性能实战

在构建内容型网站或商业站点时，我们常常需要引入多种第三方脚本，如 Google Analytics、广告系统、用户行为追踪等。如果加载策略设置不当，这些脚本容易阻塞页面渲染，导致首屏变慢、用户等待时间增加、核心指标下降（如 LCP、FID）。

本文基于 Next.js 实际项目，详细讲解如何通过合理设置脚本加载策略与懒加载机制，提升页面加载速度，优化用户体验与 SEO 表现。

🎯 目标

• 延迟加载不必要的脚本，避免阻塞渲染
• 使用最合适的 Script strategy 参数
• 提升首屏性能，降低加载压力
• 保持 SEO 和数据统计的完整性

🚀 Next.js 中 Script 的加载策略详解

Next.js 提供的 <Script> 组件支持多种加载策略：

🧪 实战分析：首屏性能优化

我们项目使用了以下第三方服务：

• Google Analytics（网站访问统计）
• AdSense（广告）
• Vercel Analytics / Speed Insights（性能分析）
• Plausible（可选轻量统计）

🧱 原始写法（存在性能问题）

在未优化前，所有脚本都使用 afterInteractive：

<Script
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  strategy="afterInteractive"
/>

🚩问题

• GA 与广告脚本同时加载，加重主线程压力
• 广告脚本过早加载，影响首屏绘制
• 所有逻辑堆叠在 layout 中，不利于维护

✅ 优化思路：懒加载非关键脚本

💡 示例：优化后的 GA 加载

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"
  strategy="afterInteractive"
/>
<Script
  id="gtag-init"
  strategy="afterInteractive"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXX', {
        page_path: window.location.pathname,
      });
    `,
  }}
/>

✅ 优点：

• 加载不阻塞渲染
• 页面渲染完成即能采集数据
• 不影响用户首屏加载体验

💡 示例：懒加载 AdSense 广告

<Script
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
  strategy="lazyOnload"
  crossOrigin="anonymous"
/>

✅ 优点：

• 广告脚本在整个页面完全加载之后才执行
• 避免广告请求拖慢页面速度
• 用户更早看到页面内容，提高访问留存率

⏱ 使用 <Suspense fallback={null}> 包裹次要脚本

<Suspense fallback={null}>
  <GoogleAnalytics />
</Suspense>

适合用于“纯 JS 无 UI 输出”的脚本组件，避免在服务器端渲染时执行，同时保证客户端按需加载。

🧠 最佳实践总结

📈 效果对比（实测）

✅ 优化后：

• 页面加载流畅度更高
• 核心 Web Vitals 得分显著提升
• SEO 与广告收益两者兼顾

🧩 最后：可维护的代码结构建议

虽然优化重点是性能，但为了更清晰可维护，建议将每类脚本封装为组件，例如：

<GA />
<AdSense />
<GoogleAnalytics />

再统一使用 <Suspense> 管理加载时机。

📌 结语

优化脚本加载策略是 Next.js 项目性能提升的重要一环。特别是在多脚本并存的实际项目中，合理使用 strategy、懒加载与 <Suspense>，可以有效减少资源竞争，让用户更快看到页面内容，提升转化与留存。

如果你也正在做性能优化，可以参考上述策略应用在你的项目中。如果你有其他优化经验，欢迎交流探讨！