SKILL.md
唯讀
名稱
web-quality-audit
描述
全面的網站品質稽核，涵蓋效能、無障礙、SEO 與最佳實務。當被要求「稽核我的網站」、「檢視網站品質」、「執行 Lighthouse 稽核」、「檢查頁面品質」或「最佳化我的網站」時使用。
網站品質稽核
基於 Google Lighthouse 稽核的全面品質檢視。涵蓋效能、無障礙、SEO 與最佳實務，共 150 多項檢查。
Lighthouse v13 注意事項（2025 年 10 月後）。Lighthouse 已將效能類別從逐項機會稽核遷移至效能洞察稽核（公告）。本技能先前引用的數個個別稽核名稱 — First Meaningful Paint、No Document Write、Uses Passive Event Listeners、Uses Rel Preload — 已被移除或合併。底層的建議並未改變且仍然適用；僅報告格式有所調整。與 CLS 相關的稽核（「版面位移」、「非合成動畫」、「未設定尺寸的圖片」）現已整合為單一的
cls-culprits-insight，圖片稽核則合併為image-delivery-insight。請將較舊的 Lighthouse JSON 輸出視為超集，而非矛盾。
運作方式
- 分析提供的程式碼/專案中的品質問題
- 依嚴重程度分類發現（嚴重、高、中、低）
- 提供具體、可執行的建議
- 包含修復的程式碼範例
稽核類別
效能（約佔典型問題的 40%）
Core Web Vitals — 必須通過以獲得良好的頁面體驗：
- LCP（最大內容繪製）< 2.5 秒。 最大的可見元素必須快速渲染。最佳化圖片、字型與伺服器回應時間。
- INP（與下一次繪製的互動）< 200 毫秒。 使用者互動必須感覺即時。減少 JavaScript 執行時間並拆分長時間任務。
- CLS（累計版面位移）< 0.1。 內容不得跳動。為圖片、嵌入內容與廣告設定明確尺寸。
資源最佳化：
- 壓縮圖片。 使用 WebP/AVIF 並提供備援。透過
srcset提供正確尺寸的圖片。 - 最小化 JavaScript。 移除未使用的程式碼。使用程式碼分割。延遲非關鍵腳本。
- 最佳化 CSS。 提取關鍵 CSS。移除未使用的樣式。避免使用
@import。 - 高效字型。 使用
font-display: swap。預載關鍵字型。子集化至所需字元。
載入策略：
- 預先連線至來源。 為第三方網域加入
<link rel="preconnect">。 - 預載關鍵資源。 LCP 圖片、字型與首屏 CSS。
- 延遲載入首屏以下內容。 圖片、iframe 與重量級元件。
- 有效快取。 靜態資源設定較長快取 TTL。雜湊檔案使用不可變快取。
無障礙（約佔典型問題的 30%）
可感知：
- 文字替代。 每個
<img>都有具意義的alt文字。裝飾性圖片使用alt=""。 - 色彩對比。 一般文字至少 4.5:1，大型文字至少 3:1（WCAG AA）。
- 不單獨依賴色彩。 在色彩指示旁使用圖示、圖案或文字。
- 字幕與逐字稿。 影片有字幕。音訊有逐字稿。
可操作：
- 鍵盤可存取。 所有功能均可透過鍵盤操作。無鍵盤陷阱。
- 焦點可見。 所有互動元素上都有清晰的焦點指示器。
- 跳過連結。 為鍵盤使用者提供「跳至主要內容」。
- 充足時間。 使用者可延長時間限制。無自動前進內容而無控制項。
可理解：
- 頁面語言。 在
<html>上設定lang屬性。 - 一致的導覽。 跨頁面使用相同的導覽結構。
- 錯誤識別。 表單錯誤清楚描述並與欄位關聯。
- 標籤與說明。 所有表單輸入都有關聯的標籤。
穩健：
- 有效的 HTML。 無重複 ID。元素正確巢狀。
- 正確使用 ARIA。 優先使用原生元素。ARIA 角色與行為相符。
- 名稱、角色、值。 互動元素具有可存取名稱與正確角色。
SEO（約佔典型問題的 15%）
可爬取性：
- 有效的 robots.txt。 不封鎖重要資源。
- XML Sitemap。 列出所有重要頁面。提交至 Search Console。
- 標準網址。 防止重複內容問題。
- 重要頁面無 noindex。 檢查 meta robots 與標頭。
頁面 SEO：
- 獨特的標題標籤。 50-60 字元。包含主要關鍵字。
- Meta 描述。 150-160 字元。具吸引力且獨特。
- 標題階層。 單一
<h1>。邏輯的標題結構。 - 描述性連結文字。 不使用「按這裡」或「閱讀更多」。
技術 SEO：
- 行動裝置友善。 響應式設計。觸控目標 ≥ 48px。
- HTTPS。 需要安全連線。
- 快速載入。 效能直接影響排名。
- 結構化資料。 使用 JSON-LD 產生豐富摘要（文章、產品、常見問題等）。
最佳實務（約佔典型問題的 15%）
安全性：
- 全面 HTTPS。 無混合內容。啟用 HSTS。
- 無易受攻擊的函式庫。 保持相依套件更新。
- CSP 標頭。 內容安全政策以防止 XSS。
- 無暴露的 Source Map。 在正式建置中。
現代標準：
- 無已棄用的 API。 取代
document.write、同步 XHR 等。 - 有效的 Doctype。 使用
<!DOCTYPE html>。 - 宣告字元集。
<meta charset="UTF-8">作為<head>中的第一個元素。 - 無瀏覽器錯誤。 乾淨的主控台。無 CORS 問題。
UX 模式：
- 無侵入性插頁廣告。 特別是在行動裝置上。
- 明確的權限請求。 僅在需要時提出，並附上上下文。
- 無誤導按鈕。 按鈕如其所述。
嚴重程度等級
| 等級 | 描述 | 行動 |
|---|---|---|
| 嚴重 | 安全漏洞、完全失敗 | 立即修復 |
| 高 | Core Web Vitals 失敗、重大無障礙障礙 | 上線前修復 |
| 中 | 效能機會、SEO 改善 | 在衝刺內修復 |
| 低 | 次要最佳化、程式碼品質 | 方便時修復 |
稽核輸出格式
執行稽核時，將發現結果結構化如下：
## 稽核結果
### 嚴重問題（發現 X 個）
- **[類別]** 問題描述。檔案：`path/to/file.js:123`
- **影響：** 為何重要
- **修復：** 具體程式碼變更或建議
### 高優先級（發現 X 個）
...
### 摘要
- 效能：X 個問題（Y 個嚴重）
- 無障礙：X 個問題（Y 個嚴重）
- SEO：X 個問題
- 最佳實務：X 個問題
### 建議優先順序
1. 首先修復此項，因為...
2. 接著處理...
3. 最後最佳化...
快速檢查清單
每次部署前
- [ ] Core Web Vitals 通過
- [ ] 無無障礙錯誤（axe/Lighthouse）
- [ ] 無主控台錯誤
- [ ] HTTPS 正常運作
- [ ] Meta 標籤存在
每週檢視
- [ ] 檢查 Search Console 中的問題
- [ ] 檢視 Core Web Vitals 趨勢
- [ ] 更新相依套件
- [ ] 使用螢幕閱讀器測試
每月深入分析
- [ ] 完整 Lighthouse 稽核
- [ ] 效能分析
- [ ] 與真實使用者進行無障礙稽核
- [ ] SEO 關鍵字檢視
參考資料
如需特定領域的詳細指南：
