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

Kỹ năng giúp chẩn đoán và sửa ba chỉ số Core Web Vitals (LCP, INP, CLS) ngay ở mức code.

Lập trìnhTrung cấp★ 2,653⑂ 240Điểm AI 9/10Cập nhật lần cuối: 14 thg 6, 2026

Làm được gì

  • Tóm tắt ngưỡng Good/Needs work/Poor của LCP, INP, CLS và cách Google đo ở phân vị 75.
  • Chỉ ra nguyên nhân phổ biến từng chỉ số (TTFB chậm, CSS/JS chặn render, event handler nặng, ảnh thiếu width/height, font gây FOUT) kèm ví dụ ❌/✅.
  • Cung cấp snippet PerformanceObserver để tìm chính xác phần tử LCP, tương tác chậm và phần tử gây layout shift.
  • Hướng dẫn kỹ thuật mới: Speculation Rules API (prerender), scheduler.yield(), requestIdleCallback, kèm cảnh báo về băng thông và side effect.
  • Có checklist tối ưu cho từng chỉ số và cách sửa nhanh theo Next.js, React, Vue/Nuxt.

Phù hợp với ai

  • Dev web nhận cảnh báo Core Web Vitals trong Search Console.
  • Frontend engineer cần cải thiện điểm Lighthouse hoặc trải nghiệm thực tế của người dùng.
  • Người quản lý site thương mại điện tử/tin tức có nhiều quảng cáo, embed gây nhảy layout.
  • Chuyên viên technical SEO theo dõi chỉ số page experience.

Ví dụ sử dụng

  1. "LCP trang chủ đang 4s, giúp tôi giảm xuống" → gợi ý preload ảnh hero với fetchpriority="high", inline critical CSS, chuyển sang SSR/SSG.
  2. "Nút bấm phản hồi chậm, tối ưu INP" → chia công việc nặng thành chunk, await scheduler.yield(), đẩy analytics vào requestIdleCallback.
  3. "Quảng cáo tải xong là layout nhảy" → bọc iframe trong container min-height/aspect-ratio và dùng observer layout-shift để xác minh.

· · · 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/core-web-vitals ~/.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. Tạo thư mục skills: mkdir -p ~/.claude/skills
  3. Clone repo: git clone https://github.com/addyosmani/web-quality-skills.git
  4. Copy đúng skill này: cp -r web-quality-skills/skills/core-web-vitals ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra core-web-vitals xuất hiện trong danh sách skill.
  6. Kích hoạt bằng câu như "cải thiện Core Web Vitals", "sửa CLS". Nên có Node.js để chạy npx lighthouse <url> khi cần đo thực tế.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT