CORE Web Vitals Skill

core-web-vitals 已通過四項桌面門檻。實用性評為 high：Lighthouse tells you a metric is bad but not which element or line to fix, this skill maps each metric to the actual code patterns that cause regressions.

工作與觸發邊界、完整內容、來源授權依賴，以及安全測試方式均可確認；保留為已審核，但不占固定 30 席。

它完成什麼工作

Diagnoses and fixes Core Web Vitals issues across LCP, INP, and CLS. Covers image preloading, main thread optimization, layout shift prevention, and field measurement with the web-vitals library. Includes framework-specific patterns for Next.js, React, and Vue.

實質幫助

高 — Lighthouse tells you a metric is bad but not which element or line to fix, this skill maps each metric to the actual code patterns that cause regressions.

應該啟用

• Preloading a hero image with fetchpriority to drop LCP under 2.5s
• Chunking a long array processing task so click handlers stop blocking
• Adding width and height to product images to stop thumbnail grid jumps
• Reserving min-height on ad slots before the ad network injects content

不該啟用

• 需求不屬於「core-web-vitals」的工作範圍，或只是名稱相近但交付物不同。
• 無法提供必要輸入、適用技術棧或可隔離的測試環境。

輸入

• 設計需求、使用情境、內容、品牌或技術限制與參考素材

輸出

• 設計決策、可實作規格、程式碼或媒體產出

審查：Codex（逐篇來源桌面審查） · 2026-08-08