網站上線前要檢查什麼？6 個測試項目降低官網上線風險

網站上線前要檢查什麼，是很多老闆在官網快完工時才想到的問題。常有客戶跟我們說，設計稿看了好幾輪、文案也改到滿意，結果上線當天才發現手機上按鈕點不到，或是詢問表單送出後沒人收到。這些狀況多半出在上線前少了一輪完整測試，補起來其實花不了多少時間，卻能讓辛苦做好的官網，從第一天起就接得住每一位上門的客人。

網站沒測試就上線會怎樣？

網站沒測試就上線，最直接的後果是訪客進站後遇到錯誤、找不到資訊，接著就離開了。官網剛上線，通常也是名片和社群貼文開始導流的時候，這時出問題，流失的是您花心力帶進來的第一批潛在客戶。我們在上線前最常替客戶攔下的，就是下面這三種狀況。

1. 手機版出現跑版

您可以試試看：用自己的手機打開官網首頁，一路滑到底，有沒有哪一段文字擠在一起、圖片超出畫面，或是要用兩指縮放才看得清楚？這就是所謂的跑版。設計時多半以電腦螢幕為主，手機上的排版靠程式自動調整，只要某個區塊的寬度或字級沒設好，畫面就會歪掉。現在大部分訪客是用手機進站，手機版一跑版，品牌的第一印象就先打了折扣。手機與電腦畫面如何自動調整，可以參考我們整理的RWD響應式網頁設計解析。

2. 表單無法正常送出

表單是官網最直接的詢問入口，也是最容易「安靜壞掉」的地方。訪客填完資料按下送出，畫面顯示成功，通知信卻沒有寄出，或被收件信箱擋進垃圾郵件匣。網站看起來一切正常，老闆只會覺得「最近怎麼都沒人詢問」，等發現時，可能已經漏接好幾週的客人。這類問題光看畫面查不出來，一定要實際送出一次，再到收件信箱確認。

3. 連結與圖片發生錯誤

搬站或改版時，常見的狀況是頁面網址變了，選單或按鈕卻還連到舊位置，訪客一點就看到404錯誤頁。圖片也一樣，測試環境顯示正常，搬到正式主機後路徑沒對上，就變成一格格破圖的小框框。一兩個錯誤看起來不嚴重，但訪客點到第二個壞掉的連結，大概就不會再點第三個了。

網站上線檢查清單有哪些？

網站上線前要檢查什麼？可以整理成6項網站上線檢查清單：電腦與手機版畫面、表單與通知功能、選單與頁面連結、圖片與檔案顯示、載入速度與相容性，以及後台內容編輯功能。建議依序檢查，每一項都安排人實際操作，比只看畫面截圖可靠得多。

1. 電腦與手機版畫面

每一個頁面，都用電腦、平板、手機各打開一次，檢查文字大小、圖片比例、按鈕位置。建議至少用一台iPhone、一台Android手機實際操作，再搭配瀏覽器內建的裝置模擬工具比對主要頁面。米洛的網站在交付前會做跨裝置測試，手機平板電腦都好看，是上線的基本條件。想了解畫面如何依螢幕自動調整，可以看看響應式網頁設計如何改善手機體驗。

▌延伸閱讀：RWD是什麼？響應式網頁設計如何優化手機體驗

2. 表單與通知功能

網站上的每一個表單，像是聯絡表單或預約表單，都請實際填寫送出一次。送出後確認三件事：

• 畫面有沒有出現成功訊息
• 表單通知信有沒有寄到指定信箱
• 信件內容的欄位是否完整

如果網站有寄給訪客的自動確認信，也請用自己的私人信箱測一次，看看會不會被歸進垃圾郵件。

3. 選單與頁面連結

從首頁開始，把主選單、頁尾、每一顆按鈕都點一次。特別留意三種連結：導向外部的社群與地圖連結、手機上一鍵撥打的電話與Email連結，以及改版前的舊網址。舊網址建議設定301轉址，讓舊連結自動導到新頁面，訪客與搜尋引擎都不會撲空。

4. 圖片與檔案顯示

逐頁檢查圖片是否正常顯示、比例有沒有被拉長壓扁，以及檔案是否過大。一張沒壓縮的首頁大圖動輒好幾MB，手機用行動網路開啟就會卡上好幾秒。可下載的檔案，例如：型錄PDF、價目表，也要實際點下載，確認是最新版本。圖片的替代文字順便補齊，報讀軟體與搜尋引擎都靠它理解圖片內容。

