Xem danh mục

INP (Interaction to Next Paint): Kỹ thuật tối ưu hóa khả năng phản hồi

Văn Hùng Danh
Cập nhật vào 06/01/2026

Đọc trong: 3 phút

INP đo lường khoảng thời gian từ khi người dùng thực hiện một tương tác (nhấp chuột, chạm màn hình, nhấn phím) cho đến khi trình duyệt có thể vẽ (paint) được khung hình tiếp theo để phản hồi tương tác đó.

Mục tiêu: Đạt mức INP $\le 200ms$.

1. Cấu trúc của một tương tác (3 giai đoạn của INP) #

Để tối ưu INP, bạn cần can thiệp vào 3 giai đoạn mà trình duyệt phải xử lý:

  1. Input Delay (Trễ đầu vào): Thời gian chờ các tác vụ nền (background tasks) đang chạy dở trên Main Thread kết thúc.
  2. Processing Time (Thời gian xử lý): Thời gian thực thi các hàm JavaScript (Event Listeners) liên quan đến tương tác.
  3. Presentation Delay (Trễ hiển thị): Thời gian trình duyệt tính toán lại bố cục (Reflow) và vẽ lại giao diện (Repaint).

2. Kỹ thuật tối ưu hóa “Hardcore” cho INP #

2.1. Phá vỡ các tác vụ dài (Breaking up Long Tasks) #

Bất kỳ tác vụ JS nào chạy liên tục trên 50ms đều bị coi là “Long Task”, nó sẽ khóa Main Thread và khiến người dùng không thể tương tác.

  • Kỹ thuật: Sử dụng yield hoặc scheduler.yield() (API mới) để chia nhỏ code.
  • Thực thi: Sử dụng setTimeout(() => { ... }, 0) để đẩy các tác vụ không quan trọng xuống hàng đợi, nhường chỗ cho phản hồi giao diện.

2.2. Tối ưu hóa Event Listeners (Xử lý sự kiện) #

  • Tránh xử lý nặng trong Event: Đừng thực hiện các phép tính phức tạp ngay khi người dùng click. Hãy thay đổi giao diện trước (hiện loading), sau đó mới xử lý dữ liệu.
  • Sử dụng requestIdleCallback: Đẩy các logic như gửi dữ liệu tracking, analytics vào thời điểm trình duyệt đang rảnh rỗi.

2.3. Giảm thiểu “Layout Thrashing” (Xáo trộn bố cục) #

Việc liên tục đọc và ghi các thuộc tính hình học (như offsetWidth, style.left) trong một vòng lặp sẽ ép trình duyệt phải tính toán lại bố cục nhiều lần.

  • Hành động: Luôn đọc các giá trị trước, sau đó mới ghi (thay đổi style) một lượt để trình duyệt thực hiện Batch Update.

3. Tối ưu hóa phản hồi thị giác (Presentation) #

Người dùng cảm thấy “mượt” khi họ thấy phản hồi ngay lập tức, dù tác vụ bên dưới chưa xong.

  • Phản hồi tức thì (Immediate Feedback): Khi người dùng nhấp vào nút “Thêm vào giỏ hàng”, hãy đổi màu nút hoặc hiện icon xoay ngay lập tức thay vì đợi API trả về kết quả thành công.
  • Sử dụng content-visibility: auto: Giúp trình duyệt bỏ qua việc render các phần tử nằm ngoài khung hình (off-screen), giải phóng tài nguyên cho các tương tác hiện tại.

4. Công cụ Debug INP chuyên sâu #

Để tối ưu INP, bạn không thể chỉ nhìn vào điểm số, bạn phải tìm được “thủ phạm” gây lag:

  1. Web Vitals Extension: Theo dõi INP trực tiếp khi bạn tương tác trên trang web.
  2. Chrome DevTools (Performance Tab): Tìm các dải màu đỏ (Long Tasks) và xem “Main Thread” đang bị nghẽn ở hàm JS nào.
  3. PageSpeed Insights (Field Data): Xem dữ liệu thực tế từ người dùng (CrUX report) để biết trang nào trên site đang có INP kém.

5. Checklist thực hành đạt điểm xanh INP #

  • [ ] 1. Long Tasks: Đã quét toàn bộ trang để đảm bảo không có tác vụ JS nào chạy quá 50ms chưa?
  • [ ] 2. Thư viện bên thứ ba: Đã trì hoãn (defer) các script quảng cáo, chatbot… để chúng không chiếm Main Thread lúc trang đang tải chưa?
  • [ ] 3. Trình xử lý sự kiện: Các hàm onClick, onScroll đã được tối ưu bằng kỹ thuật Debounce hoặc Throttle chưa?
  • [ ] 4. Feedback: Người dùng có nhận được phản hồi thị giác trong vòng 100ms sau khi tương tác không?
  • [ ] 5. CSS Animation: Các hiệu ứng chuyển động có đang sử dụng thuộc tính will-change để ép GPU xử lý không?

6. Kết luận: INP và sự thống trị của Trải nghiệm (UX) #

Google chuyển từ FID sang INP vì muốn đo lường trải nghiệm trong suốt phiên làm việc, không chỉ lần tương tác đầu tiên.

  1. Tín hiệu hài lòng: Một trang web có INP thấp tạo ra cảm giác tin cậy. Người dùng sẽ ở lại lâu hơn, đọc nhiều nội dung hơn.
  2. Lợi thế AI Overview: Google AI ưu tiên các nguồn tin mà người dùng có thể tương tác mượt mà. Nếu trang web của bạn bị treo khi người dùng cố gắng mở một menu hoặc xem ảnh, điểm chất lượng của trang sẽ bị hạ thấp nghiêm trọng.

Lời kết: Tối ưu INP là đỉnh cao của SEO Kỹ thuật. Nó đòi hỏi sự phối hợp giữa tư duy lập trình tối ưu và sự tinh tế trong thiết kế giao diện. Khi bạn làm chủ được INP, bạn đã tạo ra một website không chỉ nhanh ở tốc độ tải, mà còn “nhạy” ở mọi lần chạm.