事前作業

在收集網站稽核效能指標之前,您可以執行幾項檢查,找出易於修正和需要關注的部分。

有效性檢查:架構和程式碼

抵銷技術債!

盡可能在測量效能「之前」,可以修正簡單的錯誤並移除不需要的素材資源和程式碼,但請務必保留問題與修正的前後記錄。這些改善項目仍可做為稽核工作的一部分。

網站架構和資產
可以輕鬆從程式碼存放區和網站中移除任何項目,例如未使用的舊版網頁、內容或其他資產嗎?檢查是否有孤立頁面、多餘的範本、未使用的映像檔,以及未使用的程式碼和程式庫

執行階段錯誤
檢查瀏覽器控制台回報的錯誤。不應包含任何 :)。

Linting
您的 HTML、CSS 或 JavaScript 程式碼是否有誤?將程式碼建構到工作流程中,有助於維持程式碼品質,並避免迴歸問題。建議您使用 HTMLHintStyleLintESLint,這些外掛程式可做為程式碼編輯器外掛程式,或是透過工作流程程序中的指令列和 Travis 等持續整合工具執行。

連結和映像檔損毀
在建構期間和執行階段中,有許多工具可以測試無效連結,包括 Chrome 擴充功能 (這個頁面的做法良好) 和故障連結檢查工具等節點工具。

外掛程式
(例如 Flash 和 Silverlight) 這可能會造成安全性風險,這類外掛程式已淘汰,而且無法在行動裝置上運作。使用 Lighthouse 檢查外掛程式

使用各種裝置和情境進行測試

吸引真人使用者以實際裝置、多種瀏覽器和不同的連線環境測試網站是不錯的做法。

其中有些檢查相對主觀,但可以找出會影響感知效能的問題。連結中斷,例如浪費時間及感受「沒有回應」。難以閱讀的文字速度過慢

跨裝置測試
嘗試不同的可視區域和視窗大小。使用至少一部行動裝置和一部電腦。建議您盡可能在小螢幕的低規格行動裝置上瀏覽網站。文字清晰易讀嗎?圖片是否毀損?你可以縮放內容嗎?觸控目標是否夠大?速度是否緩慢? 是否有任何功能沒有回應?螢幕截圖或影片結果。

跨平台測試
您指定的平台為何?您必須針對使用者目前和日後使用的瀏覽器和作業系統進行測試。

連線能力
針對多種目標網路類型進行測試:已連線、Wi-Fi 和行動網路。您可以使用瀏覽器工具模擬各種網路狀況

裝置
請務必以使用者所用的裝置試用網站。下方相片顯示兩款不同手機的同一個頁面。

在高規格和低規格手機上運作的網誌文章頁面

在大螢幕上,文字較小,但容易閱讀。在小螢幕上,瀏覽器會正確轉譯版面配置,但文字無法閱讀,即使放大畫面也一樣。螢幕模糊不清,且具有「色彩轉換」功能 (白色本身並非白色),因此內容較不易讀。

比方說,這類簡單發現,比掩飾成效資料更加重要!

試用使用者介面和使用者體驗

無障礙設計、可用性和易讀性
為確保所有人都能存取您網站的內容和功能,您必須瞭解使用者的多元性。Lighthouse 和其他工具可測試特定的無障礙問題,但不會超越實際測試。嘗試各種情境來閱讀、瀏覽及輸入資料,例如陽光的戶外或在火車上。請一群朋友、家人和同事試用您的網站。請嘗試透過螢幕閱讀器 (例如 Mac 上的 VoiceOver 或 Windows 的 NVDA) 瀏覽內容。

如要進一步瞭解如何導入及審查無障礙工具,請參閱 Udacity 無障礙功能課程,以及「網頁基礎知識」一文的「如何執行無障礙功能審查」一文。

保留您的無障礙程度稽核記錄。您或許能夠做出適合所有使用者的簡單改善措施。

基本使用者介面和使用者體驗問題
與此不符的互動行為、在較小的視窗和可視區域中發生元素溢位、輕觸目標過小、無法閱讀的內容、捲動時卡頓...開啟多個網頁、試用導覽和所有核心功能。保留記錄。

圖片、音訊和影片
測試溢位內容、長寬比不正確、裁剪不當和品質問題。

主觀 UI 測試
這些測試不一定相關,但只要進行簡單的變更,就能更輕鬆地進行重構:

  • 開啟網站時,「這裡該怎麼辦?」可以立即清楚顯示嗎?
  • 你是想要觀看內容並追蹤連結嗎?
  • 是否有視覺階層或通道,或是兩者的視覺比重是否相同?
  • 版面配置是否有雜亂?
  • 是否包含太多字型?
  • 是否有可以移除的圖片或其他內容?
  • 內容設計和介面設計一樣重要。網站上的文字和圖片內容是否適用於行動裝置和電腦環境?任何問題都可以移除嗎? 針對行動裝置撰寫內容