為什麼速度比你想的更重要
Google 研究：行動網頁載入超過 3 秒，53% 的使用者會離開。超過 5 秒，轉換率下降 90%。
對服務型商家來說，一個在手機上要等 8 秒才能顯示的網站，等於廣告費打了水漂——訪客在看到你的內容之前就離開了。
速度也是 Google 的排名因素之一（Core Web Vitals），慢速網站在同等內容品質下，排名之後於快速網站。
以下 10 個做法，按照「容易程度」排序，前五個任何人都能做，後五個需要技術基礎。
做法一：壓縮並轉換圖片格式
這是最常見也最有效的優化。未壓縮的 JPG 可能有 2-3MB，壓縮後可以到 200-300KB，速度差距驚人。
工具：Squoosh.app（免費線上工具）、TinyPNG
格式選擇：WebP 格式比 JPG 輕 25-35%，現代瀏覽器都支援。如果你的網站框架支援，優先使用 WebP 或 AVIF。
一個常見的規則：網站上的任何圖片，如果它不是 hero 主圖，單張大小不應超過 250KB。主圖可以到 400-600KB。
做法二：設定圖片的寬高屬性
這個看似微小的細節，卻對 CLS（版面位移）分數影響很大。
當瀏覽器不知道圖片大小時，它會先不留空間，等圖片載入後才撐開版面，導致頁面「跳動」——這就是 CLS 問題。
在 Next.js 中，使用 Image 元件並指定 width 和 height，框架會自動處理。
做法三：延遲加載（Lazy Load）非可視區圖片
首頁不需要一開始就加載所有圖片——只需要加載用戶目前看得到的區域內的圖片。
在 HTML 中使用 loading="lazy" 屬性即可啟用延遲加載。
在 Next.js 中，Image 元件預設就是 lazy loading（除了設定 priority 的圖片）。
做法四：減少不必要的第三方腳本
每個第三方腳本（聊天機器人、廣告追蹤、社群嵌入按鈕）都會阻擋或延遲頁面渲染。
檢查你的網站使用了哪些第三方服務，問自己：這個真的必要嗎？
如果是 Google Analytics，改用 GA4 的非同步載入方式。如果是 Facebook Pixel，只在需要的頁面載入。
做法五：啟用 Gzip 或 Brotli 壓縮
服務器傳送 HTML、CSS、JS 時，可以先壓縮再傳輸，讓文件大小縮小 65-85%。
大多數現代主機和 CDN（Cloudflare、Vercel、Netlify）都自動啟用 Brotli 壓縮，你不需要手動設定。如果你的主機是傳統的 cPanel 主機，需要確認 .htaccess 中有啟用壓縮設定。
做法六：使用 CDN 服務
CDN（內容傳遞網路）是在全球各地部署的伺服器群，當訪客請求你的網站時，由距離最近的伺服器回應。
如果你是台灣的服務商，但你的主機在美國，台灣訪客每次請求都要跨太平洋——這個延遲很明顯。
簡單方案：把網站部署在 Vercel（有台灣節點）或啟用 Cloudflare 的免費版。
做法七：移除未使用的 CSS 和 JS
大型框架（Bootstrap、jQuery）往往包含很多你用不到的程式碼。
用 Chrome DevTools 的 Coverage 工具，可以看到你的 CSS 和 JS 有多少比例是未使用的。
如果是 Next.js + Tailwind CSS，Tailwind 的 PurgeCSS 功能會自動移除未使用的 CSS 樣式。
做法八：DNS 預取（DNS Prefetch）
如果你的頁面需要連接到外部服務（Google Fonts、CDN、第三方 API），可以提前告訴瀏覽器去解析這些域名的 DNS。
在 HTML head 中加入 dns-prefetch 標籤，例如針對 fonts.gstatic.com 做預取，可以減少首次連線延遲。
做法九：字型加載優化
Google Fonts 是速度殺手之一。最佳做法：
在 Next.js 中使用 next/font 套件，它會在建置時自動處理字型並消除 FOUT（字型未加載時的排版跳動）。
設定 font-display: swap，讓瀏覽器先用系統字型顯示文字，字型加載後再切換。
做法十：使用 HTTP/2 或 HTTP/3
HTTP/2 相比 HTTP/1.1 可以同時處理多個請求（多工），不需要等上一個請求完成才發下一個。
大多數現代主機（Vercel、Netlify、Cloudflare）都已支援 HTTP/2。如果你的主機老舊，這可能是升級的理由之一。
最後：用工具量化改善效果
優化前後用 PageSpeed Insights 測試，記錄分數變化。目標：
桌機版：90 分以上
行動版：70 分以上（行動版更難，因為模擬的是 4G 慢速網路）
速度優化是持續的工作，不是一次完成的任務。每次網站有重大更新，都應該重新檢查一遍。