Comprehensive web quality audit covering performance, accessibility, SEO, and best practices. Use when asked to "audit my site", "review web quality", "run lighthouse audit", "check page quality", or "optimize my website".
網站品質稽核
基於 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 關鍵字檢視
參考資料
如需特定領域的詳細指南：
