Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Tối ưu Core Web Vitals

Skill chẩn đoán và sửa LCP, INP, CLS dựa trên dữ liệu người dùng thực (CrUX) và trace hiệu năng của trình duyệt.

Lập trìnhTrung cấp★ 2,875⑂ 253Điểm AI 9/10Cập nhật lần cuối: 24 thg 8, 2026

Skill này làm gì

  • Đánh giá ba chỉ số Core Web Vitals (LCP – tải, INP – phản hồi, CLS – ổn định thị giác) theo ngưỡng p75 và đề xuất cách sửa.
  • Áp đặt nguyên tắc "đo trước, sửa sau": kiểm tra CrUX ở cấp trang → ghi trace hiệu năng → chỉ phân tích insight của chỉ số đang fail → đo lại sau khi sửa.
  • Cung cấp ví dụ code cho từng nguyên nhân LCP: TTFB chậm, CSS/JS chặn render, ảnh hero bị phát hiện muộn, render phía client.
  • Hướng dẫn Speculation Rules (prerender): bảng trigger theo eagerness, chi phí băng thông, xử lý side effect qua prerenderingchange, và giới hạn chỉ chạy trên Chromium.
  • INP và CLS được tách sang tài liệu tham chiếu riêng; kèm mẹo nhanh cho Next.js, React, Vue/Nuxt.

Phù hợp với ai

  • Lập trình viên frontend, người phụ trách hiệu năng web, team làm SEO/page experience.
  • Người vận hành site bị Search Console cảnh báo "URL kém".
  • Team đã có Chrome DevTools MCP hoặc Lighthouse để đo lường.

Ví dụ sử dụng

  1. "LCP trang chi tiết sản phẩm là 4s, tìm nguyên nhân" → kiểm tra CrUX, ghi trace, chỉ ra ảnh hero bị phát hiện muộn và đề xuất fetchpriority="high" + đổi sang WebP/AVIF.
  2. "Trên mobile layout cứ nhảy (CLS 0.28)" → xác định node bị dịch và nguyên nhân, áp dụng đặt sẵn kích thước ảnh, font-display: swap, chừa chỗ cho banner.
  3. "Bấm nút bị trễ (INP 480ms)" → tách input delay / processing / presentation delay, đề xuất chia nhỏ task và hoãn script third-party.

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/addyosmani/web-quality-skills/HEAD/skills/core-web-vitals/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/core-web-vitals từ repo GitHub addyosmani/web-quality-skills vào ~/.claude/skills/core-web-vitals/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/addyosmani/web-quality-skills.git && mkdir -p ~/.claude/skills && cp -r web-quality-skills/skills/* ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal.
  2. Clone repo: git clone https://github.com/addyosmani/web-quality-skills.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ skill: cp -r web-quality-skills/skills/* ~/.claude/skills/ (nên copy hết vì skill này tham chiếu ../performance/references/).
  5. Kiểm tra: ls ~/.claude/skills/core-web-vitals phải thấy SKILL.md và thư mục references.
  6. Khởi động lại Claude Code, rồi thử yêu cầu: "cải thiện Core Web Vitals cho site của tôi".
  7. (Khuyến nghị) Kết nối Chrome DevTools MCP hoặc cài Lighthouse CLI (npm i -g lighthouse) và chuẩn bị một URL chạy được để có dữ liệu đo thật.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT