Chỉ số INP trong Core web vitals là gì? Cách fix lỗi INP
Sơ đồ trang
Chrome theo dõi và đo lường các trải nghiệm khi người dùng truy cập vào website, 90% thời gian người dùng trải nghiệm trang là sau khi trang đó tải. Do đó chỉ số INP ra đời để thay thế cho chỉ số cũ FID
Vậy để dễ hình dung chỉ số Interaction to Next Paint (INP) sẽ tính sau khi trang web đã tải xong và các tương tác giữa người dùng với các chức năng trên website sẽ được theo dõi và tính toán ra điểm INP tốt hay chưa tốt.
Chỉ số INP là gì?
INP (Interaction to Next Paint) là một chỉ số đo lường tốc độ độ phản hồi của trang web đối với tương tác của người dùng. Đây là một trong những Core Web Vitals metrics mới của Google, được giới thiệu để thay thế First Input Delay (FID) từ tháng 3/2024.
INP đo lường thời gian từ khi người dùng tương tác với trang web (như nhấp chuột, gõ phím, chạm vào màn hình) cho đến khi trình duyệt hiển thị frame tiếp theo để phản hồi tương tác đó. Nó theo dõi tất cả các tương tác trong suốt thời gian người dùng truy cập trang và báo cáo giá trị tương tác có độ trễ cao nhất (tại phân vị thứ 75).
Các ngưỡng đánh giá INP
- Tốt: dưới 200 milliseconds
- Cần cải thiện: từ 200 đến 500 milliseconds
- Kém: trên 500 milliseconds
Phân vị thứ 75 là gì?
Phân vị thứ 75 (75th percentile) là một khái niệm thống kê. Giải thích bằng ví dụ cụ thể như sau:
Giả sử có 100 lần tương tác của người dùng trên trang web, với các thời gian phản hồi khác nhau. Thì sau khi sắp xếp các thời gian này từ thấp đến cao:
Phân vị thứ 75 là giá trị lớn hơn 75% các giá trị còn lại
Bài viết liên quan
Nói cách khác, 75% số lần tương tác có thời gian phản hồi nhanh hơn giá trị này
Ví dụ để bạn dễ hiểu hơn với 10 lần tương tác (đã sắp xếp):
100ms, 150ms, 180ms, 200ms, 220ms, 250ms, 300ms, 350ms, 400ms, 500ms
Phân vị thứ 75 sẽ là giá trị tại vị trí thứ 7.5 (75% của 10 = 7.5), trong trường hợp này là khoảng 350ms.
Google chọn phân vị thứ 75 cho INP vì:
- Nó phản ánh trải nghiệm tương đối xấu của người dùng (tệ hơn 75% các trường hợp)
- Loại bỏ được các giá trị cực đoan (outliers) có thể xảy ra trong 25% còn lại
- Đảm bảo rằng phần lớn người dùng (75%) có trải nghiệm tốt hơn giá trị này
Đây là cách đo lường hợp lý hơn so với việc lấy giá trị trung bình (có thể bị ảnh hưởng nhiều bởi các giá trị cực đoan) hoặc giá trị tệ nhất (có thể không đại diện cho trải nghiệm thực tế của đa số người dùng).
Tương tác giữa người dùng với các chức năng trên website?
Có lẽ bạn sẽ đặt câu hỏi này, và đúng vậy giải đáp được câu hỏi này bạn sẽ hiểu rõ được chỉ số INP
Tương tác giữa người dùng với các chức năng trên website nghĩa là sau khi người dùng chờ website tải xong, họ sẽ tiến hành tương tác với các chức năng web như click vào menu, click vào tab content, toggle content hoặc click vào các popup hiện ra…
Ví dụ người dùng click vào toggle content dạng hỏi đáp như video dưới đây, nếu như chức năng của code trên web phản hồi chậm thì nó sẽ cho điểm INP kém ngay, nên chỉ số này phụ thuộc vào code là chủ yếu.
Ở bên trái, các tác vụ dài chặn ngăn xếp mở ra. Điều này khiến người dùng nhấp nhiều lần vì cho rằng tính năng bị lỗi. Khi luồng chính bắt kịp, luồng này sẽ xử lý các dữ liệu đầu vào bị trễ, dẫn đến việc mở và đóng ngăn xếp một cách không mong muốn. Ở bên phải chức năng phản hồi nhanh chóng nên chỉ số INP sẽ tốt
Túm cái váy lại là mình sẽ viết đơn giản và ngắn gọn cho nhiều người hiểu chứ không ghi dong dài ra để SEO, đơn giản ví dụ trên bạn sẽ hiểu được chỉ số Interaction to Next Paint (INP) rồi chứ?, nếu bạn muốn tìm kiểu kỹ hơn thì có thể đọc qua tài liệu chức thức của Google tại đây
Làm thế nào để xác định được vị trí làm điểm INP cao
Với kiến thức ở trên để xác định vị trí làm điểm INP cao bạn có thể kết hợp 1 số phương pháp như thực tế trải nghiệm website trên desktop và mobile là sẽ tìm được vấn đề, ngoài ra có 1 công cụ khá hay mà mình hay sử dụng đó là công cụ Debugbear
Bạn có thể truy cập vào website này nhập url web gặp vấn đề vào, sau đó chọn test với mobile hoặc desktop để chúng phát hiện ra vấn đề cho bạn.
Kết quả sẽ cho ra cụ thể vị trí như sau nên bạn sẽ nhanh chóng tìm được vấn đề cụ thể và fix
Ngoài ra, nếu bạn sử dụng trình duyệt Google chrome bạn có thể truy cập vào website, sau đó nhấn phím F12 sau đó chuyển sang tab Perfomance sau đó click vào các thành phần là bạn sẽ biết được điểm INP
Ở chức năng này bạn cũng sẽ biết được điểm số LCP và CLS luôn nên rất tiện để check thực tế mà không cần sử dụng 1 số công cụ bên thứ 3 cung cấp.
Tối ưu INP như thế nào
INP là một metric quan trọng vì nó phản ánh trải nghiệm thực tế của người dùng khi tương tác với trang web, không chỉ giới hạn ở tương tác đầu tiên như FID.
Để tối ưu INP, các developer cần
- Giảm thiểu việc thực thi JavaScript không cần thiết
- Chia nhỏ các tác vụ JavaScript dài
- Tránh các layout shifts không cần thiết
- Tối ưu hóa việc xử lý sự kiện
- Sử dụng web workers cho các tính toán phức tạp
Kết luận
INP là 1 chỉ số khó tối ưu vì bạn cần phải xác định được vị trí gây vấn đề và có kiến thức lập trình để fix nữa, nếu gặp bất cứ vấn đề nào về INP và bạn không thể xử lý vui lòng liên hệ hoặc book dịch vụ tối ưu Core Web Vitals của chúng tôi để được hỗ trợ
Bài viết liên quan
