INP là gì? Hướng dẫn tối ưu Core Web Vitals mới nhất

Interaction to Next Paint (INP) là gì?

Interaction to Next Paint (INP) là chỉ số mới nhất được Google bổ sung vào bộ Core Web Vitals, chuyên đo lường khả năng phản hồi của website hoặc ứng dụng web đối với các tương tác của người dùng. Cụ thể, INP là định lượng khoảng thời gian từ lúc người dùng thực hiện một hành động (như click chuột, chạm màn hình, hoặc nhấn phím) cho đến khi trang web hiển thị cập nhật trực quan tương ứng với hành động đó.

Điểm khác biệt quan trọng của INP so với First Input Delay (FID) - chỉ số tiền nhiệm - là INP đo lường khả năng phản hồi trong suốt toàn bộ vòng đời của người dùng khi truy cập trang web, chứ không chỉ dừng lại ở tương tác đầu tiên. Điều này khiến INP trở thành một chỉ số toàn diện hơn, phản ánh chính xác hơn trải nghiệm thực tế của người dùng.

INP đặc biệt hữu ích đối với những trang web có nhiều tương tác trong thời gian dài, như các ứng dụng đơn trang (Single Page Applications), nơi mà việc đánh giá chính xác trải nghiệm người dùng tổng thể là vô cùng quan trọng. Thông qua INP, các nhà phát triển có thể hiểu rõ hơn về hiệu năng thực tế của website và tối ưu hóa để mang lại trải nghiệm mượt mà nhất cho người dùng.

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

Để hiểu rõ cách tính chỉ số INP, chúng ta cần phân tích quy trình đo lường thành các thành phần cốt lõi. INP không chỉ đánh giá phản hồi ban đầu của một tương tác mà bao gồm toàn bộ chuỗi từ hành động của người dùng đến khi cập nhật hiển thị trên trang.

Các bước tính toán INP

• Ghi nhận tương tác của người dùng: Quá trình đo lường bắt đầu ngay khi người dùng tương tác với trang. Tương tác này có thể là click chuột, chạm màn hình cảm ứng, hoặc nhấn phím trên bàn phím. INP tập trung vào những loại tương tác cụ thể này vì chúng là những hành động trực tiếp và có chủ ý, đòi hỏi phản hồi từ trang web.

• Input delay (Độ trễ đầu vào): Giai đoạn tiếp theo là độ trễ đầu vào - thời gian trước khi trang bắt đầu xử lý tương tác. Trong giai đoạn này, trình duyệt có thể đang bận xử lý các tác vụ khác, dẫn đến việc trì hoãn xử lý đầu vào của người dùng.

• Processing time (Thời gian xử lý): Khi đầu vào đang được xử lý, giai đoạn tiếp theo là thời gian xử lý. Điều này bao gồm việc chạy các event handlers liên quan đến tương tác. Những event handlers này thường là các hàm JavaScript được thực thi để phản hồi với hành động của người dùng. Thời gian xử lý có thể thay đổi tùy thuộc vào độ phức tạp của các tác vụ mà những handlers này thực hiện.

• Presentation delay (Độ trễ hiển thị): Giai đoạn tiếp theo là độ trễ hiển thị sau khi xử lý đầu vào. Đây là thời gian cần thiết để trang render phản hồi hình ảnh cho tương tác. Nó bao gồm các tác vụ như tính toán lại layout của trang, thực thi các thay đổi CSS, và vẽ lại nội dung trang để phản ánh tương tác.

• Visual update (Cập nhật hình ảnh): Bước cuối cùng là cập nhật hình ảnh trên trang, đây là đỉnh điểm của quá trình tương tác. Đây là lúc người dùng nhìn thấy kết quả của hành động của họ, chẳng hạn như menu mở ra, thông báo gửi form, hoặc bất kỳ thay đổi hình ảnh nào khác trên trang.

Công thức tính INP

