在收集網站稽核的成效指標之前,您可以先進行幾項檢查,找出簡單的修正方式和需要著重的部分。
有效性檢查:架構和程式碼
請盡可能在測量效能之前修正簡單的錯誤,並移除不必要的素材資源和程式碼,但請務必保留問題和修正方式的「前後」記錄。這些改善措施仍可納入稽核工作。
網站架構和資產
是否可以輕鬆從程式碼存放區和網站中移除任何內容,例如未使用的舊版網頁、內容或其他資產?檢查是否有孤立的網頁、多餘的範本、未使用的圖片和未使用的程式碼和程式庫。
執行階段錯誤
檢查瀏覽器控制台中是否有回報的錯誤。應該沒有任何問題 :)。
Linting
HTML、CSS 或 JavaScript 程式碼是否有錯誤?將 linting 建構至工作流程中,有助於維持程式碼品質並避免回歸。我們推薦 HTMLHint、StyleLint 和 ESLint,可用於程式碼編輯器外掛程式,或透過工作流程程序和持續整合工具 (例如 Travis) 的指令列執行。
無法連結的連結和圖片
有許多工具可在建構時間和執行階段測試無法連結的連結,包括 Chrome 擴充功能 (這個不錯) 和 Node 工具 (例如Broken Link Checker)。
外掛程式
Flash 和 Silverlight 等外掛程式可能會造成安全性風險,且已淘汰,且無法在行動裝置上運作。使用 Lighthouse 檢查外掛程式。
使用各種裝置和情境進行測試
使用真實裝置、多個瀏覽器和不同的連線環境,讓真實使用者測試網站,是最佳的測試方式。
其中有些檢查相對主觀,但可以找出影響感知效能的相關問題。舉例來說,損毀的連結會浪費時間,並讓使用者覺得「無回應」。難以辨識的文字會讓閱讀速度變慢。
跨裝置測試
嘗試不同的可視區域和視窗大小。至少使用一台行動裝置和一台電腦裝置。盡可能在螢幕較小的低規行動裝置上試用網站。文字是否易讀?是否有任何圖片無法正常顯示?可以放大嗎?觸控目標是否足夠大?速度是否緩慢?是否有任何功能無法回應?擷取畫面或錄製影片。
跨平台測試
您鎖定的目標平台為何?您需要針對使用者目前和未來使用的瀏覽器和作業系統進行測試。
連線
在多個目標網路類型上進行測試:已連線、Wi-Fi 和行動網路。您可以使用瀏覽器工具模擬各種網路狀況。
裝置
請務必使用與使用者相同的裝置測試網站。下圖顯示兩部不同手機上的同一頁面。

在較大的螢幕上,文字雖然較小,但仍可讀。在較小的螢幕上,瀏覽器會正確轉譯版面配置,但即使放大,文字仍無法辨識。螢幕模糊且有「色偏」現象 (白色看起來不是白色),導致內容不易辨識。
這類簡單的發現比晦澀難懂的成效資料更重要!
試用 UI 和 UX
無障礙設計、可用性和可讀性
:為確保所有使用者都能存取網站的內容和功能,您必須瞭解使用者的多樣性。Lighthouse 和其他工具可測試特定無障礙問題,但實際測試才是最佳方法。請嘗試在各種情境下讀取、瀏覽及輸入資料,例如在戶外陽光下或在火車上。請親朋好友和同事試用您的網站。請嘗試透過螢幕閱讀器使用內容,例如 Mac 上的 VoiceOver 或 Windows 上的 NVDA。
如要進一步瞭解如何實作及審查無障礙功能,請參閱 Udacity 的無障礙功能課程,以及「網路基礎知識」文章中的「如何進行無障礙功能審查」一文。
記錄無障礙稽核結果。您很可能可以進行簡單的改善,讓所有使用者都能受惠。
基本 UI 和 UX 問題
互動功能無法正常運作、元素在較小的視窗和檢視區溢出、輕觸目標太小、內容無法閱讀、捲動時有卡頓現象... 請在網站上開啟多個網頁,試試導覽和所有核心功能。保留記錄。
圖片、音訊和影片
測試內容是否溢出、顯示比例不正確、裁剪不佳和品質問題。
主觀的 UI 測試
這些測試不一定與您相關,但簡單的變更可以讓重構作業更輕鬆:
- 開啟網站時,是否會立即顯示「What can I do here?」?
- 你是否喜歡觀看內容和點選連結?
- 是否有視覺層級或路徑,或是所有內容都具有相同的視覺重量?
- 版面配置是否雜亂?
- 是否有太多字型?
- 是否有圖片或其他內容可以移除?
- 內容設計與介面設計同樣重要。網站上的文字和圖片內容是否適合行動裝置和電腦版情境?是否可以刪除任何項目?針對行動裝置撰寫內容。