Khắc phục INP: Cách ngăn ứng dụng React có cảm giác chậm chạp

Dashboard của bạn có cảm giác chậm. API của bạn nhanh. Lighthouse hiển thị điểm xanh. Thế nhưng mọi cú click đều bị trễ.

Đó là vấn đề về INP.

Interaction to Next Paint (INP) đo lường thời gian một trang phản hồi người dùng. Nó đã thay thế First Input Delay (FID) vào tháng 3 năm 2024. FID chỉ xem xét cú click đầu tiên; INP theo dõi mọi tương tác.

Điểm INP dưới 200ms mang lại cảm giác nhanh. Trên 500ms mang lại cảm giác chậm chạp.

Để khắc phục INP, hãy chia nó thành ba giai đoạn:

  • Input Delay (Độ trễ đầu vào) – khoảng cách giữa một cú click và khi mã của bạn bắt đầu chạy. Nó xuất hiện khi luồng chính (main thread) đang bận.
  • Processing Time (Thời gian xử lý) – thời gian các hàm và các cập nhật state của React chạy.
  • Presentation Delay (Độ trễ hiển thị) – khoảng cách giữa việc hoàn tất mã và việc trình duyệt vẽ (paint) màn hình.

Khắc phục Input Delay

Các tác vụ dài (long tasks) sẽ chặn luồng chính. Nếu một tác vụ chạy lâu hơn 50ms, nó sẽ làm đình trệ các cú click. Hãy gọi scheduler.yield() để chia nhỏ các tác vụ dài thành các phần nhỏ hơn để trình duyệt có thể xử lý các cú click giữa chúng.

Khắc phục Processing Time

Sử dụng các API transition của React để giữ cho giao diện (UI) luôn phản hồi.

  • startTransition – bao bọc các cập nhật không khẩn cấp. React có thể tạm dừng một cập nhật nặng để xử lý một cú click mới.
  • useDeferredValue – trì hoãn các giá trị không cần cập nhật ngay lập tức.

Các API này không làm mã chạy nhanh hơn; chúng làm cho mã có thể bị ngắt quãng (interruptible), từ đó làm giảm chỉ số INP của bạn.

Khắc phục Presentation Delay

Quá nhiều phần tử DOM sẽ làm chậm quá trình vẽ (paint).

  • Áp dụng content-visibility: auto trong CSS để bỏ qua việc render các phần tử nằm ngoài màn hình.
  • Ngăn chặn layout thrashing: đừng bao giờ đọc một style rồi sau đó ghi một style khác trong cùng một vòng lặp. Thay vào đó, hãy gom nhóm (batch) các thao tác đọc và ghi.
  • Ảo hóa (Virtualize) các danh sách dài.

Cách đo lường

Lighthouse chạy trong môi trường lab và không thể click các nút giống như một người thật. Hãy cài đặt thư viện web-vitals và thu thập dữ liệu thực tế từ người dùng của bạn.

Nguồn: https://dev.to/ahmed_mahmoud360/fixing-inp-field-notes-on-interaction-to-next-paint-in-a-react-app-32fa