Tương tác với lớp sơn tiếp theo (INP): Hướng dẫn kỹ thuật hoàn chỉnh & tiêu chuẩn tối ưu hóa

Tương tác với Next Paint (INP) là số liệu chính thức của Google Core Web Vital được giới thiệu để đánh giá khả năng phản hồi giao diện tổng thể của các trang web.

Không giống như Độ trễ đầu vào đầu tiên (FID), chỉ đánh giá tương tác ban đầu khi tải trang, INP quan sát độ trễ của tất cả các tương tác của người dùng (nhấp chuột, nhấn và nhập bàn phím) xảy ra trong toàn bộ thời gian truy cập của người dùng vào một trang.

Trả lời-Tóm tắt đầu tiên

Tương tác với lần sơn tiếp theo (INP) là chỉ số Core Web Vital đo lường thời gian trôi qua kể từ khi người dùng tương tác với một trang (nhấp, nhấn hoặc nhấn phím) cho đến khi trình duyệt hiển thị khung hình ảnh được cập nhật lên màn hình.Độ trễ INP bao gồm ba phần phụ: Độ trễ đầu vào, Thời lượng xử lý và Độ trễ trình bày.Điểm INP đạt là 200 mili giây trở xuống ở phân vị thứ 75 của số lượt truy cập của người dùng thực.Vào tháng 3 năm 2024, INP chính thức thay thế First input Delay (FID) trong thuật toán xếp hạng tìm kiếm của Google.

Ngưỡng điểm INP và thang đánh giá

Để cung cấp trải nghiệm đáp ứng cho người dùng, các trang web phải đáp ứng các ngưỡng Core Web Vitals sau đây đối với INP được đánh giá ở phân vị thứ 75 trong số lượt truy cập thực tế của người dùng thực:

Tốt: $\le 200\text {ms} $ (Xanh lục) - Phản hồi giao diện người dùng nhanh, mượt mà mang lại cảm giác tức thời cho người dùng.
Cần cải thiện: $> 200\text {ms} $ và $\le 500\text {ms} $ (Hổ phách) - Độ trễ đáng chú ý khi nhấp hoặc nhấn sẽ ảnh hưởng đến mức độ tương tác của người dùng.
Kém: $> 500\text {ms} $ (Đỏ) - Giao diện bị đóng băng nghiêm trọng và chặn luồng chính khiến người dùng thất vọng và tỷ lệ thoát cao.

Độ trễ INP	Đánh giá hiệu suất	Tác động trải nghiệm người dùng	Trạng thái xếp hạng tìm kiếm của Google
$\le 200\text {ms} $	Tốt	Phản hồi trực quan tức thì khi chạm hoặc nhấp.	Điểm đậu đầy đủ cho bài đánh giá Core Web Vitals.
$201\text {ms} - 500\text {ms} $	Cần cải thiện	Tương tác lag;sự chậm trễ đáng chú ý khi cập nhật trạng thái giao diện người dùng.	Có thể bị phạt xếp hạng đối với các từ khóa cạnh tranh.
$> 500\text {ms} $	Nghèo	Các nút không phản hồi, giao diện người dùng bị treo và bế tắc của luồng chính.	Đánh giá Core Web Vitals không thành công;hình phạt xếp hạng hoạt động.

Ba thành phần của độ trễ tương tác INP

Khi người dùng tương tác với một thành phần trên trang web, tổng độ trễ tương tác được đo bởi INP bao gồm ba giai đoạn tuần tự:

Độ trễ đầu vào: Thời gian trôi qua kể từ khi người dùng bắt đầu tương tác vật lý (nhấp, nhấn hoặc nhấn phím) cho đến khi luồng chính của trình duyệt bắt đầu thực thi các trình xử lý sự kiện liên quan.Độ trễ đầu vào chủ yếu là do tắc nghẽn luồng chính do các tác vụ JavaScript nền dài chạy trong khi tải trang hoặc kết xuất lại thành phần.
Thời lượng xử lý: Thời gian thực thi mã JavaScript trong tất cả các trình xử lý sự kiện đã đăng ký cho tương tác đó (chẳng hạn như onclick , onkeydown hoặc trình xử lý cập nhật trạng thái phản ứng của khung).
Độ trễ trình bày: Thời gian trôi qua sau khi trình xử lý sự kiện hoàn tất cho đến khi trình duyệt hoàn tất việc tính toán lại kiểu, bố cục, vẽ các pixel cập nhật và hiển thị khung hình ảnh tiếp theo trên phần cứng màn hình của người dùng.

Về mặt toán học, tổng độ trễ INP cho một lần tương tác được biểu thị bằng:

$$\text{Độ trễ INP} = \text{Độ trễ đầu vào} + \text{Thời lượng xử lý} + \text{Độ trễ trình bày}$$

Tại sao Google thay thế FID bằng INP vào tháng 3 năm 2024

