網站開發規則
效能
- 圖片是網站緩慢的首要原因 — 使用 WebP/AVIF 格式，對摺頁以下圖片進行懶加載，並設定明確的寬度/高度以防止版面位移
- 阻塞渲染的 CSS 會延遲首次繪製 — 將關鍵 CSS 內聯到
<head>中，延遲其餘部分 - 第三方腳本（分析工具、聊天小工具）通常會增加 500 毫秒以上的延遲 — 使用
async或defer載入它們，並定期審查 - 字體會導致不可見文字閃爍（FOIT） — 使用
font-display: swap並預載關鍵字體 - 在無痕模式下使用 Lighthouse 測量 — 擴充功能會扭曲結果
行動優先
- 從行動版 CSS 開始，使用
min-width媒體查詢增加複雜度 — 擴展比縮減更容易 - 觸控目標至少需要 44x44 像素 — 手指不精確，小按鈕會讓使用者沮喪
- 在真實裝置上測試，而不僅僅是瀏覽器 DevTools — 節流模擬會忽略真實世界的卡頓
- 水平滾動是嚴重錯誤 — 測試每個頁面至少 320 像素寬度
- 需要
viewport中繼標籤：<meta name="viewport" content="width=device-width, initial-scale=1">
無障礙性
- 每個
<img>都需要alt文字 — 裝飾性圖片使用空alt=""，有意義的圖片使用描述性文字 - 主體文字的色彩對比度至少為 4.5:1 — 使用 WebAIM 對比度檢查器
- 表單輸入必須有相關聯的
<label>元素 — 僅使用佔位符無法做到無障礙 - 鍵盤導航必須能正常運作 — 使用 Tab 鍵測試每個互動元素
- 螢幕閱讀器會公告標題層級 — 按邏輯順序使用 H1-H6，絕不跳過層級
HTML 結構
- 每頁只有一個
<h1>— 它是頁面標題，不是樣式工具 - 使用語義元素：
<nav>、<main>、<article>、<aside>、<footer>— 它們向瀏覽器和輔助技術傳達結構 - 使用
<button>進行操作，使用<a>進行導航 — 不要使用帶有點擊處理器的 div - 外部連結應有
rel="noopener"— 防止與target="_blank"相關的安全漏洞 - 驗證 HTML — 損壞的標記會導致跨瀏覽器的不可預測渲染
CSS 模式
- 避免使用
!important— 它會破壞級聯規則並使除錯變得痛苦。相反，修正選擇器的特異性 - 對文字使用相對單位（
rem、em、%）而非固定px— 尊重使用者的字型大小偏好 - CSS 自訂屬性（變數）可減少重複 — 定義一次顏色和間距，隨處使用
- Flexbox 用於一維佈局，Grid 用於二維 — 不要強迫一個去做另一個的工作
- 測試 CSS 未載入的情況 — 內容應在純 HTML 中仍然可讀
常見錯誤
- 缺少 favicon 會導致伺服器日誌中出現 404 垃圾訊息 — 始終包含一個，即使只是簡單的 PNG
- 未設定
<html lang="en">會破壞螢幕閱讀器的發音 - 硬編碼的
http://連結在 HTTPS 網站上會損壞 — 使用協定相對//或始終使用https:// - 假設 JavaScript 可用 — 核心內容應在沒有 JS 的情況下也能運作（漸進增強）
- 忘記列印樣式 — 為使用者可能列印的頁面（收據、文章）添加
@media print
SEO / 索引
- 標準網址必須與伺服器實際提供的網址相符 — 不匹配（例如尾部斜線 vs 無尾部斜線）會混淆 Google，並可能阻止索引
- 每個內容頁面至少需要一個指向它的內部連結 — 僅存在於網站地圖中但沒有參照頁面的頁面會被 Google 爬蟲降低優先級
- 模板中的內容篩選器可能會靜默地將頁面排除在導航之外 — 透過從首頁跟隨連結來驗證所有頁面是否都可達，而不僅僅是檢查網站地圖
- Search Console 中的「已發現 - 目前未索引」通常表示沒有內部連結，而不是技術封鎖 — 在請求索引之前先修正連結
啟動前
- 測試所有表單是否確實提交 — 損壞的聯絡表單會悄悄流失客戶
- 檢查 404 頁面是否存在且有用 — 預設伺服器 404 看起來不專業
- 使用 Open Graph 標籤驗證社交分享預覽 — 在 Facebook/Twitter 除錯工具中測試
- 將網站地圖提交給 Google Search Console — 加速索引
- 設定正常運行時間監控 — 在使用者告訴你之前就知道你的網站何時當機