INP là gì? Cách đo lường và tối ưu Interaction to Next Paint

Trước đây, Google sử dụng chỉ số FID (First Input Delay) để đo độ phản hồi của trang web nhưng FID chỉ phản ánh một thao tác duy nhất, chưa thể hiện đầy đủ trải nghiệm người dùng. Vì vậy, Google đã giới thiệu INP (Interaction to Next Paint), chỉ số mới trong bộ Core Web Vitals, đo toàn bộ thời gian phản hồi của website trong suốt quá trình người dùng tương tác. Bài viết này sẽ giúp bạn hiểu INP là gì cũng như cách đo lường và tối ưu chỉ số này để website phản hồi nhanh và mượt hơn.
 

 

INP là gì?

Interaction to Next Paint (INP) là một chỉ số trong bộ Core Web Vitals mới của Google, được sử dụng để đo lường độ phản hồi (responsiveness) của trang web. Cụ thể, INP metric ghi nhận thời gian giữa hành động của người dùng (ví dụ: nhấp chuột, chạm, nhập liệu) và khi trình duyệt hiển thị phản hồi trực quan đầu tiên trên màn hình (Next Paint). Chỉ số này không chỉ đo một lần tải trang ban đầu mà còn theo dõi phản hồi của trang web trong suốt thời gian người dùng tương tác với nó.

Google chia chỉ số INP thành ba mức độ để đánh giá trải nghiệm phản hồi của trang web:
 

Vai trò chiến lược của Interaction to Next Paint

Không chỉ là một chỉ số kỹ thuật, INP còn ảnh hưởng đến ba khía cạnh chiến lược quan trọng: trải nghiệm người dùng, xếp hạng SEO và hiệu suất kinh doanh.

1. Tối ưu trải nghiệm người dùng

Chỉ số Interaction to Next Paint là một trong những chỉ số phản ánh chân thực nhất về cảm nhận của người dùng khi tương tác với trang web. Dù trang có tải nhanh (LCP tốt) hay ổn định (CLS thấp), nếu người dùng nhấp mà không thấy phản hồi, họ vẫn cảm thấy “bị kẹt”. 

Một trải nghiệm mượt mà với INP thấp giúp người dùng:

- Cảm thấy kiểm soát được hành động của mình (bấm là thấy phản ứng ngay).

- Giảm tỷ lệ thoát (bounce rate) vì họ không phải chờ đợi.

- Tăng khả năng hoàn thành thao tác chuyển đổi như điền form, thêm sản phẩm vào giỏ hàng hoặc đăng ký tài khoản.

Các nghiên cứu UX cho thấy, chỉ cần độ trễ từ 100ms đến 300ms cũng đã ảnh hưởng đáng kể đến cảm nhận và hành vi của người dùng, đặc biệt trên mobile.

2. Ảnh hưởng đến SEO và Core Web Vitals

Từ tháng 3/2024, Google đã chính thức thay thế chỉ số FID (First Input Delay) bằng INP trong hệ thống đánh giá Core Web Vitals. Điều này có nghĩa là INP ảnh hưởng trực tiếp đến SEO. Một website có INP vượt chuẩn (thường >500ms bị coi là kém) có thể bị giảm điểm trải nghiệm người dùng (Page Experience), từ đó ảnh hưởng đến xếp hạng tìm kiếm.

3. Tác động đến kinh doanh (Business Metrics)

INP không chỉ là vấn đề kỹ thuật mà là đòn bẩy trực tiếp đến chuyển đổi và doanh thu. Khi người dùng phải chờ trang phản hồi, tỉ lệ bỏ giữa chừng (drop-off rate) tăng mạnh. Với các trang thương mại điện tử, chỉ cần chậm thêm 100 - 200ms cũng có thể làm giảm 1 - 2% tỷ lệ chuyển đổi.

Tối ưu INP có thể mang lại lợi ích rõ rệt:

- Tăng tỉ lệ click và completion rate trong các biểu mẫu, giỏ hàng, CTA.

- Cải thiện trải nghiệm thương hiệu, người dùng cảm nhận website chuyên nghiệp và đáng tin cậy.

- Giảm chi phí quảng cáo lãng phí, lượng traffic trả phí sẽ có tỉ lệ chuyển đổi tốt hơn nếu trang phản hồi nhanh.
 

 

