元伸科技
老實說，跟客戶聊 AI-Ready 時最常聽到的一句話是：「我們網站有 SEO 啊，為什麼 AI 還是不引用？」我會請對方先打開 PageSpeed Insights——往往看到 LCP 5-6 秒就知道原因了。AI 爬蟲爬越多頁、爬越深，引用率越高。但網站慢，AI 爬蟲就會放棄——這是 AI-Ready 網站的隱形殺手，業界一個常見現象是 SEO 文章寫一堆、卻沒人去管效能架構。
要讓網站在全球都跑得快、AI 爬得勤，需要完整的「效能架構」：CDN + 圖片優化 + 多層快取。本篇整理可立即落實的設定方案，更全面的架構可參考 網站 CDN 優化指南。
三層效能架構
使用者 / AI 爬蟲
↓
[Browser Cache] ← 已訪問過的資源直接從本地讀
↓
[CDN 全球節點] ← Cloudflare / Fastly，最近節點回應
↓
[Reverse Proxy] ← Nginx，全頁快取或片段快取
↓
[Origin Server] ← 真正的網站主機
每一層命中都讓回應速度提升一個量級。多數網站 90% 以上的請求應該在 CDN 層就被回應，根本不用打到 Origin。
第一層：CDN
推薦選擇
| 服務 | 起價 | 特色 | 適合 |
|---|---|---|---|
| Cloudflare | 免費 | 最完整、易用 | 多數網站首選 |
| Fastly | USD 50 起 | 速度最快、API 強 | 大型應用 |
| AWS CloudFront | USD 0.085/GB | 整合 AWS 生態 | AWS 用戶 |
| Bunny.net | USD 0.005/GB | 便宜 | 預算敏感 |
99% 的中小企業選 Cloudflare 免費版即可。設定 30 分鐘完成，效果立刻可見。Cloudflare 完整防護策略可看 Cloudflare 網站防護指南。
實務上看到客戶最常踩的坑是「DNS 改了之後忘記開橘色雲朵」——只用 Cloudflare 當 DNS 解析、沒走 CDN proxy，等於白裝。設定完一定要去 DNS 頁面確認那個橘色雲朵是亮的，不是灰的。
Cloudflare 必開設定
- ✅ Auto Minify：CSS / JS / HTML 自動壓縮
- ✅ Brotli：比 Gzip 壓縮率高 15-25%
- ✅ HTTP/3：最新協定，連線更快
- ✅ Always Use HTTPS：強制 HTTPS
- ✅ Cache Everything（謹慎用，需配合動態內容判斷）
第二層：圖片優化
格式選擇
| 格式 | 檔案大小 | 瀏覽器支援 | 用途 |
|---|---|---|---|
| JPG | 100% | 全支援 | 老舊 fallback |
| WebP | 70% | 95%+ | 主流推薦 |
| AVIF | 50% | 90%+ | 最新最佳 |
| SVG | 變動 | 全支援 | 圖示、Logo、簡單圖形 |
實作：picture 元素
<picture>
<source srcset="/hero.avif" type="image/avif">
<source srcset="/hero.webp" type="image/webp">
<img src="/hero.jpg"
alt="完整描述"
width="1200"
height="600"
loading="lazy">
</picture>
新瀏覽器拿 AVIF（最小），舊瀏覽器 fallback JPG。
動態圖片服務
不要手動產生多種格式 / 尺寸——用動態服務：
| 服務 | 特色 | 月費 |
|---|---|---|
| Cloudinary | 最完整 | 免費 25 額度起 |
| imgix | 速度快 | USD 8 起 |
| Cloudflare Images | 整合 CDN | USD 5/月（含 100K 圖片） |
| Vercel Image | 整合 Next.js | 含於 Vercel 方案 |
實作一次後，圖片自動轉 WebP / AVIF、自動裁切、自動加 watermark、自動 lazy load。
我會建議多數中小企業先用 Cloudflare Images 或 Cloudinary 免費額度——除非你網站圖片真的多到爆（例如電商一萬支 SKU），否則不需要自建。自建省下來的錢，往往不夠付維護人力。
第三層：多層快取策略
Cache-Control 標準設定
# Nginx 設定範例
# HTML：短快取
location ~ \.html$ {
add_header Cache-Control "public, max-age=300, must-revalidate";
}
# CSS / JS：長快取（檔名含 hash）
location ~ \.(css|js)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
# 圖片 / 字體：長快取
location ~ \.(jpg|jpeg|png|webp|avif|woff2)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
# API 回應：不快取
location /api/ {
add_header Cache-Control "no-store, no-cache";
}
重要規則
- HTML 短快取：1-5 分鐘，太長會延遲內容更新
- 靜態資源長快取：1 年（含 hash 的檔名）
- API 不快取：除非是固定資料
老闆最常踩的坑是「HTML 也設一年快取」——更新首頁文案後，自己用無痕視窗看是新的、客戶看到的還是舊的，然後質疑工程師「你到底改了沒」。
快取破壞策略
當 CSS / JS 更新時，怎麼讓使用者拿到新版本？檔名加 hash：
<link rel="stylesheet" href="/css/main.a3f9e2.css">
<script src="/js/app.b7c4d1.js"></script>
每次 build 時 hash 變動，URL 變新，舊快取自動失效。Webpack、Vite、Next.js 都內建這個機制。
元伸客戶實戰：完整效能架構
某 B2B 工業客戶導入完整架構：
架構：
Cloudflare（免費版）
↓ (CDN + DDoS + WAF)
Cloudflare Images（USD 5/月）
↓ (動態圖片優化)
Nginx Reverse Proxy
↓ (HTML 5 分鐘快取)
PHP-FPM / Laravel
↓
MariaDB
成效（數個月後）：
| 指標 | 改善幅度 |
|---|---|
| LCP | 大幅縮短，達到 CWV 綠色標準 |
| 月流量成本 | 顯著降低 |
| AI 爬蟲訪問 | 訪問頻率大幅提升 |
| AI 引用率 | 明顯成長 |
| Google 排名 | 平均排名顯著進步 |
架構成本：USD 5/月（Cloudflare Images）。所有其他都是免費版。
不要犯的 4 個錯誤
- ❌ 沒設 Cache-Control：所有請求都打到伺服器，CDN 等於白用
- ❌ HTML 設 1 年快取：內容更新後使用者看不到新版
- ❌ 圖片用 PNG 沒壓縮：3MB PNG 可壓到 200KB WebP
- ❌ CDN 後沒設 SSL：使用者連線不加密
結語：效能是 AI 友善的基礎建設
「AI 友善」的第一步是「速度友善」。講白一點，沒有速度，所有 Schema、llms.txt、定義段落都打折扣。實際上，這是我看過 AI-Ready 升級中最容易被忽略、但 ROI 最高的單項——花一兩天設定，後續幾年都受益。元伸科技的 客製化網頁設計 預設整合 CDN 與圖片優化，效能架構直接交付。
完整效能架構不貴——多數中小企業月費 USD 0-30 就能涵蓋全球 CDN + 圖片優化 + DDoS 防護。投資 ROI 極高，是 AI-Ready 升級中最容易立竿見影的單項，可搭配 客製化系統開發方案 一次完成基礎設施規劃。
📞 03-366-1000 ｜ 🌐 www.ozchamp.com ｜ 免費諮詢，24hr 內回覆
