如果想要對網站或部落格進行搜尋引擎最佳化,我通常會建議先去詳細閱讀「Google 搜尋引擎最佳化(SEO)入門指南」,在 Google 釋出的手冊中有提到非常多觀念,適用於各種情境,只要把握大原則方向就會有不錯的成效表現。此外,Google 提到的網站使用體驗中以速度最為重要,想知道網站速度也可透過檢測工具 Web.dev 或其他網站測速工具進行檢查,這份列表中我較推薦 Google PageSpeed Insights 和 KeyCDN Website Speed Test。
網頁測試
Dummy Image 假圖產生器,以網址快速載入各種尺寸顏色圖片
在設計網頁或是配置版面時經常會需要預先保留圖片位置,讓開發或示範時使畫面更接近最終樣貌,如果手邊的圖片還沒處理,我們可以透過佔位圖片(Placeholder)呈現出特定大小的圖片範圍。簡單來說,佔位圖片產生器利用網址直接調整、產生特定尺寸範例圖,省去必須自行裁切圖片的麻煩,因為是以網址形式載入圖片,即使沒有下載圖片依然能在網頁上顯示,我曾介紹過的 Unsplash It、Placekitten、Placemat 和 PlaceKeanu 都是類似應用。
everysize 輸入網址就能測試響應式網頁在各種裝置尺寸的顯示效果
現在很多人是透過智慧型手機或平板電腦瀏覽網頁,在網頁設計上就要考量到如何讓不同尺寸螢幕大小也能正常顯示,以往會製作成電腦版和手機版兩種格式,後來多半以響應式網頁設計(Responsive web design)技術直接在不同尺寸螢幕上顯示最適合的樣式,更重要的是可以節省維護的成本和時間。想測試自適應設計在各種裝置顯示情形,除了直接使用手機瀏覽外,其實也有不少工具可以輔助,像是 Responsive Viewer、ScreenDump 或是 Responsive Screenshots。
Who Can Use 檢查網頁配色對視力障礙使用者友善程度

全球資訊網協會(World Wide Web Consortium,W3C)制定的網頁內容無障礙指南相信大家不陌生,網頁內容無障礙指南(Web Content Accessibility Guidelines,WCAG)用於讓網頁可以更容易被訪問,藉由這些原則,讓內容能夠被廣大的身心障礙人士使用,其中涉及到可感知性、可操作性和可理解性等各種層面。
Responsive Viewer 在單一頁面查看網頁在不同螢幕大小裝置的顯示樣貌(Chrome 擴充功能)
Screenshot Machine 將網頁畫面擷取轉為圖片或 PDF 免費工具
免費資源網路社群介紹過不少製作、產生網頁擷圖的線上工具,這些服務多半不需要額外下載軟體,輸入網址就能建立網頁截圖,有些還能選擇要用的裝置類型或解析度大小,對於檢查自適應網頁設計(Responsive Web Design)網站呈現效果來說會很有用,有時候也可能用來備份網頁內容,像是 Web-Capture 線上網頁快照服務輸入網址就能完整擷取網頁轉圖片,或是 Screenshot Guru、Full Page Screen Capture 都能透過瀏覽器建立網頁擷圖。
ScreenDump 自適應網頁設計測試工具,預覽網站在不同尺寸螢幕顯示效果
早期遇到行動裝置螢幕太小、無法正常瀏覽網站問題,都會針對 User Agent 提供不同的頁面版本,例如在手機存取時會直接切換到「行動版」網頁,若以電腦開啟則是跳轉一般網頁,這麼做的好處是一般行動裝置會使用速度較慢的行動網路,行動版就能盡量減少網頁大小,讓瀏覽者有更好的使用體驗,不過缺點也顯而易見,就是得同時維護網頁不同版本,無形間增加更多時間成本。
httpstatus.io 快速檢查網站狀態碼、回應標頭和重新轉向情形
自行架站會遇到各式各樣的狀況,其中很常發生的是要檢查某項功能有沒有正常運作(舉例來說,在 WordPress 網站使用 Cloudflare 外掛建立快取),除了檢查網頁原始碼,大多會透過瀏覽器內建的「開發人員工具」進行各項除錯工作,查看一個網頁究竟載入多少元件檔案,也會檢查相關檔案在使用時從伺服器端回傳的「Response Headers」,這些看起來複雜的資訊代表著某個文件是如何被載入使用,也能找出拖慢網頁速度的原因。