Tổng INP được tính bằng cách cộng input delay, processing time và presentation delay. Điều này cho một thước đo toàn diện về thời gian từ tương tác ban đầu của người dùng đến lần paint tiếp theo, phản ánh việc cập nhật hình ảnh trên trang.

INP = Input Delay + Processing Time + Presentation Delay

Cách đo chỉ số INP của website

Dưới đây là các công cụ chính để đo lường chỉ số INP hiệu quả cho website của bạn:

• PageSpeed Insights: Đây là công cụ thân thiện với người dùng nhất để xem điểm số INP. PageSpeed Insights cung cấp điểm số phần trăm thứ 75 cho 28 ngày gần nhất, giúp bạn có cái nhìn tổng quan về hiệu năng website trong thời gian qua. Công cụ này miễn phí và dễ sử dụng, chỉ cần nhập URL website để kiểm tra.

• Google BigQuery (CrUX Dashboard): Cung cấp bối cảnh lịch sử chi tiết hơn về điểm số INP. Google đo lường tất cả các tương tác mà người dùng Chrome thực tế có với trang web và lưu trữ chúng trong bộ dữ liệu CrUX. Đây là nguồn dữ liệu phong phú cho việc phân tích xu hướng dài hạn.

• Lighthouse Tool: Hữu ích để debug INP theo thời gian thực trong quá trình phát triển. Công cụ này cho phép các nhà phát triển kiểm tra và tối ưu hóa hiệu năng ngay trong quá trình xây dựng website, giúp phát hiện sớm các vấn đề về tương tác.

• Core Web Vitals Visualizer: Giúp trực quan hóa INP cùng với các chỉ số khác. Công cụ này tạo ra các biểu đồ và báo cáo dễ hiểu, giúp team phát triển và quản lý nắm bắt tình hình hiệu năng một cách trực quan.

Mặc dù bộ dữ liệu CrUX là nguồn cuối cùng cho các chỉ số INP, nhưng nó được ẩn danh hóa cao và không cung cấp giám sát thời gian thực hoặc lọc chi tiết. Vì vậy, các chuyên gia tư vấn hiệu năng web thường dựa vào Real User Monitoring (RUM) để có được thông tin chi tiết hơn về trải nghiệm người dùng thực tế.

Để có kết quả đo lường chính xác nhất, nên kết hợp sử dụng nhiều công cụ khác nhau và thường xuyên theo dõi để nắm bắt xu hướng thay đổi của chỉ số INP theo thời gian.

Chỉ số INP bao nhiêu là tốt?

Để đảm bảo trải nghiệm người dùng tốt, các website nên hướng tới chỉ số INP là 200 milliseconds (0.2 giây) hoặc thấp hơn. Ngưỡng này được coi là chuẩn mực tốt cho hầu hết người dùng, thể hiện rằng website có khả năng phản hồi nhanh và xử lý các tương tác một cách hiệu quả.

Cách đánh giá chỉ số INP

Khi đánh giá điểm số INP, quan trọng là phải xem xét sự biến đổi của trải nghiệm người dùng trên các thiết bị và điều kiện khác nhau. Do đó, phương pháp thực tế là đo lường phần trăm thứ 75 (75th percentile) của các lần tải trang, có tính đến cả thiết bị di động và máy tính để bàn. Phương pháp này giúp nắm bắt cái nhìn toàn diện hơn về trải nghiệm người dùng, đảm bảo rằng đa số người dùng đều nhận được trải nghiệm phản hồi tốt.

Tác động của chỉ số INP

Chỉ số INP cao có thể ảnh hưởng đáng kể đến trải nghiệm người dùng, đặc biệt trên những website có nhiều yếu tố tương tác như trình soạn thảo văn bản hoặc game online. Trong những trường hợp này, INP cao cho thấy nguy cơ trải nghiệm người dùng kém do phản hồi chậm trễ đối với các tương tác.

Ngược lại, chỉ số INP thấp cho thấy website luôn phản hồi một cách nhất quán, góp phần tạo nên trải nghiệm mượt mà và thú vị hơn cho người dùng. Điều này đặc biệt quan trọng đối với các ứng dụng web tương tác cao, nơi mà tốc độ phản hồi trực tiếp quyết định đến sự hài lòng của người dùng.

