Adyen、Nuvei、SwiftPass:支付整合對 SEO 嘅隱形稅

每個香港電商網站都有個 checkout 頁面。呢個 checkout 頁面幾乎都係網站上最慢嘅頁面 —— 同呢種慢嘅 SEO 懲罰比多數團隊意識到嘅大得多。元兇唔係你嘅代碼。係你被要求加載嘅第三方支付腳本。呢篇文章拆解每個 gateway 嘅成本、LCP 預算去咗邊、同點樣 defer 啱嘅 calls 而保住轉化同 Core Web Vitals 兩方面。

點解支付頁面係 SEO 犯罪現場

多數 SEO 對話入面講 Core Web Vitals 都集中喺主頁或分類頁。呢啲頁面對自然流量有用 —— 但通常已優化得好,因為營銷團隊喺度做咗多年。Checkout 頁面係另一種故事。工程擁有佢。營銷好少睇。SEO 審計經常 skip 佢,因為佢喺認證後面。而佢通常係整個網站上 LCP 最差嘅頁面。

Google 越嚟越清晰:用戶體驗信號係全網站範圍,唔只係營銷頁面。如果你嘅 checkout 頁面對相當比例嘅用戶持續攞差 LCP 分數 (而佢哋永遠咁做),佢會拖低你 domain 嘅整體 CrUX 數據,而 Google 用呢啲做網站其他部分嘅排名信號之一。Checkout 頁面嘅表現都係你主頁嘅問題。

我哋喺香港見到嘅三個 gateway profile

多數香港商家都喺以下其中一個支付 stack。每個都有唔同嘅成本 profile。下面嘅數字嚟自我哋整合工作時嘅 Lighthouse trace —— 你嘅情況視乎係邊個版本嘅 Adyen Drop-in、邊個 Nuvei 產品、係跑 SwiftPass merchant SDK 定 iframe checkout 而有差異。

Gateway	典型腳本重量	同步加載時 LCP delta	香港特定備註
Adyen Drop-in	~180-260 KB gzipped	+400-700ms	多數香港企業嘅主要 acquirer。Drop-in 係較重嘅選擇;Web Components 係較輕。
Nuvei (Sofort/iframe)	~120-180 KB gzipped	+300-500ms	香港 marketplaces 常用。iframe checkout 將 LCP 成本 shift 去 iframe 但加 CLS 風險。
SwiftPass (UnionPay/微信/支付寶 HK)	~80-140 KB gzipped	+250-450ms	每商家 config 唔同;有啲香港 SwiftPass 部署加 credentials-fetching round-trips。
Stripe	~110 KB gzipped	+200-400ms	Stripe.js v3 加 lazy elements 最快。避開 legacy Checkout flow。

呢個係 per-gateway 嘅摘要。對於同時接受卡 同 微信支付 HK 同 支付寶 HK 嘅香港商家,腳本經常會 stack —— 即係 Adyen 用卡 加上 SwiftPass 用本地錢包。Stack 兩個 gateway 你輕易就喺自己代碼運行之前已經 800-1200ms LCP 懲罰。

拆 LCP 嘅 naive 整合

多數團隊跟 vendor docs 整合支付 SDK —— 喺 checkout 頁面頂部一個 script tag 同步加載,然後喺 useEffect 或 componentDidMount 入面 init。pattern 大致係咁:

// 多數團隊 ship 嘅 pattern —— 同多數審計 flag 嘅
<script src="https://checkoutshopper-live.adyen.com/.../adyen.js"></script>

useEffect(() => {
  const checkout = await AdyenCheckout({...})
  checkout.create('card').mount('#card-container')
}, [])

兩件事錯咗。第一,script 喺 document head,block 其餘頁面 render 到佢下載完。第二,initialization 喺 mount 上面跑 —— 喺 server-rendered 頁面上面即係 JS 喺 hydration 完之前都未開始,但用戶已經睇到頁面。所以支付 widget 遲先出現,喺用戶眼睛已經喺 checkout button 上面之後。

保住 LCP 同轉化嘅 defer pattern

修復概念上 straightforward 但執行需要小心。我哋喺 Synque 整合 ship 嘅 pattern 係:

1. 用 defer + lazy 策略加載 gateway script,唔放 head。Script 同 render 並行下載,喺 document 解析完之後執行。
2. 用明確 height reserve 支付 widget container (例如 min-height: 220px)。Widget 稍後 mount 嗰陣會 slot 入個預留 space,CLS 保持零。
3. 喺 LCP 穩定後初始化 gateway。 Trick 係用 requestIdleCallback 或 200-300ms setTimeout delay init 到瀏覽器畫完其餘頁面之後。用戶快啲見到 checkout 表單;支付 widget 慢一拍 hydrate。
4. 喺預留 space 顯示 skeleton 直到 init 完成。 視覺反饋防止用戶以為頁面壞咗。

