Ở trang 2 của bài viết: Xử lý Vấn đề INP của các URL trong Google Search Console, Daipho sẽ hướng dẫn bạn cách xác định nguyên nhân INP cao.
Kiểm tra tương tác
Khi có một trang được ghi nhận chỉ số INP không tốt, chúng ta phải xác định nguyên nhân gây ra tương tác chậm. Có rất nhiều nguyên nhân tiềm ẩn, chẳng hạn như:
- Các tập mã lệnh của bên thứ ba lên lịch nhiều tác vụ trên luồng chính,
- Kích thước DOM lớn,
- Lệnh gọi lại sự kiện tốn kém,
- Server chứa các tập lệnh bên thứ 3 không phản hồi, hoặc phản hồi chậm chạp.
- Và các nguyên nhân khác.
Thông thường, một trang web có chỉ số INP cao nó cũng kéo theo chỉ số Tổng thời gian chặn (TBT) cao.
Tái hiện các tương tác chậm
Để tìm lượt tương tác chậm, bạn phải tập họp số liệu, đóng vai trò là người dùng, ghi nhận dấu vết và phân tích số liệu. Bạn sẽ cần phải tương tác với trang web theo cách thủ công.
Ghi lại dấu vết
Bạn có thể sử dụng các công cụ để chẩn đoán và khắc phục sự cố trên Firefox hoặc Chrome. Để phân tích tài nguyên và hiệu suất, hãy làm theo các bước sau:
- Mở trang mà bạn muốn thử nghiệm
- Mở Trình kiểm tra (Firefox) hoặc Công cụ phát triển (Chrome)
- Chọn tab Hiệu suất, nhấp vào nút Ghi lại trên bảng điều khiển để bắt đầu theo dõi.
- Thực hiện các tương tác có khả năng xảy ra.
- Nhấp lại vào nút Ghi lần nữa để ngừng theo dõi.
Phân tích các giá trị được ghi lại. Nơi đầu tiên cần chú ý là phần tóm tắt hoạt động ở đầu trình phân tích. Các tác vụ dài trong bản ghi sẽ hiển thị các thanh màu đỏ. Đây là khu vực có vấn đề. Bạn cần ghi nhận các tham số: Độ trễ đầu vào, Thời lượng xử lý, Độ trễ hiển thị.
Cách xác định phần nào của một lượt tương tác bị chậm
Xác định độ trễ đầu vào lớn
Độ trễ đầu vào có thể gây ra độ trễ tương tác cao. Độ trễ đầu vào là phần đầu tiên của một lượt tương tác. Đây là khoảng thời gian kể từ khi trình duyệt nhận được hành động của người dùng cho đến khi trình duyệt có thể bắt đầu gọi lệnh đầu tiên để xử lý sự kiện của lượt tương tác đó. Độ trễ đầu vào không bao giờ được bằng 0, nhưng nếu nó quá lớn thì đó là vấn đề. Bạn cần tìm xem có tiến trình nào đang chạy trên luồng chính khiến lệnh gọi của bạn không chạy ngay hay không.
Xác định thời gian xử lý lâu
Sau khi lệnh được gọi, nếu thời gian hoàn tất quá lâu, nó sẽ trì hoãn trình duyệt hiển thị khung hình tiếp theo và làm tăng đáng kể tổng thời gian chờ của một lượt tương tác. Thời gian xử lý dài có thể là thời gian trả về kết quả của JavaScript của bên thứ nhất hoặc bên thứ ba và đôi khi là cả hai.
