2026.11.02

用 Microsoft Edge Network 找出拖慢網頁的大圖片

網頁載入慢時，原因可能是伺服器回應、網路狀況、指令碼或圖片檔案過大。Microsoft Edge 開發人員工具的 Network（網路）面板能列出頁面載入時提出的資源要求，協助找出圖片請求的檔案大小與耗時。以下以檢查一個首頁為例，找出可能需要壓縮或調整尺寸的圖片。

開啟 Network 面板並重新載入

在 Edge 開啟要檢查的網頁，按 F12，或按一下右上角「設定及其他」→「更多工具」→「開發人員工具」。開發人員工具出現後，選取 Network 分頁。若分頁列未顯示 Network，可按分頁列上的更多分頁按鈕尋找。

保持 Network 面板開啟，再重新整理網頁，讓面板記錄這次載入提出的要求。若要檢查頁面從頭載入的情況，重新載入後等待頁面主要內容顯示及要求完成。記錄會列出檔案名稱、狀態、類型、大小和時間等欄位；畫面寬度不足時，可調整面板大小或水平捲動查看欄位。

用 Img 篩選圖片要求

按一下 Network 工具列上的 Img 篩選器，只留下圖片類型的要求。若看不到篩選按鈕，可在篩選列輸入類型條件，或確認目前選取的是 Network 面板。依 Size 欄位排序或逐列比較，找出傳輸量較大的圖片；若欄位顯示為快取來源或大小資訊不完整，點選該列並檢查詳細資料，避免只根據檔名判斷。

接著查看 Timing 欄位或要求詳細資料中的 Timing 分頁，了解要求在排隊、連線、等待伺服器回應及接收資料等階段所花時間。若圖片傳輸大小明顯偏大，而且接收資料時間較長，它可能是改善候選；但單一欄位不能證明圖片就是整體載入慢的唯一原因。也要看狀態碼、網路條件、圖片尺寸與頁面是否採用延遲載入。

判讀快取與測試限制

快取會影響測試結果。若資源直接從瀏覽器快取提供，大小或耗時可能與首次造訪不同。Network 面板通常提供停用快取的選項，但只在開發人員工具開啟時套用；勾選後重新載入，可比較不使用瀏覽器快取時的結果。完成比較後，取消選取，再以一般瀏覽情境測試。無痕視窗、擴充功能、登入狀態、網路速度和伺服器負載也都可能改變結果。

每次測試都應記錄一致的頁面、載入方式與快取設定，避免把不同條件下的數字直接比較。網頁圖片也可能由 CSS 背景載入，或以其他資源形式出現；Img 篩選未必涵蓋所有與視覺相關的檔案。這項檢查適合定位線索，不是完整的效能稽核。

確認改善並安全分享紀錄

記下可疑圖片的檔名、Size、Timing 及測試時的快取狀態。
若你有權管理網站，可考慮提供符合顯示尺寸的圖片、使用適當格式或壓縮，再以相同條件重新載入比較。
比較修改前後的圖片要求大小與載入時間，並在實際頁面確認圖片清晰、尺寸正確、沒有破圖。
若改善不明顯，重新檢查其他圖片及非圖片要求；不要單憑一次測試下結論。

Network 紀錄可能包含網址、查詢參數、Cookie、授權標頭或其他敏感資料。分享截圖、匯出紀錄或貼上內容前，先檢查並遮蔽個資、登入憑證、內部網址及識別資訊。可參考使用 ShareX 遮蔽截圖敏感資料。Edge Network 面板欄位及操作細節請參閱Microsoft Edge 開發人員工具 Network 參考資料。