Google đã công bố vào đầu năm 2020, một bộ chỉ số mới gọi là Core Web Vitals để đánh giá trải nghiệm người dùng trên web. INP metric là một trong các chỉ số quan trọng chính của trang web để đánh giá hiệu quả hơn chất lượng của trải nghiệm người dùng trên trang web. Hãy cùng DigiBird tìm hiểu hơn về INP metric!
1. Giới thiệu INP Metric
INP là gì?
INP là viết tắt của Interaction to Next Paint. Là chỉ số đo lường thời gian trang web phản hồi lại các tương tác của người dùng. Khi người dùng tương tác với trang web. Ví dụ như nhấp chuột, vuốt màn hình, hoặc nhập bàn phím. Trang web sẽ xử lý sự kiện đó và hiển thị khung hình tiếp theo trên giao diện người dùng. Thời gian từ khi nhận sự kiện đến khi hiển thị khung hình tiếp theo được gọi là độ trễ. INP thấp cho biết trang web phản hồi nhanh với các tương tác của người dùng.
Chỉ số INP cũng đánh giá mức độ hài lòng của người dùng với khả năng phản hồi của trang. Nếu INP tốt, người dùng sẽ cảm thấy trang web có tính tương tác cao và dễ sử dụng. Những thay đổi trên giao diện người dùng khi trang phản hồi lại được gọi là phản hồi trực quan.
FID là gì?
FID là tên viết tắt của First Input Delay. Là chỉ số đo lường thời gian trang web phản hồi lại sự kiện nhấp chuột đầu tiên của người dùng. FID thấp cho biết trang web có khả năng phản hồi nhanh chóng với các hành động của người dùng. Như nhấp vào một nút, một liên kết, hoặc nhập mật khẩu. Nếu FID cao, người dùng sẽ cảm thấy trang web chậm trễ và khó sử dụng.
Chỉ số FID rất quan trọng đối với các trang web có tính tương tác cao và cần thực hiện một hành động. Như đăng nhập, đăng ký, đặt hàng, chơi game,… Khi người dùng muốn nhập thông tin hoặc thực hiện một hành động. Các trường thông tin hoặc các nút phải có phản hồi ngay lập tức.
2. So sánh INP và FID
First Input Delay (FID) là một trong 3 chỉ số trong Core Web Vitals cùng với Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS). Nhưng liệu bạn có phân biệt được sự khác nhau giữa INP metric và FID metric không?
| INP | FID | |
|---|---|---|
| Đặc điểm | – Đo lường dựa trên toàn bộ tương tác của trang trong một phiên làm việc – Không bị ảnh hưởng bởi các sự kiện đầu vào không liên quan đến trải nghiệm người dùng – Có thể đo lường được trên cả thiết bị di động và máy tính | – Đo lường thời gian phản hồi của trang web đối với sự kiện nhấp chuột đầu tiên của người dùng – Được hỗ trợ bởi nhiều công cụ đo lường hiệu suất |
| Tác động đến trải nghiệm người dùng | – Giúp trang web trở nên nhanh hơn và phản hồi tốt hơn với các sự kiện đầu vào. – Giúp trang web có tính tương tác cao và dễ sử dụng | – Giúp trang web trở nên nhanh hơn và phản hồi tốt hơn với sự kiện nhấp chuột đầu tiên. – Giúp trang web có tính tương tác cao và dễ sử dụng |
3. Chỉ số như thế nào được xem là tối ưu?
- INP: Nếu giá trị cuối cùng được báo cáo là nhỏ hơn 200 ms. INP được xem là cần cải thiện nếu nằm trong khoảng từ 200 ms đến 500 ms. Bất kỳ giá trị nào lớn hơn 500 ms đều được xem là kém.
- FID: Nếu nhỏ hơn hoặc bằng 100 ms. FID được xem là cần cải thiện nếu nằm trong khoảng từ 100 ms đến 300 ms. Bất kỳ giá trị nào lớn hơn 300 ms đều được xem là kém.
4. Làm thế nào để đo lường INP
Để có thể đo lường được INP metric, bạn có thể tham khảo các công cụ sau:
| PageSpeed Insights | Công cụ này sẽ biết INP của trang web dựa trên dữ liệu thực tế từ người dùng thực. Chỉ cần nhập URL của trang web vào và nhấn nút phân tích. Chỉ số INP được hiển thị trong phần Core Web Vitals. |
| Chrome User Experience Report (CrUX) | Đây là một bộ dữ liệu của Google, chứa các số liệu về hiệu suất của trang web từ hàng triệu người dùng Chrome trên toàn thế giới. |
| Lighthouse Panel in DevTools | Cho phép đo lường INP trong phòng thí nghiệm bằng cách sử dụng chế độ Timespan trong DevTools. Bạn có thể bắt đầu Lighthouse, tương tác với trang web của bạn theo ý muốn, và sau đó nhận được một báo cáo về những gì đã xảy ra trong khoảng thời gian đó, bao gồm cả INP và một kiểm tra để giúp chẩn đoán các vấn đề về khả năng phản hồi. |
| Web Vitals extension for Chrome | Tiện ích mở rộng trên Chrome. Cung cấp cho một cái nhìn tổng quan về trải nghiệm trang web của người dùng (từ CrUX API) và các giá trị thời gian thực của CWV và các chỉ số quan trọng của lần truy cập hiện tại đến trang. |
Đo lường INP trong Javascript
Để đo lường INP metric trong Javascript. Bạn có thể sử dụng thư viện web-vitals, một thư viện mã nguồn mở của Google. Hỗ trợ đo lường các chỉ số hiệu suất của trang web, bao gồm INP. Bạn có thể cài đặt web-vitals bằng cách sử dụng npm hoặc CDN.
| Cài đặt web-vitals bằng npm npm install web-vitals Hoặc sử dụng CDN <script src=”https://unpkg.com/web-vitals@3″></script> |
Sử dụng hàm onINP để đo lường INP
Xem thêm: Hướng dẫn chuyển đổi dự án Next.js thành Zalo Mini App
5. Làm thế nào để cải thiện INP
Với mức khuyến nghị của chỉ số INP là 200 ms. Nếu trang web của bạn đang ở mức vượt qua mức này thì cần phải xem xét lại và tìm ra giải pháp để cải thiện giá trị này. Để cải thiện chỉ số này bạn có thể xem qua các biện pháp sau:
Giảm lượng số lượng code không cần thiết
Đây là một trong những nguyên nhân chính gây ra độ trễ khi người dùng tương tác với trang web. Bạn nên giảm số lượng và kích thước của các tập tin JavaScript. Đặc biệt là những tập tin từ bên thứ ba, mà bạn tải lên khi khởi động. Sử dụng các kỹ thuật như code splitting, lazy loading, hoặc web workers để tối ưu hóa việc sử dụng JavaScript.
Giảm kích thước các tài nguyên
Kích thước của trang web cũng ảnh hưởng đến INP. Bởi vì nó quyết định thời gian tải và hiển thị của trang web. Nên giảm kích thước của các tệp tin HTML, CSS, và hình ảnh. Bằng cách sử dụng các kỹ thuật như minification, compression, và optimization. Ngoài ra, cũng nên giảm số lượng và độ phức tạp của các thành phần trên trang web, như bình luận, menu, hoặc quảng cáo.
Tránh các bố cục lớn và phức tạp
Các bố cục lớn và phức tạp có thể làm tăng thời gian xử lý và hiển thị của trình duyệt. Gây ra độ trễ khi người dùng tương tác với trang web. Nên thiết kế trang web với các bố cục đơn giản và dễ nhìn. Tránh sử dụng quá nhiều hiệu ứng, chuyển động, hoặc đồ họa. Bên cạnh đó, sử dụng các kỹ thuật như CSS Grid, Flexbox, hoặc Media Queries. Để tạo ra các bố cục linh hoạt và thích ứng với các kích thước màn hình khác nhau.
Kết luận
Qua bài viết trên, DigiBird hy vọng giúp bạn hiểu rõ hơn về INP metric và một số công cụ có thể hỗ trợ bạn trong việc tối ưu năng suất của trang web.
Xem thêm: 30 phút – Chuyển đổi từ Web App thành Zalo Mini App
