Interaction To Next Paint Là Gì? Toàn Tập Về Chỉ Số Core Web Vitals Mới Thay Thế FID

Giới thiệu tổng quan về Interaction to Next Paint

Interaction to Next Paint (INP) là một trong ba chỉ số cốt lõi của bộ Core Web Vitals do Google phát triển, chính thức thay thế First Input Delay (FID) từ tháng 3 năm 2024. INP đo lường khả năng phản hồi của trang web khi người dùng tương tác, từ click chuột, chạm màn hình cho đến gõ bàn phím. Chỉ số này phản ánh trải nghiệm thực tế của người dùng về độ mượt mà và tốc độ phản hồi của giao diện.

Thay vì chỉ đo độ trễ của lần tương tác đầu tiên như FID, INP ghi nhận toàn bộ các tương tác trong suốt phiên truy cập và báo cáo giá trị tệ nhất. Điều này giúp chủ sở hữu website có cái nhìn toàn diện hơn về hiệu suất tương tác thực tế. Một trang web đạt INP tốt sẽ mang lại cảm giác phản hồi ngay lập tức, giúp người dùng không cảm thấy bực bội khi thao tác.

Interaction to Next Paint là gì? Giải thích chi tiết bản chất và cơ chế hoạt động

Định nghĩa chính xác của INP

Interaction to Next Paint (INP) là chỉ số đo thời gian từ khi người dùng bắt đầu một tương tác (như click hoặc chạm) cho đến khi trình duyệt vẽ (paint) khung hình tiếp theo hiển thị phản hồi trực quan của tương tác đó. INP được tính bằng mili giây (ms) và giá trị càng thấp càng tốt.

Google phân loại INP thành ba mức: tốt (dưới 200ms), cần cải thiện (từ 200ms đến 500ms) và kém (trên 500ms). Các tương tác được đo bao gồm click chuột, chạm trên thiết bị di động, nhấn phím trên bàn phím ảo hoặc vật lý, kéo thả và các thao tác trên thanh cuộn.

Cơ chế đo lường chi tiết

Khi người dùng thực hiện một tương tác, trình duyệt sẽ khởi tạo một sự kiện. Thời gian bắt đầu được ghi nhận ngay tại thời điểm tương tác xảy ra. Quá trình xử lý bao gồm: thu thập dữ liệu sự kiện, chạy các hàm xử lý JavaScript, tính toán layout, và cuối cùng là paint khung hình mới lên màn hình. INP là tổng thời gian của chuỗi công việc này.

Có ba loại tương tác được INP ghi nhận:

• Tương tác click: Bao gồm click chuột, tap trên màn hình cảm ứng. Đo từ lúc ngón tay hoặc chuột chạm cho đến khi khung hình phản hồi đầu tiên xuất hiện.
• Tương tác bàn phím: Nhấn phím trên bàn phím vật lý hoặc ảo. Đo thời gian từ lúc nhấn phím đến khi ký tự xuất hiện hoặc giao diện thay đổi.
• Tương tác kéo thả và cuộn: Các thao tác kéo slider, kéo thả phần tử, hoặc tương tác với thanh cuộn dẫn đến thay đổi giao diện.

Vì sao Google thay thế FID bằng INP?



First Input Delay (FID) chỉ đo độ trễ của tương tác đầu tiên, bỏ qua các tương tác sau đó. Điều này không phản ánh đúng trải nghiệm tổng thể vì người dùng có thể gặp độ trễ ở các lần nhấp chuột tiếp theo. INP khắc phục hoàn toàn nhược điểm này bằng cách theo dõi toàn bộ các tương tác trong suốt phiên.

Một trang web có thể có FID tốt nhưng INP lại kém nếu có nhiều tác vụ JavaScript nặng được kích hoạt sau khi tải xong. Ví dụ, một trang thương mại điện tử có FID 50ms nhưng khi người dùng click vào nút “Thêm vào giỏ hàng”, phải mất 600ms để giỏ hàng cập nhật. Điều này khiến trải nghiệm trở nên tồi tệ dù FID vẫn đạt chuẩn.

So sánh chi tiết giữa INP và các chỉ số khác trong Core Web Vitals

Chỉ số	Đo lường	Mức tốt	Mức cần cải thiện	Mức kém
Interaction to Next Paint (INP)	Độ trễ phản hồi của tất cả tương tác	≤ 200ms	200ms – 500ms	> 500ms
First Input Delay (FID) – đã thay thế	Độ trễ tương tác đầu tiên	≤ 100ms	100ms – 300ms	> 300ms
Largest Contentful Paint (LCP)	Tốc độ tải nội dung chính	≤ 2.5 giây	2.5s – 4.0s	> 4.0s
Cumulative Layout Shift (CLS)	Độ ổn định bố cục	≤ 0.1	0.1 – 0.25	> 0.25

