你是否遇過這樣的情況：網站畫面已經顯示完成，也能正常操作，但瀏覽器分頁左上角的載入圖示卻一直轉個不停，好像還在載入某些內容？這不但讓使用者感到困惑，也可能影響網站的專業形象與信任感。
這篇文章將分享我們近期協助排查網站效能問題的經驗，並說明這類「載入指示器無法停止」的背後原因與解決方法，希望幫助你快速找出癥結點，優化網站體驗。
一、我們遇到的真實案例：追蹤碼造成 Pending
最近收到反應網站載入速度變慢的詢問，畫面雖然正常顯示，卻長時間停留在「載入中」狀態。為協助排查問題，我們啟用了 Chrome 開發者工具（DevTools），在 Network 分頁觀察資源載入情況。
經過分析後，發現問題出在一段第三方追蹤碼：
https://sp.analytics.yahoo.com/sp.pl這是來自 Yahoo 的分析追蹤碼，雖然不是網站主要功能的一部分，但在某些情況下會造成 「pending」狀態——也就是瀏覽器持續等待這段資源的回應，導致載入指示器無法結束。
二、為什麼會發生這種現象？
這類問題常見於網站中使用的第三方服務載入失敗或錯誤配置。以下是經常遇到的幾種原因：
✅ 第三方分析服務回應錯誤
常見服務：Yahoo Analytics、舊版 SDK 等
錯誤狀況：HTTP 500（伺服器錯誤） 結果：雖然畫面正常，但 pending 狀態讓瀏覽器認為尚未完成載入
（上圖顯示狀態 Pending）
✅ 錯誤處理頁面載入失敗
例如：JavaScript 程式導向 /error 頁面，但該頁並不存在
錯誤狀況：HTTP 404（Not Found）
結果：瀏覽器試圖載入不存在的資源，也會導致延遲與持續載入狀態
（上圖顯示狀態 404 ）
三、解決方法與建議
本次案例問題主要發生在第三方追蹤碼的部份，在確認 Yahoo 追蹤碼並非網站必要功能後，我們引導並協助進行相應的處理後，立即改善了載入速度。
以下提供解決的步驟建議：
建議一：移除不必要的第三方服務
若追蹤碼已無實際用途，建議從原始碼或 Google Tag Manager 中完整移除
若仍需使用，可改為非同步載入，避免阻塞主流程：
<script async src="https://example.com/sp.pl?..."></script>
建議二：處理錯誤頁面請求
若有導向 /error 等錯誤頁面，請確認該頁面存在
或從原始碼中移除對這類錯誤頁面的請求，避免無意義的 404 請求
建議三：清除快取與重整驗證
完成設定後，清除網站與 CDN 快取
重新整理頁面，確認資源是否成功載入，載入指示器是否正常停止
四、如何驗證是否已解決？
修正後，可以透過 DevTools 再次確認以下幾點：
所有資源是否皆為 HTTP 200 成功狀態
是否還有紅字錯誤或 pending 請求
瀏覽器左上角的「載入中」旋轉圖示是否能順利結束
效能小細節，體驗大影響
這類「載入指示器無法停止」的問題，雖然不一定會影響網站功能，但對使用者來說卻是一個警訊，容易誤以為網站還沒載完或出現錯誤。原因可能只是某段非必要的追蹤碼或失敗請求，但帶來的負面印象卻不容忽視，透過簡單的工具與排查邏輯，就能快速找出問題、對症下藥，提升使用者體驗！
歡迎轉載！請見：轉載原則。
Image by AI-generated via ChatGPT / DALL·E