Chỉ số INP được tính toán như thế nào?

Chỉ số Interaction to Next Paint được tính dựa trên toàn bộ các lần tương tác của người dùng trong suốt thời gian họ truy cập vào trang. Cụ thể, INP đo độ trễ tổng thể (latency) của các hành động như nhấp chuột, chạm màn hình, nhấn phím tính từ lúc người dùng thực hiện hành động đến khi trình duyệt hiển thị phản hồi hình ảnh đầu tiên (next paint).

Công thức tính cơ bản:

INP = max (độ trễ dài nhất trong các tương tác hợp lệ trên trang)

Trong đó, mỗi tương tác (interaction) gồm ba giai đoạn:

- Input Delay (Độ trễ đầu vào): Thời gian từ khi người dùng thực hiện hành động đến khi trình duyệt bắt đầu xử lý.

- Processing Time (Thời gian xử lý): Thời gian thực thi các đoạn JavaScript hoặc xử lý logic tương ứng.

- Presentation Delay (Độ trễ hiển thị): Thời gian để trình duyệt cập nhật giao diện và hiển thị phản hồi đầu tiên cho người dùng.

Tổng thời gian của ba giai đoạn này chính là Interaction Latency. Sau khi thu thập tất cả các tương tác trong một phiên duyệt trang, INP được xác định bằng giá trị cao nhất (hoặc gần cao nhất - 98th percentile) trong số các độ trễ đo được. Chẳng hạn:

 

Trong ví dụ này, chỉ số INP = 320ms (vì đây là lần phản hồi chậm nhất trong phiên truy cập).

 

 

So sánh sự khác biệt giữa chỉ số INP và FID

Khi Google thay thế chỉ số FID (First Input Delay) bằng INP (Interaction to Next Paint) trong bộ Core Web Vitals, điều đó đánh dấu một bước tiến lớn trong việc đánh giá độ phản hồi thực tế của trang web. Bảng dưới đây giúp bạn hiểu rõ sự khác biệt:
 

Cách đo lường chỉ số Interaction to Next Paint cho website

Để đánh giá chính xác chỉ số INP (Interaction to Next Paint), bạn cần xem xét cả hai nguồn dữ liệu: dữ liệu người dùng thực tế (Field Data) và dữ liệu mô phỏng (Lab Data). Trong đó, Field Data phản ánh trải nghiệm thật của người dùng còn Lab Data giúp bạn kiểm tra, mô phỏng và phát hiện nguyên nhân gây chậm.

1. Đo lường chỉ số INP trong thực tế

Dữ liệu thực tế (field data) phản ánh chính xác cách người dùng thật tương tác với website của bạn trên các thiết bị, trình duyệt và mạng khác nhau. Cách kiểm tra nhanh nhất như sau:

Bước 1: Bạn truy cập PageSpeed Insights.

Bước 2: Sau đó, dán URL trang bạn muốn kiểm tra và nhấn Phân tích (Analyze).

Bước 3: Trong phần “Field Data”, tìm mục Interaction to Next Paint (INP).

Kết quả sẽ hiển thị mức đánh giá:

- Nếu INP ≤ 200ms: Tốt

- 200 - 500ms: Cần cải thiện

- > 500ms: Kém

 

 

Ngoài PageSpeed Insights, bạn có thể tham khảo thêm:

- Google Search Console: Truy cập mục Core Web Vitals để xem báo cáo INP tổng thể trên toàn website.

- Chrome UX Report (CrUX): Dành cho lập trình viên muốn truy xuất dữ liệu INP chi tiết qua BigQuery hoặc CrUX Dashboard trên Looker Studio.

Nếu website có nhiều trang, bạn hãy kiểm tra các trang có lượng truy cập cao nhất trước vì đó là nơi ảnh hưởng lớn nhất đến trải nghiệm tổng thể.

2. Đo lường chỉ số INP trong môi trường giả lập

Khi website còn mới hoặc chưa có đủ dữ liệu thực, bạn có thể dùng Chrome DevTools để phân tích INP metric trong môi trường giả lập và xác định nguyên nhân gây chậm phản hồi. 

Bạn có thể đo lường chỉ số INP bằng Chrome DevTools theo các bước sau:

Bước 1: Mở website trong Chrome.

Bước 2: Bạn nhấn F12 để mở DevTools và chọn tab Performance.