Xếp hạng chỉ số INP

Xếp hạng chỉ số INP theo Web.dev

• Tốt: ≤ 200ms - Website phản hồi nhanh, trải nghiệm người dùng tối ưu

• Cần cải thiện: 200ms - 500ms - Có thể gây khó chịu cho người dùng

• Kém: > 500ms - Trải nghiệm người dùng nghiêm trọng bị ảnh hưởng

Hướng dẫn cách tối ưu chỉ số INP cho website

Tối ưu hóa Interaction to Next Paint (INP) là quá trình đòi hỏi can thiệp ở nhiều tầng khác nhau - từ cách trình duyệt xử lý JavaScript cho đến cách giao diện phản hồi sau mỗi thao tác của người dùng. Dưới đây là các phương pháp cụ thể, được sắp xếp theo từng giai đoạn trong vòng đời của một tương tác.

Giảm thiểu xử lý CPU trên trang

Main thread là nơi trình duyệt xử lý hầu hết mọi thứ - từ JavaScript, layout đến rendering. Khi main thread bị chiếm dụng quá lâu, mọi tương tác của người dùng đều phải chờ, kéo dài INP một cách đáng kể.

Để giảm tải cho main thread, hãy ưu tiên thực thi code bất đồng bộ thay vì chạy các tác vụ nặng theo kiểu đồng bộ. Cách tiếp cận này giúp giao diện vẫn cập nhật được trong khi các xử lý nền tiếp tục diễn ra, thay vì block toàn bộ luồng render.

Song song đó, hãy sử dụng DevTools Performance Profiler để phân tích chính xác những gì đang xảy ra trên main thread. Công cụ này giúp xác định các đoạn code tốn thời gian, từ đó ưu tiên tối ưu đúng chỗ thay vì tối ưu theo cảm tính.

Một điểm thường bị bỏ qua là script bên thứ ba - analytics, chat widget, remarketing pixel - có thể chiếm dụng main thread mà bạn không kiểm soát được nội dung của chúng. Hãy kiểm tra mức độ ảnh hưởng của từng script và cấu hình tải trì hoãn (defer, async) hoặc chỉ tải khi thực sự cần thiết.

Giảm input delay

Input delay là khoảng thời gian từ lúc người dùng thao tác (nhấp chuột, gõ phím) đến khi trình duyệt bắt đầu xử lý tương tác đó. Nếu main thread đang bận với một tác vụ dài, input delay sẽ tăng theo.

Giải pháp trực tiếp nhất là chia nhỏ các long task thành các tác vụ ngắn hơn, xen kẽ cơ hội để trình duyệt xử lý input. Trong thực tế, bạn có thể dùng setTimeout, scheduler.postTask(), hoặc requestIdleCallback để nhường quyền kiểm soát main thread theo từng bước nhỏ.

Để đánh giá mức độ nghiêm trọng của vấn đề này trong môi trường lab, hãy theo dõi chỉ số Total Blocking Time (TBT). TBT đo tổng thời gian main thread bị block bởi các long task, và có tương quan cao với input delay trong thực tế người dùng.

Tối ưu thời gian xử lý sự kiện

Khi trình duyệt đã nhận được input và bắt đầu xử lý, thời gian thực thi các event handler trực tiếp ảnh hưởng đến INP. Một event handler kém hiệu quả có thể kéo dài giai đoạn này hàng trăm millisecond.

Hãy điều tra cụ thể trình duyệt đang dành thời gian vào đâu trong quá trình xử lý - scripting, rendering hay layout. Từ đó tập trung tối ưu đúng điểm nghẽn.

Với các ứng dụng dùng React, tránh re-render không cần thiết bằng cách sử dụng React.memo cho component, useMemo cho các giá trị tính toán nặng và useCallback cho các hàm được truyền xuống component con. Mỗi lần render thừa đều là thời gian lãng phí trực tiếp làm chậm INP.