// Synque 整合 ship 嘅 pattern
<Script
  src="https://checkoutshopper-live.adyen.com/.../adyen.js"
  strategy="lazyOnload"
/>

// 預留 container —— CLS 安全
<div
  id="card-container"
  style={{ minHeight: 220 }}
>
  <SkeletonLoader />
</div>

// Defer init 到 idle
useEffect(() => {
  const id = window.requestIdleCallback?.(initCheckout)
    ?? setTimeout(initCheckout, 200)
  return () => window.cancelIdleCallback?.(id) ?? clearTimeout(id)
}, [])

我哋喺真正商家整合上量度過:應用呢個 pattern 將 checkout 頁面嘅 LCP 由 3.8 秒移到 1.9 秒,無可量度地影響支付成功率。用戶更快見到 checkout 表單;支付 widget 比之前遲 200-300ms 出現,但喺用戶仲未望嗰個 space 嗰陣。

唯一不應該 defer 嘅:3DS challenge flow

呢個 pattern 有一個地方需要小心:3DS challenge step。當用戶 click「付款」而銀行嘅 3DS challenge 觸發,gateway 要即時回應。如果你 defer 咗 gateway script 而喺用戶 click 嗰陣未完全 init,你就會喺 click 同 challenge 之間有可感知嘅 delay —— 而呢度就係用戶放棄嘅地方。

正確做法係 defer 初始 render,但 preload gateway script 並喺用戶可以同「付款」button 互動之前完全 ready。Init timer 喺頁面加載後 ~200ms 開始;到用戶輸入完卡資料,gateway 已經完全 bootstrap。我哋為 /pay-bills 同 Synque /pos checkout ship 過呢個 —— 對比同步加載嘅 baseline,轉化無可量度影響。

點解香港特定嘅 gateway 選擇改變數學

香港商家面對一個地區獨特嘅選擇:接受邊個錢包。微信支付 HK 同支付寶 HK 對特定客戶層 (跨境旅遊、餐飲、零售) 必要,但係由 SwiftPass 服務,有自己嘅 script 重量。FPS 係 server-side flow,對你嘅 LCP 無影響。UnionPay Online Payment 視乎合約經 SwiftPass 或 Adyen。

對 SEO 嘅實際含意:如果你可以將高流量產品頁面 route 去單一 gateway 同保留多 gateway flow 到實際 checkout,你就喺 Google 最關心嘅頁面上慳到 SEO 懲罰。每頁 stack 所有 gateway 係常見錯誤。

Synque 整合筆記 —— 我哋嘅 /pos 同 /pay-bills 平台預設 ship defer pattern。我哋為客戶整合 Adyen、Nuvei、SwiftPass —— SEO 紀律係 built into 整合,唔係事後 bolt-on。更廣 pattern 見 engineering edge 頁。

點問你嘅支付供應商

如果你已經整合並見到 checkout 頁面 LCP 問題,問你支付夥伴嘅問題係:

1. 「你哋有 Web Components 或 Drop-in-lite 版本嗎?」 Adyen、Stripe、Nuvei 都有比完整 Drop-in 更輕嘅替代。可能需要多啲 glue code 但可以將 script 重量減半。
2. 「Script 可以用 defer 或 async 加載嗎?」 多數 vendor 支持;唔係全部都好好 document。對佢哋嘅安全要求做 verify —— 有啲 3DS configuration 需要同步加載。
3. 「你哋 script CDN host 喺邊?」 如果 CDN 喺美國 host 而你服務香港客戶,script-fetch 就花 200ms。有啲 vendor 提供區域 CDN endpoints。
4. 「我哋可以 self-host script (frozen version) 嗎?」 對某啲 gateway 可以;對其他會破壞 PCI compliance。值得問。

想我哋睇下你嘅整合?

支付頁面 LCP 修復係我哋 ship 嘅最高 ROI 改動之一 —— 對其餘 SEO 嘅影響有意義,代碼改動係 contained。喺 WhatsApp 發 URL 畀我哋,我哋會喺免費五日報告入面包括支付頁面審計 —— 具體:邊啲 script 喺 block、LCP 預算點樣、同到達好嘅最小改動 set。

---

延伸閱讀:2026 年 Core Web Vitals —— 真正移動香港 Google 排名嘅嘢 走過更廣嘅 CWV 圖像同點解 TTFB 係香港網站嘅 silent killer。