Lợi ích và hạn chế của việc tối ưu INP



Lợi ích khi đạt INP tốt

• Cải thiện trải nghiệm người dùng: Người dùng cảm thấy trang web phản hồi nhanh, mượt mà, giảm tỷ lệ thoát và tăng thời gian ở lại trang.
• Tăng thứ hạng tìm kiếm: Google sử dụng INP như một tín hiệu xếp hạng. Trang web đạt INP tốt có lợi thế cạnh tranh trong kết quả tìm kiếm.
• Tăng tỷ lệ chuyển đổi: Các nút kêu gọi hành động, form đăng ký, giỏ hàng hoạt động tức thì giúp tăng doanh thu và tương tác.
• Giảm chi phí vận hành: Một trang web được tối ưu tốt sẽ tiêu tốn ít tài nguyên xử lý hơn, giảm băng thông và thời gian máy chủ.

Hạn chế và thách thức

• Khó tối ưu với trang web phức tạp: Các ứng dụng web có nhiều logic JavaScript, animation, hoặc tải dữ liệu bất đồng bộ thường gặp khó khăn khi cải thiện INP.
• Phụ thuộc vào thiết bị và mạng: Thiết bị yếu, kết nối chậm có thể khiến INP tăng cao dù code đã tối ưu. Việc kiểm thử cần đa dạng thiết bị.
• Cần thời gian và chuyên môn: Xác định nguyên nhân gây INP cao và sửa lỗi đòi hỏi kiến thức sâu về hiệu suất web và công cụ debug.

Ứng dụng thực tế và hướng dẫn tối ưu Interaction to Next Paint

Các nguyên nhân phổ biến gây INP cao

Trải qua nhiều dự án tối ưu hiệu suất, tôi nhận thấy có 4 nhóm nguyên nhân chính dẫn đến INP kém:

1. Xử lý JavaScript quá lâu: Các event listener thực hiện nhiều tác vụ nặng, vòng lặp không cần thiết, xử lý DOM phức tạp ngay trong trình xử lý sự kiện.
2. Layout thrashing: Đọc và ghi DOM liên tục khiến trình duyệt phải tính toán layout nhiều lần trong cùng một khung hình.
3. Third-party scripts: Các script từ bên thứ ba như phân tích, quảng cáo, chat trực tuyến chạy đồng thời với tương tác của người dùng.
4. Rendering blocking: Tài nguyên CSS hoặc JavaScript chặn quá trình paint khiến khung hình phản hồi bị trì hoãn.

Quy trình tối ưu INP từng bước

Bước 1 – Đo lường và chẩn đoán: Sử dụng công cụ PageSpeed Insights, Lighthouse, hoặc Chrome DevTools Performance panel. Xác định các tương tác cụ thể có INP cao. Lọc theo loại tương tác (click, keypress), URL, và thiết bị.

Bước 2 – Phân tích nguyên nhân gốc: Ghi lại profile hiệu suất khi thực hiện tương tác. Xem xét phần “Main Thread” để tìm các tác vụ dài (long tasks) kéo dài hơn 50ms. Xác định hàm JavaScript nào tiêu tốn thời gian nhất.

Bước 3 – Áp dụng kỹ thuật tối ưu:

• Chia nhỏ tác vụ dài bằng cách sử dụng setTimeout, requestIdleCallback hoặc Web Workers cho các xử lý nặng.
• Debounce hoặc throttle các sự kiện tần suất cao như resize, scroll, input.
• Trì hoãn các tác vụ không quan trọng sau khi tương tác hoàn tất.
• Giảm thiểu layout thrashing bằng cách batch các thao tác đọc và ghi DOM.
• Sử dụng CSS transforms và opacity thay vì thay đổi các thuộc tính kích thước, vị trí gây layout.
• Loại bỏ hoặc tối ưu các third-party scripts, đặc biệt là các script đồng bộ.

Bước 4 – Kiểm tra và lặp lại: Sau khi áp dụng thay đổi, đo lại INP trên cùng một thiết bị và điều kiện mạng. So sánh kết quả trước và sau. Quy trình này cần lặp lại nhiều lần cho đến khi đạt mục tiêu dưới 200ms.

Ví dụ thực tế về cải thiện INP