Ngoài ra, nếu phân tích cho thấy phần lớn thời gian CPU nằm ở layout và repaint, hãy xem xét giảm số lượng phần tử DOM bị ảnh hưởng trong mỗi tương tác, sử dụng CSS contain hoặc tách các vùng layout độc lập với nhau.

Cập nhật giao diện trước khi xử lý nặng

Người dùng cảm nhận tốc độ chủ yếu qua phản hồi trực quan - nếu giao diện thay đổi ngay lập tức sau thao tác, trải nghiệm sẽ cảm thấy nhanh dù xử lý thực tế vẫn đang diễn ra phía sau.

Áp dụng nguyên tắc này bằng cách hiển thị trạng thái loading hoặc skeleton ngay khi người dùng tương tác, trước khi bắt đầu các tác vụ tốn CPU. Điều này tách biệt phản hồi trực quan khỏi thời gian xử lý thực tế, giúp INP cải thiện đáng kể về mặt cảm nhận.

Với các tác vụ JavaScript thực sự nặng - xử lý dữ liệu lớn, tính toán phức tạp - hãy cân nhắc chuyển sang Web Workers. Web Workers chạy trên thread riêng biệt, hoàn toàn không ảnh hưởng đến main thread và do đó không làm tăng INP.

Tránh sử dụng dialog native chặn luồng

Các hàm alert(), confirm() và prompt() của JavaScript block main thread hoàn toàn trong khi dialog đang hiển thị. Điều này không chỉ làm tăng INP mà còn tạo trải nghiệm người dùng kém nhất quán trên các trình duyệt và thiết bị khác nhau.

Thay thế chúng bằng các UI component tùy chỉnh không chặn - modal overlay, toast notification, hoặc inline confirmation - được kiểm soát hoàn toàn bằng CSS và JavaScript, không ảnh hưởng đến vòng lặp chính của trình duyệt.

Giảm presentation delay

Presentation delay là giai đoạn cuối cùng trong vòng đời INP - thời gian từ khi trình duyệt hoàn thành xử lý đến khi frame tiếp theo thực sự được vẽ lên màn hình. Đây thường là phần bị bỏ qua nhất nhưng có thể chiếm tỷ trọng đáng kể trong tổng INP.

Để giảm presentation delay, hãy đơn giản hóa cấu trúc DOM được cập nhật sau mỗi tương tác. Một thao tác kéo theo việc reflow toàn bộ trang sẽ mất nhiều thời gian hơn đáng kể so với chỉ cập nhật một vùng nhỏ được cô lập.

Cần lưu ý thêm về tương tác xếp hàng: khi người dùng thực hiện nhiều thao tác liên tiếp nhanh, trình duyệt có thể xếp hàng các tương tác và xử lý tuần tự, đẩy presentation delay của tương tác cuối lên cao bất thường. Hãy thiết kế event handler để xử lý trường hợp này một cách có kiểm soát.

Giám sát và duy trì hiệu năng liên tục

Tối ưu INP không phải là công việc làm một lần. Mỗi lần deploy tính năng mới, cập nhật thư viện, hoặc thêm script bên thứ ba đều có thể làm thay đổi INP đáng kể.

Thiết lập quy trình giám sát thường xuyên với Google PageSpeed Insights và Lighthouse để phát hiện sớm các hồi quy về hiệu năng. Quan trọng hơn, triển khai giải pháp Real User Monitoring (RUM) để đo INP thực tế từ người dùng thật - vì INP từ lab và INP từ thực tế có thể chênh lệch rất lớn tùy theo thiết bị và điều kiện mạng.

Cuối cùng, hãy theo dõi sát các cập nhật trong Core Web Vitals. Google định kỳ điều chỉnh cách tính và ngưỡng đánh giá các chỉ số này, và chiến lược tối ưu cần được cập nhật tương ứng để duy trì lợi thế SEO và trải nghiệm người dùng bền vững.