Bước 3: Nhấn nút tròn Start profiling and reload page để bắt đầu ghi lại hoạt động.
 

 

Bước 4: Sau khi trang tải xong, thực hiện thao tác tương tác (click, nhập liệu, mở menu,....).

Bước 5: Dừng ghi và xem biểu đồ hiệu suất. Các đoạn màu vàng hoặc đỏ thể hiện thời gian xử lý lâu, là nguyên nhân khiến chỉ số INP tăng cao.

 

 

Ngoài DevTools, bạn có thể sử dụng Lighthouse (tích hợp trong Chrome DevTools) hoặc WebPageTest.org để mô phỏng hiệu suất trên nhiều thiết bị và tốc độ mạng khác nhau.

Nguyên nhân chính gây ra tình trạng chỉ số INP tăng cao

Chỉ số Interaction to Next Paint tăng cao thường xuất phát từ việc trình duyệt không thể phản hồi kịp thời với các hành động của người dùng. Dưới đây là 5 nguyên nhân phổ biến nhất mà các website thường gặp.

1. JavaScript thực thi quá nhiều, chặn phản hồi UI

Một trong những nguyên nhân lớn nhất khiến INP tăng cao là JavaScript chạy quá nhiều trên luồng chính (main thread). Mỗi khi người dùng nhấp chuột, chạm màn hình hoặc nhập liệu, trình duyệt cần có thời gian để xử lý các event tương ứng. Tuy nhiên, nếu JavaScript đang thực thi các tác vụ nặng, ví dụ như tải dữ liệu lớn, tính toán phức tạp hoặc render lại toàn bộ component thì event của người dùng sẽ phải chờ đến khi các đoạn mã đó hoàn tất.

Kết quả là, người dùng cảm thấy trang web “đơ” hoặc không phản hồi ngay lập tức, làm tăng thời gian Input Delay và kéo theo chỉ số INP xấu đi đáng kể.

2. Các tác vụ dài (long tasks) làm treo luồng chính

Long tasks là những đoạn mã JavaScript hoặc công việc trên main thread chạy liên tục lâu hơn 50 mili giây. Khi điều này xảy ra, trình duyệt không thể xử lý các sự kiện mới hoặc render lại giao diện, khiến mọi hành động của người dùng bị trễ hoặc bỏ lỡ.

Ví dụ, một tác vụ JavaScript kéo dài 200ms có thể khiến ba hoặc bốn thao tác người dùng bị “xếp hàng chờ”. Do chỉ số Interaction to Next Paint được đo dựa trên thời gian phản hồi sau mỗi tương tác, các long tasks như vậy gần như luôn khiến INP tăng cao.

3. Các animation, hiệu ứng CSS phức tạp không được tối ưu

Những hiệu ứng chuyển động đẹp mắt như animation, parallax, hover effect hoặc transition phức tạp nếu không được tối ưu có thể làm nghẽn quá trình paint và tăng độ trễ hiển thị (presentation delay).

Trình duyệt phải tính toán lại layout, repaint hoặc reflow cho toàn bộ vùng giao diện sau mỗi khung hình (frame), đặc biệt trên thiết bị di động có hiệu năng thấp. Khi người dùng tương tác trong lúc các animation này đang chạy, trình duyệt phải xử lý thêm nhiều frame song song, khiến phản hồi bị chậm đáng kể.

 

 

4. DOM quá lớn, thao tác DOM chậm

Một DOM tree quá lớn hoặc phức tạp (ví dụ hàng nghìn node, lồng nhau nhiều tầng) khiến việc render lại giao diện hoặc cập nhật nội dung sau mỗi tương tác trở nên chậm chạp. Khi người dùng nhấp vào một nút hoặc thay đổi dữ liệu, trình duyệt phải cập nhật lại nhiều phần tử cùng lúc, dẫn đến layout reflow và repaint kéo dài.

Đặc biệt trong các ứng dụng SPA (Single Page Application) hoặc framework như React/Vue, nếu state thay đổi kích hoạt quá nhiều re-render, INP có thể tăng đột biến trong các trang có nội dung động hoặc danh sách dài.

5. Sự kiện không được xử lý bất đồng bộ (async) đúng cách

Nhiều lập trình viên viết code xử lý sự kiện (event handlers) một cách đồng bộ, nghĩa là mọi thao tác đều chạy ngay trên main thread và chặn toàn bộ quá trình render cho đến khi hoàn tất.

