Cấu trúc Tốc độ trang của Google, mà chúng tôi đã quen thuộc trong nhiều năm, được xây dựng xoay quanh việc đảm bảo rằng các trang web tải và phục vụ nhanh chóng. Bằng cách tạo ra các thông số có thể đo lường được và tận dụng dữ liệu ẩn danh được thu thập từ thị phần của Chrome, Google sử dụng các số liệu này làm chỉ báo SEO. Với việc giới thiệu Tương tác với Next Paint (INP) vào năm 2022, trọng tâm đã chuyển từ tốc độ tải trang đơn thuần sang góc độ hiệu suất web rộng hơn. INP không chỉ đo tốc độ tải trang mà còn đo tốc độ xử lý tương tác của người dùng trên trang. Về cơ bản, nó biến trải nghiệm điều hướng trang web thành số liệu Tốc độ trang.
Trên blog của Kerem, thuật ngữ "Độ trễ tương tác chung" được đề xuất là phù hợp với khái niệm này, điều này Google cũng giải thích rõ trong video của chính mình. Tuy nhiên, để hiểu đầy đủ về số liệu này, chúng ta sẽ tìm hiểu sâu hơn về chủ đề này trong các phần sau.
Giải thích về thời lượng INP là gì?
Thời hạn của INP bao gồm:
- Khoảng thời gian từ khi người dùng tương tác với trang đến khi thực thi trình xử lý sự kiện.
- Thời gian thực thi của tập lệnh.
- Thời gian từ khi thực thi mã đến khi hiển thị đầu ra cho người dùng.
Các quá trình này thường diễn ra trong vòng mili giây, nhưng trên thiết bị di động, đặc biệt là điện thoại Android cũ có công suất CPU thấp, độ trễ (độ trễ) như vậy thường có thể nhận thấy được. Điều đáng lưu ý là dữ liệu INP, giống như các dữ liệu khác của Lighthouse, được thu thập ẩn danh và đánh giá dựa trên Phân vị thứ 75. Do đó, mục tiêu là tạo ra các ứng dụng hoạt động tốt trên các thiết bị trung bình thay vì chỉ trên các thiết bị cao cấp.
Ví dụ thực tế về thời lượng INP
Dưới đây là một số ví dụ thực tế từ các trang internet mà chúng tôi truy cập hàng ngày để giải thích khái niệm này:
Nhập địa chỉ trên trang web thương mại điện tử
Khi bạn mua sắm trên một trang thương mại điện tử và nhập địa chỉ giao hàng, trước tiên bạn chọn tỉnh. Sau đó, khi bạn nhấp vào hộp chọn để chọn quận, bạn đợi một lúc để kết quả Ajax tải và sau một thời gian nhất định, thông tin quận sẽ được tải. Đây là một ví dụ điển hình về INP. Việc cải thiện trải nghiệm người dùng trong ví dụ này có thể liên quan đến việc thêm "chỉ báo tải" để thông báo cho người dùng về quy trình Ajax.
Sắp xếp lựa chọn
Khi sử dụng bộ lọc trên các trang danh sách sản phẩm, nếu sản phẩm đã lọc không được quản lý đúng cách sau khi nhấp vào hộp kiểm, INP sẽ tăng. Việc sử dụng JS ít phức tạp hơn và xem xét trải nghiệm người dùng trong quá trình vận hành bộ lọc có thể giúp duy trì giá trị INP ở mức cao nhất có thể.
Thư viện ảnh sản phẩm
Thời gian người dùng chờ thư viện ảnh tải sau khi nhấp vào ảnh sản phẩm trên trang chi tiết sản phẩm có thể ảnh hưởng đến INP.
Nút đặt trước
Độ trễ tương tác giữa việc nhấp vào nút "Đặt chỗ" và trang tiếp theo là một ví dụ về INP.
Nút Thêm vào giỏ hàng
Độ trễ tính bằng mili giây khi nhấp vào nút "Thêm vào giỏ hàng" và tự hỏi liệu mặt hàng đó đã được thêm vào giỏ hàng hay chưa xác định chính xác INP.
Như đã thấy trong các ví dụ này, bẫy INP xuất hiện trong các tình huống ảnh hưởng đến cả SEO và tỷ lệ chuyển đổi trực tiếp.
Làm thế nào để cải thiện INP?
- Sử dụng Thư viện giao diện người dùng JS cập nhật: Cải thiện hiệu suất bằng cách sử dụng các thư viện giao diện JS hiện đại như Vue, React và Angular rất có lợi vì chúng mang lại lợi thế về hiệu suất và khả năng sử dụng lại.
- Giảm thiểu độ phức tạp của thư viện JS: Nên sử dụng các thư viện JS ít phức tạp hơn. Cá nhân tôi khuyên bạn nên tránh jQuery càng nhiều càng tốt.
Mức chỉ số INP được chấp nhận
Các giá trị ngưỡng cho mức INP tốt, trung bình và kém là 200 mili giây và 500 mili giây. Việc duy trì INP dưới các ngưỡng này là rất quan trọng để duy trì trải nghiệm người dùng tốt và hiệu suất web tổng thể.
