perf(ratewise): 首頁換算器 CLS=0.237 超標（#441 改版引入，Lighthouse 門檻 ≤0.1）

[s123104]

摘要

RateWise 首頁 /（換算器）的 Cumulative Layout Shift 量測為 0.237，超過 Lighthouse CI 門檻 maxNumericValue ≤ 0.1，在 chore/ratewise-production-governance-v2 整合幹線的 PR 上穩定重現（連續 2 次 rerun 皆 0.237）。

背景 / 證據

• Smoke URLs：/、/faq/、/about/（LIGHTHOUSE_CI_SMOKE_PATHS）；僅 / 含 async 內容（live 匯率 + sparkline 圖表 + rate-basis pill），為位移來源。
• 來源變更：feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441「收編金融級計價基準 SSOT 與計算機即時換算預覽」 改寫首頁 rate card / 圖表 / rate-basis 標籤。
• feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441 自身 PR 的 Lighthouse CI 為 SUCCESS——研判當時靠 CI 時序運氣（CDN 匯率/圖表較快就位）壓在 0.1 以下，底層位移風險已於 feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441 引入。
• 佐證無關性：PR refactor(ratewise): 收斂計算機衍生狀態與計價基準 i18n SSOT #453（calculator/計價 SSOT 內部收斂）對 / 無任何 markup/layout 變更，base 與 feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441 相同，CLS 仍 0.237 → 位移非 refactor(ratewise): 收斂計算機衍生狀態與計價基準 i18n SSOT #453 造成，純繼承自 feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441 baseline。證據：git diff 對 SingleConverter 僅 i18n key 呼叫改寫，輸出字串相同。
• 失敗斷言（Lighthouse log）：cumulative-layout-shift … expected: <=0.1 found: 0.23717…，3 URLs / 15 runs。

影響

• Lighthouse CI 在整合幹線 PR 上持續紅燈，遮蔽真實品質訊號、阻礙後續收斂 PR 綠燈合併。
• 真實 UX：首頁載入時換算卡片/圖表跳動，行動裝置體感與 Core Web Vitals（CLS）受損，影響 SEO。

範圍

• apps/ratewise/src/features/ratewise/components/SingleConverter.tsx（rate card / rate-basis pill / 圖表容器）
• 首頁 sparkline 圖表元件與其載入態
• apps/ratewise/src/index.css / singleConverterLayoutTokens 高度 token
• 不涉及 /faq/、/about/（靜態頁）

建議方向（KISS）

1. 為 async rate card / sparkline 圖表容器在 SSG 預留固定高度（min-h / aspect-ratio），避免資料載入後撐開。
2. rate-basis pill 與 rate 副標使用骨架佔位或固定行高，rates 由 build-time → live 切換時不改變版面高度。
3. 圖表以固定 chartHeight 佔位，載入完成再淡入，不改變容器高度。

驗收標準

• Lighthouse CI 對 / 的 cumulative-layout-shift ≤ 0.1（15 runs 穩定通過）。
• 視覺驗證：首頁冷載入無可見換算卡片/圖表跳動（截圖前後對照）。
• 不回退既有功能（rate-basis pill、計算機預覽、圖表 hover）。
• pnpm --filter @app/ratewise typecheck 與相關 vitest 全綠。

關聯

• 引入：feat(ratewise): 收編金融級計價基準 SSOT 與計算機即時換算預覽 #441
• 觸發發現：refactor(ratewise): 收斂計算機衍生狀態與計價基準 i18n SSOT #453（已合併，證明與本 issue 無關）

[s123104]

已開獨立 hotfix PR（自 main 分支，預留 pill 槽位 + 移除趨勢圖 translate 動畫）。CI 綠燈後 squash merge，再 rebase #433。