INP (Interaction to Next Paint) là thước đo toàn diện hơn FID, bao gồm toàn bộ thời gian từ tương tác đến phản hồi trực quan trên màn hình. Kể từ khi chính thức thay thế FID trong bộ Core Web Vitals vào tháng 3 năm 2024, INP đã trở thành tiêu chuẩn mới để đánh giá mức độ nhạy của website. Mời quý bạn đọc cùng Xuyên Việt Media tìm hiểu ngay.

Mục lục nội dung

INP (Interaction to Next Paint) là gì

INP (Interaction to Next Paint) là một chỉ số quan trọng trong bộ Core Web Vitals của Google, được sử dụng để đánh giá khả năng phản hồi (responsiveness) của một trang web.

Hiểu một cách đơn giản, INP đo lường thời gian từ khi người dùng thực hiện một hành động tương tác trên trang web cho đến khi họ thấy phản hồi hình ảnh tiếp theo trên màn hình.

Từ tháng 3/2024, INP thay thế FID trong bộ Core Web Vitals
Website có INP thấp sẽ được Google đánh giá cao hơn, cải thiện thứ hạng tìm kiếm.
INP phản ánh trải nghiệm thực tế của người dùng, nên rất quan trọng với các trang có nhiều tương tác như form, nút CTA, giỏ hàng…

INP theo dõi tất cả các tương tác mà người dùng thực hiện trên một trang trong suốt thời gian họ ở lại trang đó, và sau đó báo cáo một giá trị duy nhất đại diện cho độ trễ của hầu hết các tương tác đó.

Các loại tương tác mà INP tính đến bao gồm:

Nhấp chuột (clicks)
Chạm (taps) trên màn hình cảm ứng
Nhấn phím (key presses) trên bàn phím vật lý hoặc bàn phím ảo

Các tương tác như cuộn trang (scrolling) hay di chuột (hovering) thường không được tính vào INP, trừ khi chúng kích hoạt một tương tác khác như nhấp chuột.

Khác với chỉ số FID (First Input Delay) chỉ đo tương tác đầu tiên, INP theo dõi toàn bộ các tương tác trong suốt phiên truy cập và chọn ra tương tác có độ trễ cao nhất để đánh giá

Vai trò của INP trong digital marketing

Trải nghiệm người dùng: Một trang web phản hồi nhanh chóng tạo cảm giác mượt mà, chuyên nghiệp và đáng tin cậy. Khi người dùng nhấp vào một nút và thấy phản hồi ngay lập tức, trải nghiệm của họ sẽ tốt hơn rất nhiều so với việc phải chờ đợi. INP là thước đo trực tiếp cho trải nghiệm này.
Xếp hạng SEO: Core Web Vitals là một yếu tố xếp hạng quan trọng của Google. Một điểm INP tốt có thể giúp trang web của bạn có thứ hạng cao hơn trong kết quả tìm kiếm, đặc biệt là khi cạnh tranh với các trang web khác có chất lượng nội dung tương đương.
Tỷ lệ chuyển đổi: Khi người dùng có trải nghiệm tốt, họ có nhiều khả năng tiếp tục tương tác, thực hiện các hành động mong muốn (mua hàng, đăng ký, điền form), từ đó tăng tỷ lệ chuyển đổi cho website.

Cách đo lường chỉ số INP

INP có thể được đo lường bằng cả dữ liệu thực tế từ người dùng và môi trường giả lập — tùy vào mục tiêu phân tích và công cụ bạn sử dụng.

1. Đo INP trong môi trường giả lập (lab data)

Sử dụng các công cụ mô phỏng để kiểm tra INP:

Google Lighthouse: Chạy kiểm tra hiệu suất trên Chrome DevTools hoặc PageSpeed Insights.
WebPageTest: Cho phép cấu hình thiết bị, mạng và hành vi tương tác.
Chrome DevTools Performance Tab: Ghi lại các tương tác và phân tích độ trễ.

Lưu ý: Dữ liệu giả lập không phản ánh đầy đủ trải nghiệm thực tế của người dùng — chỉ nên dùng để kiểm tra kỹ thuật hoặc thử nghiệm.

2. Đo INP bằng dữ liệu thực tế (field data)

