Drupal站点第三方JS阻塞致Google Insights检测不通过问题咨询

给第三方脚本加async属性无法解决阻塞是必然的：async仅保证脚本下载阶段不阻塞HTML解析，但下载完成后会立刻中断主线程执行脚本。Google Ads、GA、GTM及其他Google SDK普遍执行耗时在100ms-500ms区间，只要触发时机落在页面初始渲染窗口内，就会拉高总阻塞时间（TBT）、拖慢最大内容绘制（LCP），必然触发PageSpeed Insights的第三方JS阻塞告警。

• 彻底弃用Drupal后台默认的Google服务集成模块（包括官方GTM模块、GA模块、广告管理模块），这类模块仅支持基础的async配置，没有延迟触发逻辑，无法满足性能要求
• 所有Google系第三方脚本统一改为「页面空闲加载+用户交互兜底触发」逻辑，完全避开初始渲染阶段的主线程和带宽占用
• 该方案数据丢失率低于1%：只要在用户首次交互前完成脚本加载，统计归因、广告请求的准确性不会受影响，符合业务要求

1. 通用延迟加载逻辑（覆盖所有提到的Google脚本） #

以下逻辑优先在浏览器空闲时段加载脚本，若用户提前触发滚动、点击、触摸等交互行为，会立刻提前加载脚本，兼顾性能和功能可用性：

const googleScriptList = [
  // 替换为你自己的GTM脚本地址
  'https://www.googletagmanager.com/gtag/js?id=GTM-XXXXXX',
  // 替换为你自己的GA脚本地址
  'https://www.google-analytics.com/analytics.js',
  // Doubleclick广告脚本地址
  'https://securepubads.g.doubleclick.net/tag/js/gpt.js',
  // 其他Google API/SDK地址按需追加
];

let isLoaded = false;
const injectGoogleScripts = () => {
  if (isLoaded) return;
  isLoaded = true;

  // 移除所有交互监听，避免重复执行
  ['scroll', 'mousemove', 'touchstart', 'click'].forEach(event => {
    window.removeEventListener(event, injectGoogleScripts);
  });

  // 批量注入脚本
  googleScriptList.forEach(srcUrl => {
    const scriptEl = document.createElement('script');
    scriptEl.src = srcUrl;
    scriptEl.async = true;
    scriptEl.defer = true;
    if (srcUrl.includes('doubleclick')) {
      scriptEl.crossOrigin = 'anonymous';
    }
    document.body.appendChild(scriptEl);
  });

  // 如需初始化GTM/GA，取消下方注释并替换为你自己的配置ID
  // window.dataLayer = window.dataLayer || [];
  // function gtag(){dataLayer.push(arguments);}
  // gtag('js', new Date());
  // gtag('config', 'GTM-XXXXXX');
};

// 优先在浏览器空闲时加载，设置3秒超时兜底
if (window.requestIdleCallback) {
  requestIdleCallback(injectGoogleScripts, { timeout: 3000 });
} else {
  setTimeout(injectGoogleScripts, 3000);
}

// 用户产生任意交互时立刻提前加载
['scroll', 'mousemove', 'touchstart', 'click'].forEach(event => {
  window.addEventListener(event, injectGoogleScripts, { passive: true });
});

2. Drupal站点部署方式 #

• 先在Drupal后台的模块管理页面，禁用所有之前用来注入Google脚本的第三方集成模块，清空已有配置，避免脚本重复加载
• 代码部署二选一即可：
  • 方式一：将上述代码写入当前启用主题的.theme文件，通过hook_page_attachments挂载到全站页脚位置，不放入页面头部
  • 方式二：把代码包裹在<script>标签内，添加到Drupal后台「结构-区块布局」下的自定义页脚区块，设置区块在所有页面的页脚区域展示，开启区块的「绕过缓存」配置
• 部署完成后清空Drupal全站缓存，再重新检测即可

• 如果站点首屏有固定展示的Google广告位，不要对对应广告脚本使用全量延迟，可单独将该脚本的延迟时间设置为2秒，平衡性能和广告展示收益
• 不要给Google相关域名配置preconnect预连接，该配置会在页面初始加载阶段抢占带宽，反而拖慢首屏自有资源的加载速度
• 如果站点开了JS聚合压缩，不要把上述延迟逻辑代码和其他业务JS聚合到首屏加载包内，保持独立在页脚输出即可

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