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

Tối ưu hiệu năng web (Performance)

Kỹ năng chẩn đoán và tăng tốc website dựa trên Core Web Vitals thực tế và trace của trình duyệt, thay vì phỏng đoán.

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

Giúp được gì

  • Tự kích hoạt khi bạn nói "web chậm", "tối ưu hiệu năng", "giảm thời gian tải", "audit performance".
  • Thiết lập đường cơ sở field (dữ liệu người dùng thật) + lab (trace) trước khi sửa bất cứ dòng code nào.
  • Ưu tiên các chỉ số LCP/INP/CLS kém ở p75, dùng performance_start_trace và performance_analyze_insight của Chrome DevTools MCP để tìm nguyên nhân.
  • Chỉ sửa code/asset liên quan tới điểm nghẽn đã đo, rồi đo lại và báo cáo trước/sau kèm điều kiện đo.
  • Cung cấp bảng ngân sách hiệu năng (tổng 1.5MB, JS 300KB, CSS 100KB...), critical rendering path, Early Hints 103, Speculation Rules, ảnh responsive AVIF/WebP, tối ưu font, header cache, service worker, tránh layout thrashing, View Transitions và mẫu facade cho script third-party.

Phù hợp với ai

  • Lập trình viên frontend / fullstack phụ trách tốc độ website.
  • Đội thương mại điện tử, trang tin cần đạt ngưỡng Core Web Vitals cho SEO và tỉ lệ chuyển đổi.
  • Người muốn chuyển từ "tối ưu theo cảm giác" sang quy trình dựa trên số liệu.

Ví dụ sử dụng

  1. "Trang chi tiết sản phẩm có LCP 4s, tìm nguyên nhân" → ghi trace, phát hiện ảnh LCP được khám phá muộn, thêm fetchpriority="high" và preload, đo lại so sánh.
  2. "Bundle JS quá nặng" → so với bảng ngân sách, đề xuất code splitting theo route và tree shaking (import lodash/debounce).
  3. "Nhúng YouTube làm trang nặng" → áp dụng facade pattern: chỉ hiện thumbnail, tải iframe khi người dùng click.

· · · 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/performance/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/performance từ repo GitHub addyosmani/web-quality-skills vào ~/.claude/skills/performance/ 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 /tmp/web-quality-skills && mkdir -p ~/.claude/skills && cp -r /tmp/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 và vào thư mục làm việc bạn muốn.
  2. Clone repo: git clone https://github.com/addyosmani/web-quality-skills.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills
  4. Copy kỹ năng: cp -r web-quality-skills/skills/performance ~/.claude/skills/ (nên copy toàn bộ skills/* vì kỹ năng này tham chiếu tới core-web-vitals).
  5. Kiểm tra có các file references/MEASUREMENT.md và references/RUM.md trong thư mục vừa copy.
  6. Nếu muốn đo thật, cấu hình thêm Chrome DevTools MCP cho Claude Code; nếu không, kỹ năng chỉ đưa ra giả thuyết tĩnh.
  7. Khởi động lại Claude Code và thử yêu cầu: "hãy tối ưu tốc độ tải trang của tôi".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT