NextJS中afterInteractive策略仍被PageSpeedInsights判定为加载阻塞

问题分析 #

本地Lighthouse测试无阻塞，但PageSpeedInsights检测到阻塞，核心原因是两者测试环境的差异：PageSpeedInsights会模拟真实慢网络环境（如3G），且更严格评估脚本对首屏渲染的影响。即便使用lazyOnload或afterInteractive策略，gtag的初始化逻辑仍可能在关键渲染路径上产生阻塞。

可行解决方案 #

1. 延迟页面视图发送，分离初始化与核心渲染 #

将gtag('config')的页面视图发送逻辑从初始化脚本中剥离，避免在页面加载初期触发网络请求，减少对首屏渲染的影响：

修改_app.js中的Script组件：

<Script
  id="googleAnalytics0"
  src="https://www.googletagmanager.com/gtag/js?id=XXX"
  strategy="lazyOnload"
/>
<Script
  id="googleAnalytics"
  strategy="lazyOnload"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){window.dataLayer.push(arguments);}
      gtag('js', new Date());
      // 禁用自动页面视图发送
      gtag('config', 'XXX', { send_page_view: false });
    `
  }}
/>

随后在_app.js中使用useEffect手动触发页面视图：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof gtag !== 'undefined') {
      gtag('event', 'page_view', {
        page_path: window.location.pathname + window.location.search,
        page_title: document.title
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

2. 显式声明异步属性 #

虽然NextJS的Script组件会自动处理加载策略，但显式添加async和defer属性，部分场景下可优化PageSpeed的检测逻辑：

<Script
  id="googleAnalytics0"
  src="https://www.googletagmanager.com/gtag/js?id=XXX"
  strategy="lazyOnload"
  async
  defer
/>

3. 拆分脚本加载策略 #

将gtag基础脚本用beforeInteractive策略加载（服务器端注入到head），确保基础资源提前加载但不阻塞首屏；初始化脚本仍用lazyOnload延迟执行：

<Script
  id="googleAnalytics0"
  src="https://www.googletagmanager.com/gtag/js?id=XXX"
  strategy="beforeInteractive"
/>
<Script
  id="googleAnalytics"
  strategy="lazyOnload"
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){window.dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'XXX', { send_page_view: false });
    `
  }}
/>

同样配合上述useEffect代码手动发送页面视图。

验证 #

修改完成后重新提交到PageSpeedInsights测试，注意：PageSpeed的缓存可能需要几分钟更新，建议清除缓存后再次检测。

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