Ví dụ, một event onClick gọi API, xử lý dữ liệu, rồi cập nhật giao diện, Nếu tất cả đều thực hiện đồng bộ, người dùng sẽ phải chờ toàn bộ chuỗi đó kết thúc mới thấy phản hồi trực quan.
 

 

Giải pháp tối ưu chỉ số INP hiệu quả cho website

Khi trang web của bạn phản hồi chậm khi người dùng tương tác khiến chỉ số INP metric tăng cao. Điều đó cho thấy trình duyệt mất nhiều thời gian để xử lý và hiển thị phản hồi sau mỗi tương tác.

Để cải thiện, bạn cần tập trung vào 4 nhóm tối ưu chính: JavaScript, rendering, DOM và tải tài nguyên (fetch priority). Các giải pháp này không chỉ giúp giảm độ trễ phản hồi (interaction latency) mà còn cải thiện trải nghiệm tổng thể và điểm Core Web Vitals của Google. 

1. Tối ưu hóa JavaScript

JavaScript là yếu tố tác động trực tiếp đến luồng chính (main thread), xử lý mọi tương tác người dùng nên tối ưu hóa JS đồng nghĩa với việc trình duyệt có đủ tài nguyên để phản hồi nhanh hơn.

Một số cách giảm tải JavaScript:

- Chia nhỏ (split) và tải JavaScript theo nhu cầu (lazy load): Không nên tải toàn bộ bundle JS ngay từ đầu. Bạn hãy dùng kỹ thuật code splitting (Webpack, Vite, Rollup) để chỉ tải những phần cần thiết cho trang đầu tiên. Cách này giúp giảm lượng mã phải phân tích (parse) và thực thi, giải phóng luồng chính nhanh hơn.

- Phát hiện và chia nhỏ các long tasks > 50ms: Sử dụng Chrome DevTools để xác định các tác vụ kéo dài trên 50ms. Sau đó, bạn hãy thực hiện chia nhỏ chúng bằng setTimeout hoặc requestIdleCallback để trình duyệt có thể tạm dừng và xử lý các tác vụ UI khác.

- Tách logic nặng sang Web Worker: Các tác vụ phức tạp như tính toán, xử lý dữ liệu hoặc format JSON lớn nên được chuyển sang Web Worker để chạy trên thread riêng, không chặn UI. 

- Giảm sử dụng thư viện nặng: Loại bỏ hoặc thay thế thư viện JS cồng kềnh (như Moment.js, Lodash đầy đủ) bằng các giải pháp gọn nhẹ hơn như Day.js hoặc Lodash-es (chỉ import hàm cần dùng).

2. Cải thiện hiệu suất rendering

INP không chỉ đo tốc độ xử lý JS mà còn đo thời gian trình duyệt hiển thị phản hồi đầu tiên (Next Paint). Tối ưu hiệu suất rendering giúp trình duyệt vẽ lại khung hình nhanh hơn, rút ngắn presentation delay và tạo cảm giác tương tác mượt mà hơn.

Dưới đây là một số giải pháp cải thiện hiệu suất rendering:

- Giảm reflow và repaint không cần thiết: Hạn chế thay đổi thuộc tính gây layout lại toàn bộ trang như width, height, margin, top, left. Thay vào đó, hãy sử dụng transform và opacity vì các thuộc tính này được GPU tăng tốc.

- Sử dụng requestAnimationFrame: Khi cần cập nhật giao diện thường xuyên (ví dụ: animation, scroll tracking), hãy dùng requestAnimationFrame() để đồng bộ với chu kỳ render của trình duyệt. Giải pháp này giúp hạn chế tình trạng “giật” và giảm thời gian hiển thị.

- Tránh forced synchronous layout: Không nên đọc giá trị layout (offsetWidth, scrollHeight) ngay sau khi thay đổi DOM, hành vi này khiến trình duyệt buộc phải tính toán lại layout toàn bộ trang trước khi tiếp tục.

- Dự đoán thay đổi với will-change: Nếu bạn biết một phần tử sắp thay đổi (ví dụ: hover, transform), thêm will-change giúp trình duyệt chuẩn bị sẵn layer riêng, giảm chi phí render khi animation bắt đầu.

