Shopify 速度優化：修結構性瓶頸而非分數（DebugBear）
核心論點：Lighthouse 分數、Core Web Vitals 這些表層指標解釋不了為什麼很多 Shopify 店家「感覺很慢」。真正的效能來自修結構性瓶頸：過重的 hero 區塊、失控的 app 腳本、沒效率的資產載入、糟糕的執行策略。內容雖以 Shopify 為例，但技巧多為通用前端效能。
快速重點（依主題）
Hero / above-the-fold（最影響 LCP）
- Hero 圖從 300–400KB（甚至 900KB+）壓到 < 180KB 但維持銳利度。
- 影片 hero：先放輕量 poster 圖，主內容渲染完再載影片（案例 LCP 從 9s+ → 2.7s）。
- 避免重量級輪播庫（Swiper.js / Splide.js 各 30–40KB，會 render-block + layout shift），改用輕量 CSS/JS 自刻。
- 第一張輪播圖
fetchpriority="high"，其餘fetchpriority="low"。
圖片尺寸與壓縮
- 用 Shopify 的
image_urlLiquid filter 產生多尺寸變體，讓瀏覽器依裝置選寬度（含 DPR 考量）。 - 適當壓縮可減 40–70%（500KB → 150KB），但要平衡模糊/色帶（精品/時尚尤其）。
JavaScript / App 管理
- 條件式載入：腳本只在需要的頁面載（加購腳本只在商品頁）。
- 非關鍵 JS 用
defer或放</body>前，讓 HTML 繼續解析。 - 清掉重複庫（重複 jQuery / Alpine.js / 兩套輪播庫）。
- 選高評價 app、移除沒用/廢棄 app；必要時自刻（自刻購物車 + 免運 bar 6KB vs. app 版 540KB）。
CSS 架構
- 依頁面分檔：全域放
base.css、頁面專屬放對應檔（商品頁product.css），降低每頁 render-blocking CSS。 - 用
{% javascript %}/{% stylesheet %}Liquid 標籤避免 section/block 重複時 CSS/JS 被重複渲染。
字型
- Font subsetting：移除用不到的字集（英文站移除 Cyrillic/Arabic/中文），可減 40–50%（工具 Font Squirrel）。
網路優先序
- Preload 主要自訂字型降低 FCP 延遲；
font-display: swap讓 fallback 先顯示。 fetchpriority="high"給 hero 圖與首屏前 1–4 張商品圖；below-fold 用low。- 絕不 lazy load above-fold 圖（會惡化 LCP）；below-fold 用預設 lazy 或 Intersection Observer（可調
rootMargin）。
值得我另外深入研究的點
fetchpriority屬性：high/low 對 LCP 的實際影響、與 preload 的差異與搭配。→ 關聯 LCP (Largest Contentful Paint)- Intersection Observer 的
rootMargin：自訂 below-fold lazy load 的提前量，比原生loading="lazy"更可控。→ 關聯 Day11 X Lazy Loading - iT 邦幫忙!一起幫忙解決難題，拯救 IT 人的一天 - responsive images（
image_url/ srcset / DPR）：多尺寸變體與瀏覽器選圖規則（非 Shopify 場景就是srcset/sizes）。 defervsasyncvs 放 body 尾：三者對 render-blocking、執行順序、INP 的差異。→ 關聯 INP (Interaction to Next Paint )- font subsetting +
font-display：subset 工具鏈、swap/optional 的取捨與 CLS 風險。→ 關聯 CLS (Cumulative Layout Shift) - 「分數 vs 真實體感」：為何 Lighthouse 分數不等於使用者感受，RUM（真實使用者監測）補位。→ 關聯 前端效能優化及指標
- DebugBear 工具：synthetic + RUM + TTFB test，可當監測工具評估。