Độ trễ đầu vào đầu tiên (FID) chỉ đo thành phần độ trễ đầu vào của lần tương tác đầu tiên trên một trang.Mặc dù FID giúp xác định các trang mà việc chặn luồng chính ngăn chặn tương tác ban đầu nhưng nó lại gặp phải hai hạn chế kỹ thuật chính:

Phạm vi tương tác đơn: FID đã bỏ qua tất cả các tương tác tiếp theo của người dùng sau khi tải trang, không nắm bắt được tình trạng chậm chạp trong quá trình điều hướng phía máy khách của ứng dụng một trang (SPA) phức tạp.
Đo lường độ trễ chưa đầy đủ: FID chỉ đo độ trễ đầu vào, bỏ qua hoàn toàn thời gian xử lý và độ trễ trình bày.Một trình xử lý sự kiện mất 2.000 mili giây để thực thi đã nhận được điểm FID đạt nếu độ trễ đầu vào ban đầu dưới 50 mili giây.

Vào tháng 3 năm 2024, Google chính thức thay thế FID bằng INP làm yếu tố xếp hạng chính thức của Core Web Vital.INP đánh giá phân vị thứ 75 của tất cả các tương tác trong một phiên, cung cấp đánh giá toàn diện và thực tế hơn nhiều về trải nghiệm người dùng thực trên các ứng dụng web hiện đại.

Tương tác người dùng đủ điều kiện so với sự kiện không đủ điều kiện

INP đo lường các tương tác riêng biệt của người dùng trong đó người dùng mong đợi phản hồi trực quan ngay lập tức.Việc hiểu những tương tác nào được tính vào INP là điều cần thiết cho việc lập hồ sơ chẩn đoán:

Tương tác được đo lường

Nhấp chuột: Nhấp vào nút, liên kết, điều khiển biểu mẫu hoặc các thành phần tương tác tùy chỉnh.
Nhấn vào màn hình cảm ứng: Khai thác các phần tử trên thiết bị di động hoặc máy tính bảng.
Nhấn bàn phím: Nhấn các phím bàn phím vật lý hoặc ảo (chẳng hạn như Enter , Space hoặc các phím chữ và số khi nhập văn bản).

Sự kiện không được đo lường

Cuộn & Xoay: Cuộn một trang hoặc xoay thành phần bản đồ không kích hoạt phép đo INP.
Di chuột: Di chuyển con trỏ chuột qua một phần tử mà không nhấp vào sẽ bị loại trừ khỏi INP.
Hoạt ảnh tải trang: Hoạt ảnh CSS tự động kích hoạt mà không cần người dùng nhập sẽ không được tính vào INP.

Các chiến lược kỹ thuật đã được chứng minh để tối ưu hóa điểm INP cao

Để giảm độ trễ INP xuống dưới ngưỡng 200 mili giây, nhóm kỹ thuật nên triển khai các tối ưu hóa kỹ thuật sau:

Chia nhỏ các tác vụ trong luồng chính dài: Sử dụng requestIdleCallback() , setTimeout() hoặc scheduler.yield() để chia các tác vụ thực thi dài hơn 50 mili giây thành các phần nhỏ hơn, cho phép trình duyệt xử lý thông tin đầu vào của người dùng đến ngay lập tức giữa các khối thực thi tác vụ.
Tối ưu hóa cập nhật trạng thái khung: Trong ứng dụng Vue 3 và Nuxt 4, trì hoãn việc hiển thị lại giao diện người dùng không quan trọng bằng cách sử dụng ranh giới thành phần không đồng bộ hoặc trì hoãn cập nhật giới thiệu phản ứng.
Giảm thiểu việc xáo trộn bố cục: Tránh đọc các thuộc tính hình học DOM (chẳng hạn như offsetHeight hoặc getBoundingClientRect() ) ngay sau khi thay đổi các phần tử DOM, điều này buộc phải tính toán lại bố cục đồng bộ.
Giảm độ sâu cây DOM: Cây DOM quá khổ làm tăng chi phí tính toán kiểu và bố cục trong thời gian trễ trình bày.Giữ tổng số phần tử DOM dưới 1.500 nút trên mỗi trang.
Tối ưu hóa tập lệnh của bên thứ ba: Các tập lệnh nặng của bên thứ ba (phân tích, mạng quảng cáo, tiện ích trò chuyện với khách hàng) thường xuyên chiếm quyền điều khiển luồng chính.Trì hoãn hoặc nhân viên web giảm tải các tập lệnh không cần thiết của bên thứ ba.

Giám sát INP liên tục với SimpleOps

SimpleOps liên tục theo dõi hiệu suất INP bằng cách thu thập số liệu tập dữ liệu trường người dùng thực trong Báo cáo trải nghiệm người dùng Chrome (CrUX) cùng với kiểm tra tổng hợp của Lighthouse.SimpleOps tự động thông báo cho nhóm của bạn bất cứ khi nào INP phân vị thứ 75 của trang web của bạn vượt quá 200 mili giây, đảm bảo ứng dụng của bạn luôn nhanh, mượt mà và được tối ưu hóa cho thứ hạng của công cụ tìm kiếm.