Một trang thương mại điện tử có INP trung bình 450ms trên di động do script theo dõi sự kiện click sản phẩm. Script này thực hiện nhiều lệnh gọi API và cập nhật DOM phức tạp. Sau khi tối ưu bằng cách:

• Chuyển các lệnh gọi API sang dạng bất đồng bộ không chặn main thread.
• Batch các thao tác cập nhật giao diện lại một lần duy nhất.
• Thay thế JavaScript thuần bằng CSS animation cho hiệu ứng hover.

Kết quả INP giảm xuống còn 180ms, tỷ lệ chuyển đổi tăng 12% và tỷ lệ thoát giảm 8%.

Sai lầm thường gặp khi tối ưu INP và cách tránh


• Chỉ tập trung vào FID: Nhiều người vẫn còn thói quen tối ưu FID thay vì INP. Cần chuyển hướng sang đo lường và cải thiện INP cho tất cả tương tác.
• Bỏ qua thiết bị di động cấp thấp: Chỉ kiểm thử trên máy tính mạnh sẽ không phản ánh đúng trải nghiệm người dùng thực tế. Luôn kiểm tra trên thiết bị phổ biến, cấu hình trung bình.
• Tối ưu quá mức gây sớm: Defer toàn bộ JavaScript có thể làm giảm INP nhưng tăng LCP. Cần cân bằng giữa các chỉ số Core Web Vitals.
• Không đo lường nhiều lần: INP có thể dao động do nhiều yếu tố. Cần thu thập dữ liệu từ trường (field data) qua CrUX và đo lường ít nhất 7 ngày để có kết luận chính xác.

Lưu ý quan trọng khi làm việc với INP

INP là chỉ số phụ thuộc nhiều vào hành vi người dùng cụ thể. Một trang web có thể đạt INP tốt trên 90% lượt truy cập nhưng vẫn có thể có một số tương tác cá biệt có INP cao. Google sử dụng phân vị thứ 75 cho toàn bộ tương tác trên tất cả trang để xác định điểm số.

Các công cụ phòng thí nghiệm như Lighthouse không thể đo INP chính xác vì chúng không mô phỏng được sự tương tác phức tạp. Bắt buộc phải sử dụng dữ liệu thực tế từ người dùng (RUM) thông qua Performance Observer API hoặc dịch vụ như Google Analytics, Datadog RUM.

Khi chạy các framework như React, Vue, Angular, hãy chú ý đến batch cập nhật state. React 18 có tính năng Automatic Batching giúp giảm số lần render nhưng vẫn cần tối ưu các callback xử lý sự kiện dài. Sử dụng useTransition hoặc startTransition để đánh dấu các cập nhật không khẩn cấp.

Câu hỏi thường gặp về Interaction to Next Paint

INP có ảnh hưởng đến SEO không?

Có. INP là một trong ba chỉ số Core Web Vitals được Google sử dụng làm tín hiệu xếp hạng. Trang web có INP kém dưới 500ms sẽ bị ảnh hưởng tiêu cực đến thứ hạng tìm kiếm.

Làm sao để kiểm tra INP của website?

FID chỉ đo độ trễ của tương tác đầu tiên, còn INP đo tất cả các tương tác trong suốt phiên truy cập. INP cũng đo tổng thời gian xử lý bao gồm cả thời gian paint, trong khi FID chỉ đo phần delay trước khi bắt đầu xử lý sự kiện.

INP có áp dụng cho tương tác cuộn trang không?

INP chỉ đo các tương tác dẫn đến thay đổi giao diện như click nút cuộn, kéo thanh cuộn. Hành động cuộn trang thông thường không được tính là tương tác với INP mà được đo bằng các chỉ số khác.

Thời gian tối ưu để đạt INP tốt là bao lâu?

Tùy vào mức độ phức tạp của trang web. Với các trang tĩnh hoặc ít tương tác, có thể đạt trong vài ngày. Với ứng dụng web phức tạp, quy trình tối ưu có thể kéo dài 2-4 tuần bao gồm phân tích, triển khai và kiểm thử.

Tóm lại, Interaction to Next Paint là chỉ số sống còn đối với bất kỳ website nào muốn duy trì thứ hạng tốt và mang lại trải nghiệm người dùng xuất sắc. Việc hiểu rõ interaction to next paint là gì cùng với các kỹ thuật tối ưu chuyên sâu sẽ giúp bạn vượt trội so với đối thủ cạnh tranh. Bắt đầu đo lường ngay hôm nay và từng bước cải thiện để đáp ứng tiêu chuẩn khắt khe của Google.