optimize

Tổng quan

Kỹ năng optimize là gì?

Kỹ năng optimize được thiết kế để giúp các nhà phát triển và nhóm làm việc hệ thống hóa việc chẩn đoán và khắc phục các vấn đề hiệu suất giao diện người dùng trong ứng dụng web. Nó bao phủ nhiều yếu tố hiệu suất như tốc độ tải, hiệu quả hiển thị, độ mượt của hoạt ảnh, tối ưu hình ảnh và giảm thiểu kích thước gói. Nếu người dùng của bạn gặp phải tình trạng tải trang chậm, tương tác giật lag, hoạt ảnh không mượt hoặc bạn muốn cải thiện tốc độ tổng thể của trang, kỹ năng optimize cung cấp một phương pháp có cấu trúc để xác định và giải quyết những vấn đề này.

Ai nên sử dụng optimize?

• Các nhà phát triển frontend và kỹ sư tập trung vào hiệu suất web
• Các nhóm muốn cải thiện Core Web Vitals và trải nghiệm người dùng
• Bất kỳ ai đang khắc phục các ứng dụng web chậm, không phản hồi hoặc nặng

Những vấn đề optimize giải quyết

• Tải trang ban đầu chậm và thời gian tương tác cao
• Gói JavaScript, CSS hoặc hình ảnh lớn
• Hiệu suất hoạt ảnh hoặc hiển thị kém
• Phân phối và tải hình ảnh không hiệu quả
• Giao diện người dùng chậm chạp hoặc giật lag chung

Cách sử dụng

Các bước cài đặt

1. Thêm kỹ năng vào môi trường agent của bạn:

   npx skills add https://github.com/pbakaus/impeccable --skill optimize
   

2. Xem lại tài liệu chính:

   • Bắt đầu với SKILL.md để hiểu tổng quan về quy trình và chiến lược tối ưu.
   • Để có bối cảnh sâu hơn, xem README.md, AGENTS.md, metadata.json và các thư mục hỗ trợ như rules/, resources/, hoặc scripts/ nếu có.

Bắt đầu với tối ưu hóa

• Đánh giá hiệu suất hiện tại:
  • Đo Core Web Vitals (LCP, FID/INP, CLS)
  • Phân tích thời gian tải, kích thước gói, hiệu suất runtime và các yêu cầu mạng
• Xác định điểm nghẽn:
  • Xác định phần nào chậm (ví dụ: tải ban đầu, tương tác, hoạt ảnh)
  • Tìm nguyên nhân (ví dụ: hình ảnh lớn, JavaScript nặng, layout thrashing)
  • Đánh giá tác động và nhóm người dùng bị ảnh hưởng
• Áp dụng chiến lược tối ưu:
  • Tối ưu hình ảnh (định dạng hiện đại, kích thước phù hợp, tải lười, nén, phân phối qua CDN)
  • Giảm kích thước gói (chia nhỏ mã, loại bỏ mã không dùng, rút gọn)
  • Cải thiện hiệu suất hiển thị và hoạt ảnh (tránh layout thrashing, sử dụng CSS/JS hiệu quả)
  • Liên tục đo lường trước và sau khi thay đổi để đảm bảo cải thiện thực sự

Tùy chỉnh kỹ năng

Kỹ năng optimize cung cấp khung làm việc và các thực hành tốt nhất. Hãy điều chỉnh các đề xuất phù hợp với công nghệ, kho mã và giới hạn dự án của bạn để đạt hiệu quả tối ưu.

Câu hỏi thường gặp

Kỹ năng optimize giải quyết những vấn đề hiệu suất nào?

Optimize tập trung vào các vấn đề hiệu suất UI như tải chậm, gói lớn, hình ảnh không hiệu quả, hiển thị giật lag và sự cố hoạt ảnh.

Làm sao biết optimize phù hợp với dự án của tôi?

Nếu bạn hoặc người dùng gặp phải tình trạng tải chậm, hoạt ảnh giật lag hoặc điểm nghẽn hiệu suất, optimize là lựa chọn phù hợp. Nó đặc biệt hữu ích cho các ứng dụng web muốn cải thiện Core Web Vitals hoặc trải nghiệm người dùng tổng thể.

Tôi tìm các bước tối ưu chi tiết ở đâu?

Quy trình chính và chiến lược được trình bày trong SKILL.md. Để có thêm bối cảnh, hãy khám phá các tệp và thư mục hỗ trợ trong kho mã.

Tôi có thể dùng optimize với framework frontend nào?

Có. Kỹ năng cung cấp các nguyên tắc hiệu suất chung và các bước thực thi có thể điều chỉnh cho hầu hết các framework và công nghệ web hiện đại.

Làm sao để tận dụng tối đa optimize?

Luôn đo hiệu suất trước và sau khi thay đổi. Tập trung vào các điểm nghẽn có ảnh hưởng lớn nhất trước, và điều chỉnh tối ưu theo nhu cầu và môi trường của người dùng.

Để xem cây thư mục đầy đủ và chi tiết hơn, mở tab Files trong thư mục kỹ năng.