Đây là cách chính xác nhất để đo INP vì phản ánh trải nghiệm thực tế của người dùng:

Chrome User Experience Report (CrUX): Dữ liệu tổng hợp từ người dùng Chrome, hiển thị trong PageSpeed Insights.
Real User Monitoring (RUM): Tích hợp mã theo dõi vào website để ghi lại tương tác thực tế.
Google Search Console: Báo cáo Core Web Vitals hiển thị INP nếu website đủ điều kiện.

INP được tính bằng tương tác có độ trễ cao nhất trong suốt phiên truy cập, loại bỏ các giá trị ngoại lệ

3. Dùng JavaScript để đo INP theo thời gian thực

Google cung cấp thư viện chính thức:

<script src=”https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js”></script>
<script>
webVitals.onINP((metric) => {
console.log(‘INP:’, metric.value);
});
</script>

4. Kết hợp công cụ đo hiệu suất chuyên sâu

SpeedCurve, Calibre, New Relic, Datadog – có hỗ trợ Core Web Vitals và INP.
Dành cho website lớn, cần giám sát liên tục theo thời gian thực và phân vùng theo thiết bị, khu vực, trình duyệt,…

Giá trị INP bao nhiêu là tốt?

Theo Google, các ngưỡng đánh giá INP như sau:

Tốt: Dưới hoặc bằng 200 mili giây (ms). Điều này có nghĩa là trang của bạn phản hồi rất nhanh và nhất quán với các tương tác của người dùng.
Cần cải thiện: Từ 200 ms đến 500 ms. Trang web vẫn phản hồi, nhưng có thể có những điểm cần tối ưu để mang lại trải nghiệm tốt hơn.
Kém: Trên 500 ms. Trang web phản hồi chậm, gây khó chịu cho người dùng và có thể ảnh hưởng tiêu cực đến trải nghiệm của họ.

Cách tối ưu chỉ số INP

Tối ưu chỉ số INP là chìa khóa để cải thiện khả năng phản hồi của website, từ đó nâng cao trải nghiệm người dùng và thứ hạng SEO. Dưới đây là các chiến lược hiệu quả nhất được khuyến nghị bởi Google và các chuyên gia hiệu năng web

1. Tối ưu JavaScript

Loại bỏ hoặc trì hoãn các script không cần thiết.
Dùng code splitting để chỉ tải JS cần thiết cho từng trang.
Sử dụng lazy loading cho các phần tử không cần hiển thị ngay.
Tránh các hàm xử lý nặng (ví dụ: tính toán lớn, for lồng nhau) ngay trong các sự kiện như onclick, oninput.
Sử dụng requestIdleCallback, requestAnimationFrame để trì hoãn logic không quan trọng.

2. Tối ưu event handlers (trình xử lý sự kiện)

Giữ cho handler < 50ms nếu có thể.
Chia nhỏ logic thành nhiều phần hoặc đẩy sang Web Worker nếu quá nặng.
Không thay đổi layout hoặc DOM nhiều trong handler.
Gộp các thay đổi DOM lại một lần (batch DOM updates).

3. Tối ưu giao diện

Sử dụng CSS animation thay vì JS animation nếu có thể (mượt và nhẹ hơn).
Dùng will-change cho các phần tử thường xuyên thay đổi để trình duyệt tối ưu trước.
Giảm độ phức tạp của layout – tránh nested flex/grid nặng, hình ảnh lớn không cần thiết.
Critical CSS: Chỉ tải CSS cần thiết để hiển thị phần nội dung đầu tiên trên màn hình (Above The Fold) một cách đồng bộ, còn lại tải bất đồng bộ. Điều này giúp hiển thị nội dung nhanh hơn, làm cho trang có vẻ phản hồi nhanh hơn.
Progressive Enhancement: Xây dựng trang web với lớp cơ bản hoạt động tốt ngay cả khi JavaScript bị vô hiệu hóa hoặc tải chậm, sau đó bổ sung thêm các tính năng nâng cao bằng JavaScript.

4. Sử dụng Web Worker (nếu có logic nặng)

Di chuyển các thao tác phức tạp (ví dụ: xử lý dữ liệu lớn, phân tích, xử lý ảnh) ra khỏi main thread.
Web Worker giúp tránh “đóng băng” UI khi người dùng thao tác.

