2026年8月13日

Shopify 網店速度優化：先查 LCP、INP、CLS，不要急着刪動畫

先說結論

改善速度不是把動畫全部關掉，也不是只追求一次 Lighthouse 評分。先用真實訪客數據判斷 LCP、INP、CLS 哪一項有問題，再檢查對應範本、圖片和程式碼。視覺效果可以保留，但不能拖慢首屏內容或阻礙操作。

Shopify 網店一慢，最常見的做法是壓縮圖片、移除應用程式、關掉動畫。三件事都可能有效，但次序不對，很容易削弱頁面設計，問題卻仍然存在。Google 的 Core Web Vitals 將體驗分為載入、互動與視覺穩定性；Shopify 的佈景主題效能指引亦建議減少 JavaScript、適當使用 HTML 和 CSS，並延後載入非必要資源。

先確認是哪一種慢

指標	客戶感受到的問題	優先檢查
LCP	首屏主要內容遲遲未出現	主視覺圖片、字體、首屏 CSS、伺服器回應
INP	按下篩選、加入購物車或選單後反應慢	第三方程式碼、事件處理、長任務、佈景主題元件
CLS	圖片、按鈕和文字在載入時移位	圖片尺寸、字體替換、非同步元件的預留空間

PageSpeed Insights 適合用來找問題，但不要只看一次測試評分。促銷程式碼、地區、裝置和網絡都會令結果波動。較可靠的做法是結合 Search Console 的 Core Web Vitals 數據、Shopify 網站效能報告和瀏覽器 Performance 面板，按頁面範本分類檢查。

按範本逐步檢查，不要全站一起改

先選重要的銷售頁面。 優先處理首頁、熱賣商品頁、主要商品系列頁和結帳入口。流量較低的文章頁通常不用排在第一輪。
記錄關鍵資源。 找出首屏最大的圖片、字體檔案、同步執行的程式碼，以及載入後才突然出現、令版面移位的區塊。
每次只改一類問題。 圖片、字體和應用程式碼分開上線，才能知道改善來自哪裏。
保留有用的視覺效果。 適合的動畫在進入可視範圍後才啟動，裝飾素材延後載入，並為選擇減少動態效果的訪客提供靜態版本。

Shopify 項目常見的四個原因

多個應用程式為相近功能重複加入程式碼，例如評價、彈窗、追蹤和推薦。
主視覺使用過大的原圖，手機仍下載桌面版尺寸，或圖片沒有指定寬高。
載入太多字體粗幼款式，外部字體到達前首屏版面未能穩定。
佈景主題將所有元件的 JavaScript 包成一個檔案，每頁都執行其實用不到的功能。

WESWOO 會檢查甚麼

先確認導覽、商品資料、價格和加入購物車功能可以正常操作，再看動畫是否流暢。動畫不一定拖慢網站；載入次序、啟動時機和後備顯示方式，才是需要設計好的部分。

交付時留下可覆查的記錄

效能報告至少應列明測試網址、裝置、日期、修改前後的指標，以及對客戶操作的影響。不要只交一張綠色評分截圖。下次更換佈景主題、加入追蹤像素或促銷應用程式時，團隊需要知道哪些資源值得特別留意，避免幾個月後網站又慢下來。

資料來源與核實

本文參考平台官方文件與公開標準。實施前應再次核對最新指引及網店設定。