Ứng dụng của bạn đang chạy bình thường, bỗng người dùng than: “sao bấm nút mà chậm vậy?”, “scroll giật giật khó chịu quá”. Lúc đó bạn sẽ làm gì?
Có thể đoán mò, có thể thử tối ưu ngẫu nhiên vài chỗ. Nhưng làm sao biết chính xác đoạn code nào đang “ăn CPU”, hay tại sao animation cứ khựng?
Đó là lúc bạn mở tab Performance trong DevTools. Nghĩ đơn giản: xem vài chỉ số, tối ưu xong. Nhưng rồi trước mắt lại hiện ra một flame chart đỏ rực như bếp lửa — và câu hỏi mới là: “Mình phải đọc cái đống này thế nào đây?” 😅
Performance panel giúp bạn thu lại profile hiệu suất và tối ưu tài nguyên. Để mở panel này, có hai cách chính:
Ctrl+Shift+I (hoặc Cmd+Opt+I trên macOS), rồi chọn tab Performance.Ctrl+Shift+P để mở Command Menu, gõ “Performance panel”, chọn Show Performance panel và nhấn Enter.
Khi panel mở ra, bạn lập tức thấy hai chỉ số Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS) hiện ở đầu. Tôi thường gọi đây là “nhịp tim” và “huyết áp” của trang. Nếu bạn bắt đầu tương tác – click, gõ hoặc scroll – chỉ số Interaction to Next Paint (INP) sẽ được thêm vào.
Bên dưới mỗi thẻ là bảng liệt kê các tương tác hoặc layout shift cụ thể. Bạn có thể bấm Clear để xóa danh sách hoặc di chuột lên để xem phân tích chi tiết. Video minh họa:
https://developer.chrome.com/static/docs/devtools/performance/overview/video/observe-metrics.mp4
Ghi nhận trên máy cá nhân đôi khi không phản ánh trải nghiệm của người dùng. Chrome khuyên bạn nên lấy dữ liệu từ Chrome UX Report (CrUX) bằng cách vào mục Field data và bấm Set up. Sau vài bước đồng ý, bạn có thể tạo mapping giữa môi trường phát triển và sản xuất.
Sau khi cấu hình, bạn sẽ thấy bảng so sánh giữa điểm số local và dữ liệu thật.