INP là gì đang trở thành câu hỏi nóng hổi trong cộng đồng Web Developer khi Google chính thức đưa nó vào bộ chỉ số Core Web Vitals. Bạn đã bao giờ cảm thấy ức chế khi click vào một nút bấm trên điện thoại mà mãi không thấy phản hồi, hay nhấn mở menu mà trang web như bị “đóng băng” trong vài giây? Đó chính là vấn đề về khả năng phản hồi mà chỉ số Interaction to Next Paint (INP) ra đời để giải quyết triệt để. Hiểu rõ INP không chỉ giúp cải thiện trải nghiệm người dùng mà còn là chìa khóa để giữ vững thứ hạng trên kết quả tìm kiếm của Google.
INP là gì? Định nghĩa kỹ thuật chuẩn xác
Interaction to Next Paint (INP) là một chỉ số Core Web Vital dùng để đo lường khả năng phản hồi toàn diện của một trang web đối với mọi tương tác của người dùng trong suốt vòng đời của trang. Khác với chỉ số FID (First Input Delay) trước đây chỉ chú trọng vào lần tương tác đầu tiên, INP quan sát tất cả các hành động như nhấp chuột, chạm màn hình hoặc nhấn phím để đưa ra một con số đại diện cho độ trễ phản hồi của toàn bộ website.
Về mặt kỹ thuật, INP ghi lại thời gian từ khi người dùng bắt đầu một tương tác cho đến khi trình duyệt thực sự hiển thị (paint) khung hình tiếp theo trên màn hình. Điểm INP thấp đồng nghĩa với việc trang web phản hồi cực nhanh, tạo cảm giác mượt mà. Ngược lại, nếu chỉ số này cao, người dùng sẽ cảm thấy trang web bị khựng, lag, dẫn đến sự khó chịu và tăng tỷ lệ thoát trang nhanh chóng.
Cách INP hoạt động trên trình duyệt
Để tối ưu được chỉ số này, bạn cần hiểu rõ cơ chế vận hành của nó bên dưới “mui xe”. INP không đơn thuần là thời gian thực thi JavaScript. Nó là tổng hợp của ba giai đoạn riêng biệt xảy ra liên tiếp:
- Input Delay (Độ trễ đầu vào): Bắt đầu khi người dùng tương tác nhưng trình duyệt chưa thể xử lý ngay vì “luồng chính” (Main Thread) đang bận làm việc khác, ví dụ như tải script bên thứ ba hoặc phân giải CSS nặng.
- Processing Time (Thời gian xử lý): Đây là thời gian trình duyệt thực thi các đoạn mã JavaScript (Event Handlers) liên quan đến tương tác đó.
- Presentation Delay (Độ trễ hiển thị): Sau khi xử lý xong logic, trình duyệt cần tính toán lại bố cục (Layout) và vẽ lại các pixel lên màn hình (Paint). Đây thường là giai đoạn bị bỏ quên nhưng lại chiếm tỷ trọng lớn trong INP.
Hãy tưởng tượng bạn nhấn vào nút “Thêm vào giỏ hàng”. Nếu trình duyệt bận xử lý quảng cáo (Input Delay), sau đó chạy code thêm hàng (Processing), rồi mới vẽ lại icon giỏ hàng (Presentation), tổng thời gian của chuỗi này chính là giá trị INP mà Google ghi nhận.
Ngưỡng INP tốt, trung bình và kém
Google đánh giá chỉ số INP dựa trên dữ liệu thực tế từ báo cáo trải nghiệm người dùng Chrome (CrUX). Dưới đây là bảng phân loại ngưỡng chuẩn để bạn đối chiếu cho website của mình:
| Xếp loại | Ngưỡng INP | Trạng thái trải nghiệm |
| Tốt (Good) | < 200ms | Trang web phản hồi tức thì, mượt mà. |
| Cần cải thiện | ≥ 200ms đến 500ms | Người dùng bắt đầu cảm thấy độ trễ nhẹ. |
| Kém (Poor) | > 500ms | Trang web phản hồi chậm chạp, gây khó chịu. |
Dựa trên dữ liệu từ HTTP Archive, việc đạt được ngưỡng “Tốt” (≤ 200ms) khó khăn hơn nhiều so với FID cũ, đòi hỏi các nhà phát triển phải tối ưu hóa mã nguồn một cách nghiêm túc và tinh gọn hơn bao giờ hết.
Cách kiểm tra chỉ số INP của website
Để biết website của mình đang đứng ở đâu, bạn có thể sử dụng các công cụ miễn phí nhưng cực kỳ mạnh mẽ sau đây:
Dùng Google PageSpeed Insights
Đây là cách nhanh nhất để xem dữ liệu thực tế. Bạn chỉ cần nhập URL, công cụ sẽ trích xuất dữ liệu từ người dùng thực trong 28 ngày gần nhất. Nếu mục INP hiện màu xanh, bạn có thể yên tâm, nhưng nếu là màu vàng hoặc đỏ, bạn cần bắt tay vào sửa lỗi ngay.
Dùng Chrome DevTools
Để “bắt bệnh” chính xác, hãy mở tab Performance trong Chrome DevTools. Nhấn nút Record, sau đó thực hiện các tương tác trên trang như mở Menu, Click vào sản phẩm. Sau khi dừng, bạn sẽ thấy phần Interactions hiển thị rõ ràng từng mốc thời gian của INP, giúp bạn biết chính xác dòng code nào đang làm chậm hệ thống.
Dùng Google Search Console
Trong mục “Core Web Vitals”, Google sẽ liệt kê danh sách các URL đang gặp vấn đề về INP. Đây là “danh sách việc cần làm” quan trọng nhất cho SEO-er để đảm bảo toàn bộ các trang trên site đều đạt chuẩn chất lượng.
Cách cải thiện INP hiệu quả cho Developer
Tối ưu INP là một quá trình tinh chỉnh luồng chính (Main Thread). Dưới đây là 3 cách hiệu quả nhất để giảm chỉ số này:
Cách 1 — Nhường luồng chính (Yield to Main Thread)
Khi bạn có một tác vụ JavaScript quá nặng, nó sẽ chặn mọi tương tác khác. Hãy chia nhỏ các tác vụ lớn (Long Tasks) thành các phần nhỏ hơn bằng cách sử dụng setTimeout hoặc phương thức hiện đại scheduler.yield(). Điều này tạo ra các khoảng trống để trình duyệt có thể chen vào vẽ khung hình mới.
Cách 2 — Tối ưu hóa Script bên thứ ba
Các đoạn mã quảng cáo, chatbot hoặc tracking thường là thủ phạm gây nghẽn luồng chính. Hãy sử dụng thuộc tính defer hoặc async khi nhúng script, hoặc tốt hơn là sử dụng Partytown để đẩy các script này sang chạy ở Web Worker, giải phóng hoàn toàn Main Thread cho UI.
Cách 3 — Giảm thiểu Layout Thrashing
Việc thay đổi DOM liên tục trong các vòng lặp khiến trình duyệt phải tính toán lại kích thước (Reflow) liên tục. Hãy gom các thao tác đọc và ghi DOM lại với nhau hoặc sử dụng requestAnimationFrame để đảm bảo các thay đổi về giao diện được thực hiện đồng bộ với chu kỳ vẽ của màn hình.
INP ảnh hưởng đến SEO thế nào?
Kể từ tháng 3/2024, INP đã trở thành một yếu tố xếp hạng chính thức (Ranking Factor) trong thuật toán của Google. Điều này có nghĩa là nếu hai trang web có nội dung chất lượng tương đương, trang nào có chỉ số INP tốt hơn sẽ có cơ hội đứng vị trí cao hơn trên bảng xếp hạng.
Google không chỉ muốn cung cấp thông tin đúng, họ còn muốn đảm bảo người dùng có trải nghiệm tương tác dễ chịu. Một website có INP cao thường đi kèm với tỷ lệ thoát cao và tỷ lệ chuyển đổi thấp. Do đó, tối ưu INP không chỉ là làm SEO, mà là đang trực tiếp cải thiện hiệu quả kinh doanh cho doanh nghiệp của bạn.
Câu hỏi thường gặp về INP
INP bao nhiêu là tốt?
Một chỉ số INP được coi là tốt khi đạt mức ≤ 200ms. Ở ngưỡng này, người dùng cảm thấy trang web phản hồi gần như tức thì. Nếu chỉ số của bạn vượt quá 500ms, trang web bị đánh giá là kém và cần được tối ưu ngay lập tức để tránh mất thứ hạng SEO.
INP khác FID thế nào?
FID chỉ đo độ trễ của lần tương tác đầu tiên và chỉ tính phần Input Delay. Trong khi đó, INP đo toàn bộ các tương tác trong suốt phiên làm việc và tính tổng cả 3 giai đoạn: trì trệ đầu vào, thời gian xử lý và thời gian hiển thị khung hình tiếp theo.
Làm sao cải thiện INP nhanh nhất?
Cách nhanh nhất là chia nhỏ các JavaScript Long Tasks bằng setTimeout, loại bỏ các script bên thứ ba không cần thiết và giảm kích thước cây DOM. Việc tối ưu hóa các event handler để chúng không thực hiện các tính toán nặng đồng bộ cũng mang lại hiệu quả tức thì.
Interaction to Next Paint là một bước tiến của Google trong việc đo lường trải nghiệm người dùng thực tế một cách khắt khe và chính xác hơn. Việc hiểu rõ INP là gì và triển khai các kỹ thuật tối ưu hóa luồng chính sẽ giúp website của bạn không chỉ nhanh hơn mà còn thân thiện hơn trong mắt cả người dùng lẫn bộ máy tìm kiếm. Hãy bắt đầu kiểm tra chỉ số INP của mình ngay hôm nay để không bị tụt lại phía sau trong cuộc đua hiệu năng web.
Đọc tiếp: [CLS là gì? Cách tối ưu Cumulative Layout Shift để SEO website hiệu quả]
Tham khảo tài liệu chuyên sâu tại: web.dev/inp