JSDC × DevFrontier:效能、SEO 與 AEO 現在是同一條鏈
DevFrontier 聚會的第一屆——這是 JSDC(台灣 JavaScript 社群)為了 AI 時代重新定位後的演化。主講人:邱柏鈞 Leo,KKday Growth Team 的 Senior Frontend Engineer,主題是「效能驅動成長」。
商業論證
演講一開始引用 Think With Google 的數據:載入時間到 3 秒時,跳出率相較 1 秒會上升 32%,而 53% 的行動裝置使用者會直接放棄。優化 Core Web Vitals 對轉換率提升的天花板是 +20%。
這不是耐心問題——這是商業損失。
翻成後端的說法:這就跟你的 /api/checkout P99 拉到 3 秒一模一樣。這不是抽象的技術問題;而是實際反映在營收上、可被量化的購物車放棄率。
什麼是 AEO?
Answer Engine Optimization:以前你優化的對象是 Google 的演算法;現在你還需要讓 Google AI Overview、Gemini、ChatGPT、Claude 跟 Perplexity「理解」你——因為結果不再是使用者點擊進到你的頁面,而是AI 在回答時引用你的內容。
根據 KKday 自己的數據(分析了 84 筆 AI Overview 的引用):73% 被引用的來源都在 SEO 前十名——但排名第一並不保證什麼。他們的反例:關鍵字「大阪一日遊 行程規劃」SEO 排名第一,卻從未被引用,因為那是一個商品列表頁;被引用的頁面反而是排名第五的攻略文章。AI 的判斷標準簡單到近乎殘酷:這個頁面有沒有直接回答使用者的問題? AI Overview 獎勵的不是網域權威,而是直接的實用性。
這次遷移:從 CSR + prerender.io 到 Nuxt SSR
KKday 原本是純 Vue CSR 加上一個 PHP 寫的 BFF,還得付費用 prerender.io 讓爬蟲能看到內容。新架構是:CloudFront(CDN 快取完整 HTML)→ Nuxt(SSR + BFF),搭配兩層快取(本地記憶體 + Redis)。
其中最讓我有共鳴的幾個部分,附上對應的 Spring Boot 概念:
- BFF 平行化:從序列呼叫(約 360ms)改成
Promise.all(約 130ms),直接影響 TTFB 跟 LCP。這就是搭配@Async的CompletableFuture.allOf()。 - 資料分層:同一張商品卡片上,標題跟描述走 SSR + CDN(靜態),但價格跟庫存則是前端直接打 BFF、完全不快取——如果價格被 CDN 快取住,某個使用者就可能看到別人的價格。這就是選擇性的
@Cacheable:快取商品細節,但絕不快取價格。 - 多層快取應付限時搶購:10 萬個並行 request → 9.9 萬個被記憶體快取吸收(約 0.1ms)、999 個交給 Redis(約 2ms),最終只有1 個 request 真正打到微服務。就是老牌的 Caffeine(L1)+ Redis(L2)模式。
- 兩個 CDN 打架的 bug:圖片間歇性失效,以及行動裝置上偶爾閃現桌面版 layout——同一個根因:Cloudflare 跟 CloudFront 用不同的快取策略(
304vs200)回應同一個 URL,而這個網站又是依裝置回傳不同 HTML。這就是少了Vary: User-Agent的@Cacheable。修法:對瀏覽器回傳Cache-Control: no-store。
AI 爬蟲已經是第二大 bot 流量來源
根據 Cloudflare Radar 與 HUMAN Security 的數據:AI 爬蟲流量年增 187%,已經是僅次於搜尋引擎的第二大 bot 流量類別。而這其中有 49.9% 的流量根本不是為了索引——是為了訓練模型。KKday 自己 Kibana 的 log 也印證了這件事:隨著 Apple Intelligence 擴張,Applebot 的流量暴增(單月 +124%)。
每個網站都得做的策略決定:給 AI 爬?還是不給?實務上的控制手段是 robots.txt + WAF 規則(Cloudflare 幫你維護 user-agent 清單),分開決定:search=yes,ai-train=no。
完整的鏈
Leo 在演講結尾把一切串起來:
- 效能為你贏得排名(SEO)
- 排名讓你有機會被 AI 引用(AEO)
- 被引用讓你在 zero-click 時代維持能見度
這三件事現在是同一條鏈——而效能就是起點。如果你沒有被引用,即使在 Google 上排名第一,你也等於不存在。