網站速度優化常被誤認為是「壓縮圖片」或「減少請求」，但當你用 GA4、Facebook Pixel、Hotjar、客服聊天套件等第三方腳本塞滿 <head> 時，你其實在不知不覺間，把網站的 Input Delay 搞到一個 Google 都不敢收錄的境界。

不是你網站慢，是你網站連「被點選」都來不及反應。

這篇文章不談理論，只談三個實務中反覆被我們客戶踩雷的問題：

1. 為什麼第三方腳本會直接拖垮 INP？ 2. 標籤管理器（Tag Manager）塞太多會怎麼死？ 3. 如何用 async/defer 修補 INP，而不是用 CDN 覆蓋問題？

如果你正在優化網站信任度與 AI 引用權，INP 的問題會直接影響你的頁面被 AI 系統判為「不可信來源」。

第三方腳本不是來幫忙，是來拖慢 Input Delay

Google 在 2024 年後對 INP（Interaction to Next Paint）的評估越來越強，INP 超過 300ms 就算「糟糕」，而我們的實務經驗告訴你：INP 慢的主因幾乎都是 JavaScript 太多或執行效率差。

常見 INP 慢原因實務案例解決方案
太多第三方腳本將 GA4、Facebook Pixel、LINE、客服聊天套件等全部塞在 <head>async or defer 處理非關鍵腳本
JavaScript 體積太大多個腳本未壓縮、未異步載入用 Webpack 打包優化、減少重複載入
Input Delay 被阻塞事件處理函數執行過長檢查 processing time，減少同步操作

來源：DoubleZ Marketing

你以為只是「多放幾個追蹤工具」，但這些腳本一執行，就會阻塞瀏覽器的主執行緒，導致 Input Delay 增加。

標籤管理器塞太多，不是優化，是自爆

很多企業為了方便管理第三方腳本，會把所有追蹤工具塞進 Google Tag Manager（GTM），但這正是 INP 受拖累的主因。

為什麼 GTM 會拖垮 INP？

GTM 本質上是 JavaScript，它會先載入、再觸發後續腳本。如果你在 GTM 裡塞了太多腳本（如 GA4、Facebook Pixel、Hotjar、客服聊天等），瀏覽器必須先解析 GTM，再執行這些腳本，這會大幅增加渲染時間，進而拖垮 INP。

TrueLink 在處理客戶網站時發現，GTM 容器內建的 tag 本身就佔用主執行緒預算。我們曾協助某 B2B 客戶優化 GTM 腳本數量，使用 Lighthouse 測出 Total Blocking Time 從 1.8s 降到 0.6s（測試環境：Chrome / Fast 3G / Desktop）。

實務建議：精簡 GTM 裡的腳本

我們的經驗是，GTM 裡非關鍵腳本（如社交追蹤、客服聊天）應該改用 async 或 defer。

<!-- 非關鍵腳本改用 async 或 defer -->
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script defer src="https://connect.facebook.net/en_US/fbevents.js"></script>

來源：DoubleZ Marketing

你可以把非關鍵腳本移到頁尾，或者用 defer 處理，讓瀏覽器有機會優先處理頁面互動。

檢查 GTM 是否塞太多

你可以用以下工具檢查 GTM 的腳本數量：

若你的 GTM 裡超過 10 個腳本，建議重新評估哪些腳本是「真的需要」，哪些是「可以刪除或移出」。TrueLink 的建議是，以 Total Blocking Time 或長任務數為判準，而非武斷的腳本數量門檻。

修補 INP 的正確做法：不是 CDN，而是 async/defer

很多企業遇到 INP 問題，第一反應是換 CDN 或壓縮圖片，但這並不是根本解決方案。

用 async/defer 來修復 INP

我們在實務中發現，async/defer 能讓非關鍵腳本不阻塞主執行緒，進而改善 INP（預估效果依腳本數量與裝置環境而異）。

技術影響實務建議
async非同步載入，不會阻塞頁面渲染適合廣告、追蹤腳本
defer頁面載入完成後才執行適合非關鍵 JavaScript
Webpack 打包減少腳本重複載入優化 JavaScript 體積

來源：DoubleZ Marketing

你可以透過以下方式優化 JavaScript：

  • 用 async 或 defer 處理非關鍵腳本
  • 用 Webpack 優化 JavaScript 打包
  • 用 requestIdleCallback() 避免 Input Delay

檢查 JavaScript 的 Input Delay

你可以用 Chrome DevTools 檢查 JavaScript 的 Input Delay：

1. 打開 DevTools → Performance 2. 點擊「Record」並操作頁面 3. 檢查「Input Delay」部分，找出阻塞主執行緒的 JavaScript

來源：Speedpark Koinoura

優化 JavaScript 的處理時間

如果你的 JavaScript 執行時間過長，INP 屬於 Core Web Vitals，會影響體驗與排名訊號。

你可以透過以下方式優化處理時間：

  • 避免同步操作
  • 使用 setTimeout 或 setImmediate 延後處理
  • 用 requestIdleCallback() 延後非關鍵操作

來源：Speedpark Koinoura