optimize

Tổng quan

Kỹ năng optimize được thiết kế để giúp các nhà phát triển chẩn đoán và khắc phục có hệ thống các vấn đề hiệu suất giao diện người dùng trên các ứng dụng web. Nó tập trung cải thiện tốc độ tải, hiệu quả hiển thị, độ mượt của hoạt hình, tối ưu hình ảnh và giảm kích thước gói tài nguyên. Sử dụng optimize khi bạn gặp phải giao diện chậm, giật hoặc không mượt, hoặc khi người dùng phản ánh các vấn đề hiệu suất như thời gian tải lâu hoặc tương tác không phản hồi.

Ai nên sử dụng optimize?

• Các nhà phát triển frontend muốn nâng cao tốc độ và khả năng phản hồi của trang web.
• Các nhóm gặp phản hồi từ người dùng về giao diện chậm hoặc không phản hồi.
• Các dự án có gói JavaScript lớn, hình ảnh chưa tối ưu hoặc vấn đề về hoạt hình.

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

• Tải trang ban đầu chậm và thời gian tương tác cao.
• Hình ảnh lớn hoặc chưa được nén ảnh hưởng đến hiệu suất.
• Hiển thị không hiệu quả hoặc layout bị xáo trộn.
• Hoạt hình bị giật và không mượt.
• Gói JavaScript hoặc CSS quá lớn.

Cách sử dụng

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

1. Cài đặt kỹ năng optimize bằng lệnh sau:

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

2. Bắt đầu bằng cách đọc file SKILL.md để có cái nhìn tổng quan có cấu trúc về quy trình làm việc và các khuyến nghị.

3. Xem xét các file hỗ trợ như README.md, AGENTS.md, metadata.json và các thư mục liên quan như rules/, resources/, references/, hoặc scripts/ để có thêm bối cảnh và công cụ hỗ trợ.

Áp dụng optimize trong dự án của bạn

• Đánh giá hiệu suất: Đo các chỉ số hiện tại như Core Web Vitals (LCP, FID/INP, CLS), thời gian tải, kích thước gói và hiệu suất chạy. Xác định các nút thắt cụ thể — có thể do hình ảnh lớn, JavaScript nặng hoặc hiển thị không hiệu quả.
• Phát triển kế hoạch tối ưu: Ưu tiên các sửa chữa dựa trên tác động. Tập trung tối ưu hình ảnh (định dạng hiện đại, nén, tải chậm), giảm kích thước gói và cải thiện hiệu suất hiển thị và hoạt hình.
• Lặp lại và đo lường: Luôn đo hiệu suất trước và sau khi thay đổi để đảm bảo các tối ưu đạt hiệu quả mong muốn.

Các file đề xuất xem trước

• SKILL.md (quy trình chính và các khuyến nghị)

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

Kỹ năng optimize làm gì?

Kỹ năng optimize cung cấp phương pháp có cấu trúc để chẩn đoán và khắc phục các vấn đề hiệu suất frontend, bao gồm tải chậm, trì hoãn hiển thị, vấn đề hoạt hình và kích thước tài nguyên lớn.

Khi nào tôi nên dùng optimize?

Sử dụng optimize khi ứng dụng của bạn cảm thấy chậm, người dùng phản ánh giật hoặc không mượt, hoặc khi bạn muốn cải thiện các chỉ số như thời gian tải và khả năng phản hồi.

Làm thế nào để bắt đầu?

Cài đặt kỹ năng bằng lệnh npx đã cho, sau đó theo hướng dẫn trong SKILL.md để đánh giá và xử lý các nút thắt hiệu suất.

Tôi có thể tìm thêm chi tiết hoặc script ở đâu?

Kiểm tra tab Files trong kho lưu trữ để tìm thêm tài nguyên, tài liệu tham khảo và các script hỗ trợ quy trình tối ưu của bạn.