5. 載入速度與相容性

速度與相容性是清單裡最容易被低估的一項，平常沒什麼人用時都很順，訪客一多才露出問題。2019年11月12日Disney+上線當天，大量用戶看到「unable to connect」錯誤，有些人連註冊都完成不了。Disney直營業務主管Kevin Mayer事後在公開訪談中說明，問題出在應用程式部分架構撐不住遠超預期的需求，當時對外公布的註冊數已超過1,000萬（詳見TheWrap的報導）。

中小企業官網的流量規模小得多，道理卻相同。上線前先用Google的PageSpeed Insights測一次，參考Google提出的Web Vitals網站體驗指標，主要內容在2.5秒內出現是基本門檻。相容性方面，主要頁面至少用Chrome與Safari各開一次，公司電腦習慣用Edge的話也一起加測。

▌延伸閱讀：Google Web Vitals網站速度指標說明

6. 後台內容編輯功能

網站上線後，日常更新多半由您的同事自己來。上線前請負責維護的人實際登入後台，新增一則消息、換一張主視覺橫幅圖、修改一段文字，確認存檔後前台顯示正確。米洛的網站以模組化系統為底，再依品牌做客製設計，後台欄位會依您的內容需求配置，自己改網站不用問工程師。模組化與套版的差別，可以參考客製化網站與套版網站比較。

後台除了文字和圖片，還有一組訪客看不到、搜尋引擎卻會讀取的SEO（搜尋引擎優化）設定。米洛在網站上線前，會替客戶把這些設定一起檢查過，包含每頁的meta tag站內優化、keywords與description設定，以及結構化資料欄位的填寫。結構化資料能讓搜尋引擎更快讀懂公司名稱與服務項目這類資訊，這些細節在上線前補齊，網站一開放就有比較好的收錄基礎。

看完6項清單，可以用下面這張表安排分工與時程。它補上前面沒提到的兩件事：每一項建議由誰測、大約花多久，方便您排進上線前的最後一週。

網站測試項目要注意什麼？

執行網站測試項目時，要注意三件事：用多種主流瀏覽器實測、把表單通知流程走到有人回覆為止、確認後台帳號權限有分層。清單列好之後，測的方法對了，才抓得到平常不會出現的問題。

1. 測試不同瀏覽器

同一個網站，在不同瀏覽器的呈現可能略有差異，最常見的是字型和表單樣式。老闆自己平常用Chrome，客人卻可能用iPhone內建的Safari，或公司電腦上的Edge。MDN的跨瀏覽器測試指南也提到，網站不必在每個瀏覽器都一模一樣，核心功能卻一定要能用。建議先和製作方確認支援哪些瀏覽器，再依清單逐一測過。

▌延伸閱讀：跨瀏覽器測試入門指南（MDN）

2. 確認表單通知流程

表單能送出之後，值得再往下走一步，想想通知信寄到之後由誰回覆。通知信箱多半是建站當時設定的，經過幾次人員異動，很容易變成沒人在看的信箱，上線前順手確認一次最安心。建議把完整流程畫出來，從訪客送出、誰收到、多久內回覆，到回覆後是否留下紀錄。測試時請相關同事一起參與，確認每個環節都有人接手。

3. 檢查後台操作權限

後台帳號建議依職務分權限，負責發布消息的同事只開放內容編輯，網站設定與帳號管理留給主管或指定窗口。上線前逐一登入各個帳號，確認看得到該看的、改不到不該改的；同事離職交接時，也記得停用舊帳號。如果您還在評估製作方，可以把「後台權限怎麼設定」列進詢問清單，更多挑選方向可參考網頁設計公司怎麼選。

米洛科技協助你解決網站上線檢查與網站測試問題，6 個測試項目降低官網上線風險

官網從設計完成到正式上線，中間這一輪測試，決定了訪客對品牌的第一印象。米洛科技在網站交付前，會依照上述清單完成跨裝置測試、表單通知實測與後台操作教學，讓您上線後也能自己更新內容。

已經有網站的老闆，可以先預約免費網站健檢，我們會做初步檢視並與您釐清網站問題，讓網站從一開始就具備SEO優化的基礎體質。

網站上線前要檢查什麼，答案就藏在訪客會碰到的每一個細節裡。網站上線只有一次第一印象，多測一輪，就少一次讓客人默默離開的機會。如果您的官網即將上線，歡迎讓米洛先陪您把這份清單走一遍。

常見問題FAQ