3. Giảm thiểu kích thước DOM

DOM quá lớn hoặc lồng nhau quá sâu khiến trình duyệt phải làm việc nhiều hơn mỗi khi người dùng tương tác. Mỗi thao tác như click, nhập liệu hay mở menu buộc trình duyệt tính toán lại layout và repaint. Nếu cây DOM có hàng nghìn phần tử, quá trình này sẽ rất tốn tài nguyên. Khi giảm kích thước và độ phức tạp của DOM, trình duyệt có thể render nhanh hơn, phản hồi kịp thời hơn với tương tác của người dùng.

Một số cách giúp giảm kích thước DOM:

- Giữ cấu trúc HTML đơn giản, hạn chế lồng thẻ không cần thiết: Hãy xem lại bố cục và loại bỏ các wrapper hoặc div thừa, đặc biệt trong các template được tái sử dụng nhiều lần.

- Dọn dẹp các phần tử ẩn không sử dụng: Nếu một phần tử không cần hiển thị, hãy loại bỏ khỏi DOM thay vì chỉ ẩn bằng CSS (display: none).

- Sử dụng kỹ thuật virtualization cho danh sách lớn: Với các bảng dữ liệu, danh sách sản phẩm dài hoặc phần bình luận, hãy chỉ render những phần tử hiển thị trong vùng nhìn thấy (viewport). Các framework như React Virtualized hoặc Vue Virtual Scroll List có thể giúp xử lý tự động.

- Giảm render dư thừa trong SPA: Trong các framework như React hay Vue, hãy dùng memo, useMemo hoặc shouldComponentUpdate để ngăn component render lại khi dữ liệu không thay đổi.

4. Tối ưu fetch priority và load time

Những kỹ thuật tối ưu fetch priority và load time giúp trình duyệt ưu tiên những tài nguyên quan trọng, sẵn sàng phản hồi nhanh hơn ngay khi người dùng tương tác. Nhờ đó, bạn tránh được tình trạng “bấm mà chưa thấy gì xảy ra”, đồng thời tăng tốc khả năng hiển thị ban đầu của trang.

Một số cách giúp tối ưu tải và ưu tiên tài nguyên:

- Ưu tiên tải tài nguyên quan trọng bằng thuộc tính fetchpriority: Hình ảnh hoặc script quan trọng nên được đánh dấu high để trình duyệt tải sớm hơn so với phần còn lại của trang web. Ví dụ: < img src="hero.jpg" fetchpriority="high" alt="Ảnh chính của trang" >.

- Dùng rel = "preload" cho tài nguyên quan trọng: Giúp rút ngắn thời gian chờ trước khi script hoặc font sẵn sàng, từ đó trang có thể tương tác sớm hơn.

- Áp dụng lazy loading cho hình ảnh và iframe: Hình ảnh và video chỉ tải khi người dùng cuộn đến vùng hiển thị, giảm tải ban đầu và giúp trình duyệt phản hồi nhanh hơn.

 

 

Qua bài viết của Phương Nam Vina, chỉ số Interaction to Next Paint không chỉ là một thông số kỹ thuật mà là thước đo phản ánh trải nghiệm thực của người dùng trên website. Một trang web có INP thấp đồng nghĩa với việc mọi thao tác từ click, nhập liệu cho đến cuộn trang đều được phản hồi gần như tức thì. Ngược lại, INP cao cho thấy sự chậm trễ trong xử lý, khiến người dùng cảm thấy trang “nặng”, “đơ” và dễ rời bỏ. 

Chính vì vậy, tối ưu INP không chỉ giúp website đạt chuẩn Core Web Vitals của Google, mà còn trực tiếp nâng cao trải nghiệm, giữ chân người dùng và cải thiện hiệu quả kinh doanh. Đây không phải là nhiệm vụ ngắn hạn, mà là một quá trình cải tiến liên tục, nơi mỗi mili-giây bạn tiết kiệm cho người dùng là một bước tiến nhỏ nhưng mang lại khác biệt lớn trong hành trình trải nghiệm của họ.

Tham khảo thêm:

 Giải mã các chỉ số đánh giá website quan trọng hàng đầu

 NPS là gì? Cách đo lường và chiến thuật cải thiện chỉ số NPS

 TTFB là gì? Yếu tố ảnh hưởng và cách tối ưu Time To First Byte