Đo và tối ưu Interaction to Next Paint (INP)

[Nhật Quang]

Interaction to Next Paint (INP) là chỉ số đo độ phản hồi của trang web với tương tác người dùng, giờ là một phần của Core Web Vitals và ảnh hưởng đến xếp hạng trên Google. Bài viết này giải thích INP là gì, cách đo và các bước thực tế để cải thiện điểm số.

INP là gì và nó đo cái gì​

Interaction to Next Paint (INP) đo thời gian từ lúc người dùng tương tác (nhấn, chạm, gõ phím) tới khi trình duyệt hiển thị lần cập nhật hình ảnh tiếp theo. Nếu không có cập nhật hình ảnh, INP vẫn ghi lại thời gian trình duyệt bận xử lý tương tác đó.

INP không chỉ tính ở các nút hay ô nhập liệu, mà còn cho các phần tử “không tương tác” như tiêu đề hay hình ảnh khi người dùng có thể nhấp vào chúng. Thang đánh giá: INP tốt 500 ms — điểm kém có thể ảnh hưởng xấu tới SEO. Kể từ tháng 3/2024 INP đã là một chỉ số Core Web Vitals và là yếu tố xếp hạng của Google.

Các thành phần cấu thành INP​

INP là tổng thời gian từ input tới lần render tiếp theo, bao gồm nhiều công đoạn trên main thread như xử lý sự kiện, tác vụ JavaScript, và reflow/layout. Một interaction có thể chứa nhiều handler (ví dụ keydown và keyup) và nhiều tác vụ chồng chéo làm tăng tổng thời gian.

Đo và tìm nguyên nhân​

Ưu tiên thu thập dữ liệu người dùng thực (Real User Monitoring) để biết yếu tố nào gây INP cao và tần suất xảy ra. Dữ liệu thực tế cho thấy phần tử nào người dùng hay tương tác và mức trễ điển hình.

Dùng bản ghi phiên (ví dụ công cụ RUM) để mở một lượt xem trang chậm, xem phân tích thành phần, và các script đã chạy sau tương tác.

Chrome DevTools — tab Performance — là công cụ mạnh để phân tích chi tiết: bật ghi, thực hiện tương tác và quan sát lane "Interaction" cùng view main thread để thấy hàm nào đang chạy. Từ đó xác định đoạn mã cần tối ưu hoặc loại bỏ.

Các bước tối ưu chính​

- Giảm hoạt động CPU không liên quan tới tương tác: tách các tác vụ dài thành các đoạn ngắn hơn để trình duyệt có thể xử lý input kịp thời.

- Dùng scheduler.yield (nếu phù hợp) để cho phép nhường CPU cho các tác vụ ưu tiên hơn (như xử lý tương tác) trước khi tiếp tục công việc nặng.

- Tránh thực thi nhiều tác vụ nặng ngay khi trang tải. Chạy kiểm tra tốc độ trang và xem Total Blocking Time để tìm các tác vụ nền sớm gây chặn tương tác.

- Kiểm tra mã bên thứ ba: nếu script bên thứ ba gây chặn, tìm cấu hình giảm công việc, tải chậm (lazy load) hoặc chỉ nạp khi cần. Có thể cân nhắc dùng Partytown để chạy script bên thứ ba trong Web Worker, tránh chặn main thread.

- Tối ưu mã xử lý tương tác: giảm công việc trong event handler, loại bỏ render không cần thiết. Với các framework như React, tránh re-render không cần thiết (ví dụ dùng React.memo, useCallback, memoization) để giảm thời gian xử lý trước lần paint tiếp theo.

- Hiển thị feedback nhanh: vì INP đo tới lần paint tiếp theo chứ không bắt buộc nội dung cuối cùng đã sẵn sàng, hãy hiển thị spinner hoặc skeleton loader ngay lập tức để người dùng thấy phản hồi, rồi tiếp tục tải nội dung nặng sau.

- Tránh forced reflow/layout thrashing: các thao tác thay đổi style rồi đọc thuộc tính layout (như getBoundingClientRect) ép trình duyệt phải tính toán lại layout nhiều lần. Gom các thay đổi style và tránh đọc layout trong vòng lặp.

- Chạy các tác vụ nặng trên thread khác bằng Web Worker khi có thể. Web Worker xử lý ở luồng riêng, gửi/nhận tin nhắn với main thread để giảm tải và giữ main thread sẵn sàng phản hồi tương tác.

Kiểm tra lại và lập danh sách hành động​

- Bật RUM để biết phần tử & kịch bản gây trễ.

- Dùng Chrome DevTools Performance để xác định hàm/process chiếm thời gian trên main thread.

- Tách/thu nhỏ các tác vụ dài, trì hoãn hoặc chuyển sang web worker.

- Tối ưu event handlers và render trong framework (memo, giảm state gây re-render).

- Kiểm tra và điều chỉnh mã bên thứ ba; cân nhắc Partytown.

- Hiển thị phản hồi UI ngay (spinner/skeleton) để cải thiện trải nghiệm người dùng ngay cả khi nội dung còn đang xử lý.

Thực hiện từng bước nhỏ, đo lại sau mỗi thay đổi và ưu tiên những tương tác phổ biến nhất theo dữ liệu người dùng để cải thiện INP một cách hiệu quả.

Nguồn: https://www.debugbear.com/docs/metrics/interaction-to-next-paint