5. Tối ưu đầu vào

Dùng debounce/throttle để không gọi API hoặc xử lý liên tục mỗi khi người dùng gõ.
Giới hạn kết quả hiển thị để tránh render quá nhiều.

6. Quản lý script bên thứ ba

Đánh giá lại sự cần thiết: Xác định xem script bên thứ ba có thực sự cần thiết cho trải nghiệm cốt lõi của người dùng hay không.
Tải không đồng bộ (Asynchronously load): Luôn đảm bảo script bên thứ ba được tải không đồng bộ (async hoặc defer).
Lười tải (Lazy Load): Đối với các script không cần thiết ngay lập tức (ví dụ: widget chat), hãy tải chúng khi người dùng cuộn đến hoặc tương tác với khu vực chứa chúng.
Tự lưu trữ (Self-host) nếu có thể: Đối với một số script nhỏ, việc tự lưu trữ có thể mang lại hiệu suất tốt hơn so với việc tải từ CDN của bên thứ ba.

So sánh INP và FID

Dưới đây là bảng so sánh đầy đủ và rõ ràng giữa INP (Interaction to Next Paint) và FID (First Input Delay) – hai chỉ số liên quan đến độ phản hồi người dùng trong Core Web Vitals:

Tiêu chí	FID (First Input Delay)	INP (Interaction to Next Paint)
Mục đích đo	Đo độ trễ của lần tương tác đầu tiên	Đo thời gian phản hồi của tất cả các tương tác người dùng
Loại tương tác đo	Chỉ đo tương tác đầu tiên	Tổng hợp tất cả tương tác, chọn tương tác chậm nhất (hoặc gần nhất)
Đo phần nào của tương tác	Chỉ đo thời gian delay bắt đầu xử lý	Đo toàn bộ quá trình: từ tương tác → xử lý → đến khi UI bắt đầu phản hồi (paint)
Có tính thời gian xử lý không?	❌ Không	✅ Có
Có tính thời gian render không?	❌ Không	✅ Có
Chính xác với trải nghiệm người dùng?	❌ Kém chính xác (chỉ đo 1 tương tác)	✅ Chính xác hơn (tính toàn bộ quá trình phản hồi)
Tình trạng hiện tại	Đã ngừng sử dụng từ tháng 3/2024	✅ Đang là chỉ số chính thức trong Core Web Vitals
Ngưỡng đánh giá tốt	≤ 100ms	≤ 200ms

Vì sao có website không có số liệu INP

Một số website không có số liệu INP là do không có đủ dữ liệu tương tác thực tế từ người dùng để Google ghi nhận. Dưới đây là các nguyên nhân phổ biến:

1. Người dùng không thực hiện tương tác đo được

Trang được tải nhưng không có hành động như click, chạm, gõ phím.
Các thao tác như cuộn trang, rê chuột, zoom không được tính vào INP

2. Truy cập từ bot hoặc trình duyệt không có giao diện

Ví dụ: trình thu thập dữ liệu (crawler) của Google hoặc các công cụ kiểm tra tự động.
Những lượt truy cập này không thực hiện tương tác thực tế, nên không có dữ liệu INP

3. Tương tác nằm trong iframe không đo được

Nếu người dùng tương tác với nội dung trong iframe (ví dụ: video nhúng), JavaScript không thể truy cập để đo INP.
Điều này gây ra sự khác biệt giữa dữ liệu từ CrUX và RUM

4. Website chưa đủ lượng truy cập để Google tổng hợp dữ liệu

Google chỉ hiển thị số liệu INP trong PageSpeed Insights hoặc Search Console nếu website có đủ lượt truy cập thực tế.
Các trang mới, ít traffic hoặc nội dung tĩnh thường không có dữ liệu INP.

INP (Interaction to Next Paint) là một sự thay đổi quan trọng và mang tính tích cực trong cách Google đánh giá trải nghiệm người dùng trên website. Không chỉ đơn thuần là tốc độ tải trang hay độ trễ của tương tác đầu tiên, INP cung cấp một cái nhìn toàn diện và sâu sắc hơn về khả năng phản hồi của trang web trong suốt hành trình tương tác của người dùng.

Đánh giá post

INP (Interaction to Next Paint) là gì: Vai trò và cách tối ưu