第三方脚本治理：统计、客服、广告的延迟加载与减负

引言：装了五个插件首页慢一倍

一个典型 WordPress 站常挂着 GA、GTM、Facebook Pixel、在线客服、分享按钮，加起来十几个第三方 JS。它们同步执行、互相阻塞，主线程被占满，INP 与 LCP 一起崩。

原理分析：第三方脚本的三类开销

1. 下载：每个脚本一次网络往返。
2. 解析执行：占主线程，长任务来源。
3. 连锁：GTM 触发后又加载更多标签，雪崩。
   治理三招：延迟（defer/load 后）、按页禁用（不需要的页不加载）、合并（用一个容器管理）。

保姆级实操

GTM 延迟到 load：

window.addEventListener('load', () => {
  const s = document.createElement('script');
  s.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX';
  document.head.appendChild(s);
});

按页禁用脚本（Asset CleanUp / Perfmatters）：在插件后台勾选”首页不加载 chat 插件””文章页不加载对比表脚本”。或用代码：

add_action( 'wp_enqueue_scripts', function () {
    if ( is_front_page() ) wp_dequeue_script( 'chat-plugin-js' );
}, 100 );

常见踩坑

1. GTM 容器一次触发 30 个标签全首屏，主线程爆。
2. 客服脚本全站加载，后台也卡。
3. 案例：某站 INP 340ms，查 web-vitals 日志最差交互在首页”悬浮客服弹出”。把客服脚本延迟到 load 且首页禁用，INP 降到 130ms。
4. defer 了却没测，关键转化脚本变慢。
5. 多个分析工具重复统计，浪费请求。

总结

判断标准：首屏不含非关键第三方脚本、INP≤200ms。行动清单：列全部第三方 JS → 延迟非关键 → 按页禁用 → 合并 GTM 标签 → 字段复测。详见INP 优化思路。