「上線了!」這句話從工程師嘴裡說出來,是專案結束的信號。但從老闆的角度,真正的問題現在才開始發生。
上線後 30 天的網站,就像剛買的車——所有出廠瑕疵會在這時候浮出來。這篇整理我接手過(含自己做、含修別人做的)第一個月最常爆的 6 個雷,以及怎麼提前防。
如果你正在準備上線、或剛上線在膽戰心驚等噴火,這篇給你。
1 · Email 進不去客戶信箱
症狀:聯絡表單客戶送出後,收信信箱(hello@yourdomain.com)收不到任何信。或是收到了,但客戶說「我有送啊?」
原因:沒設 SPF / DKIM / DMARC。這三個是 email 的「身分驗證機制」,沒設的話 Gmail / Outlook 會把你的信判成垃圾信、或直接擋下來。
怎麼提前防?
如果你用 Resend / SendGrid / Postmark 寄信:
- 在他們後台加你的 domain
- 拿到 3-4 筆 DNS 記錄(SPF + DKIM)
- 到網域商(Cloudflare / GoDaddy)的 DNS 加上去
- 等驗證(通常幾分鐘到幾小時)
測試方法:用 mail-tester.com 寄一封信過去,它會給你 0-10 分。低於 8 分就要修。
我自己的習慣:上線前一週做這件事,留時間給 DNS propagation。臨上線才發現 email 不通,只能哭。
2 · 表單被機器人灌爆
症狀:上線第 3 天開始,信箱每天收 30 封自動發的垃圾「諮詢」——內容是俄文、簡體中文、或一堆連結,送信者 email 都是 xxx@gmail.com 看起來像真人。
原因:你的聯絡表單沒做 spam protection。爬蟲掃到表單就會自動填、自動送。
怎麼提前防?
至少做兩層:
- Honeypot 欄位(免費、有效):在表單加一個隱藏欄位(class
hidden),真人看不到、機器人會自動填。後端看到這欄有值就直接丟掉。
const schema = z.object({
// ...
website: z.string().max(0).optional(), // honeypot
});
if (data.website) {
return NextResponse.json({ ok: true }); // 假裝成功,不存
}- Cloudflare Turnstile 或 reCAPTCHA v3(免費、進階):隱形驗證,用戶體驗不會被打斷。比 v2 那種「點圖片」好很多。
99% 的 spam 在第一層就會擋掉。不做這個,上線一週信箱就廢了。
3 · 行動版排版爆炸但你以為很 OK
症狀:你在筆電上看一切完美,上線後客戶發訊息「手機看你網站圖片擠在一起」。打開手機一看,真的爆炸。
原因:做網站時主要在筆電上看。Tailwind / CSS 的 responsive breakpoint 在某些寬度區間沒測到,或是字體在 iPhone 上比 Android 大 / 小。
怎麼提前防?
不是「用瀏覽器調寬度」就夠了。要做這幾件事:
- 真實設備測試:至少 3 種——iPhone(自己的)、Android(借朋友的)、iPad
- Chrome DevTools 多裝置:devtools → device toolbar → 跑過 5-6 種尺寸(iPhone SE / 12 / 15 Pro Max / iPad Mini / iPad Pro)
- 特別注意這幾個區塊:Hero 大標題、navigation、表單、CTA button、圖片 grid
最容易爆的是字級:你寫 text-5xl 在 desktop 看起來很美,在 iPhone SE 直接爆出螢幕。Tailwind 裡正確的寫法是 text-3xl md:text-4xl lg:text-5xl。
4 · SEO 流量「莫名」掉了
症狀:舊網站翻新或重做,上線後第 2 週 Google Analytics 流量掉 40%。客戶恐慌。
原因(常見三種):
- 舊 URL 沒 redirect 到新 URL——Google 看到 404,把舊 ranking 砍掉
- 沒提交新的 sitemap——Google 不知道新頁面在哪
robots.txt寫錯,把整站 block 了——這個發生過,而且不只一次
怎麼提前防?
上線前 checklist:
- 把舊網站所有 URL 列出來(Google Search Console 可以匯出)
- 對應到新網站的 URL,做 301 redirect(在
next.config.js或 middleware) -
robots.txt確認不是Disallow: /(我看過好幾次) - 上線後立刻提交新 sitemap 到 Google Search Console
- 用 Google Search Console 的「URL Inspection」工具測幾個重要頁
最痛的雷:把 staging 環境的 robots.txt 帶到 production——staging 寫了 Disallow: / 防止被索引,結果 production 也有同樣設定。Google 就再也不收錄你的網站。
5 · SSL 憑證快過期都沒人發現
症狀:上線 80-90 天後,客戶突然打電話「網站打不開,出現紅色警告」。打開一看是「Your connection is not private」——SSL 過期了。
原因:Let's Encrypt 憑證有效期 90 天,自動續期失敗、或一開始就沒設自動續期。
怎麼提前防?
如果你用 Vercel / Netlify / Cloudflare 這類現代平台 → 自動處理,不用擔心。
如果你用 VPS 或 traditional hosting:
- 設 cron job 每月自動跑
certbot renew - 設「SSL 過期前 30 天通知」(Uptime Robot 免費版有)
- 每季手動檢查一次
我的硬規則:能用 Vercel / Cloudflare 我就不會自己管 SSL。SSL 過期是「不會發生才正常」的事——花這力氣管它不值得。
6 · 圖片載入慢到客戶誤以為網站壞掉
症狀:首頁打開要 8 秒以上才看得到圖,客戶覺得網站「卡卡的」。
原因:
- 上傳了原始尺寸 4032×3024 的手機照片(每張 5MB)
- 沒用 webp / avif 格式
- 沒做 lazy loading
- 沒接 image CDN
怎麼提前防?
實務上這些都該做:
- 格式轉 webp:用
cwebp或 squoosh.app。同畫質下檔案小 60-80% - 限制最大尺寸:Hero 圖最大 2400px,內容圖 1600px 就夠
- Next.js 用
<Image>元件:自動處理 lazy loading + responsive sizes + format negotiation - 跑一次 Lighthouse:手機模式跑首頁,Performance 分數要 > 80;< 60 客戶會感覺到「卡」
我看過最誇張的:某客戶的網站首頁有 12 張原始尺寸的產品照,加總 47MB。光首頁載入就要 12 秒。改成 webp + 1200px 限寬,變成 2.3MB,1.5 秒載完——同樣的網站,bounce rate 從 70% 掉到 35%。
一份「上線前 1 週」的 final checklist
整合上面所有,可以照著跑:
Email & 表單
[ ] SPF / DKIM 設好,mail-tester 9 分以上
[ ] 表單 honeypot 或 Turnstile 接好
[ ] 收信地址測試 3 次,3 次都進收件匣
行動版 & 跨裝置
[ ] iPhone 真機跑過所有頁
[ ] Android 真機跑過所有頁
[ ] iPad / 平板跑過
SEO & redirect
[ ] 舊 URL → 新 URL 對應表做完
[ ] 301 redirect 設好
[ ] `robots.txt` 不是 Disallow: /
[ ] sitemap.xml 可以打開
[ ] Google Search Console 加好、提交 sitemap
效能
[ ] 圖片轉 webp、限尺寸
[ ] Lighthouse 手機模式 > 80
[ ] Hero 圖 LCP < 2.5s
監控
[ ] Uptime monitor 設好(免費 UptimeRobot 即可)
[ ] SSL 自動續期確認
[ ] Error log 有人會看(Sentry 免費層 / Vercel logs)
10 項 checklist。每一項都是『沒做就後悔一週』的等級。
結語:上線不是終點,是責任轉移點
很多工作室把「上線」當作交付完成。真正負責的工作室會把上線後 30 天當保固期——這時候出問題該回頭修,不該額外收錢。
如果你正在準備上線,把這篇 checklist 印出來、跟你的工作室一條一條對。如果他們閃躲、說「這些不是上線必須的」——那他做的不是網站,是趕件。
如果你需要一個會把這 10 項都當基本盤的工作室,15 分鐘聊聊。我做的每個案子,這份 checklist 都會走過——不是因為我特別認真,是因為省這幾步,客戶半年後一定會找回來罵。