Chẩn đoán thủ công các tương tác chậm trong phòng thí nghiệm

Tìm hiểu cách đưa dữ liệu hiện trường của bạn vào phòng thí nghiệm để tái hiện hoạt động tương tác và xác định nguyên nhân gây ra tình trạng tương tác chậm thông qua việc kiểm tra thủ công.

Jeremy Wagner

Một phần khó khăn trong việc tối ưu hoá Lượt tương tác với Nội dung hiển thị tiếp theo (INP) là xác định nguyên nhân gây ra INP kém hiệu quả. Có nhiều nguyên nhân tiềm ẩn, chẳng hạn như các tập 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 và các nguyên nhân khác.

Việc cải thiện INP có thể khó khăn. Để bắt đầu, bạn phải biết tương tác nào có xu hướng chịu trách nhiệm về INP của trang. Nếu bạn không biết tương tác nào trên trang web của mình có xu hướng chậm nhất xét theo góc độ người dùng thực tế, hãy đọc bài viết Tìm lượt tương tác chậm trong trường này. Sau khi có dữ liệu thực địa hướng dẫn, bạn có thể kiểm tra những tương tác cụ thể đó theo cách thủ công bằng các công cụ trong phòng thí nghiệm để tìm hiểu lý do những tương tác đó bị chậm.

Nếu bạn không có dữ liệu thực tế thì sao?

Việc có dữ liệu thực địa là rất quan trọng vì bạn có thể tiết kiệm rất nhiều thời gian để tìm hiểu xem cần tối ưu hoá những lượt tương tác nào. Tuy nhiên, bạn có thể đang ở vị trí mà bạn không có dữ liệu trường. Nếu mô hình này đúng mô tả trường hợp của bạn, thì bạn vẫn có thể tìm thấy các lượt tương tác để cải thiện, mặc dù bạn cần nỗ lực nhiều hơn một chút và sử dụng một phương pháp khác.

Tổng thời gian chặn (TBT) là một chỉ số phòng thí nghiệm đánh giá khả năng phản hồi của trang trong khi tải và tương quan với INP. Nếu trang của bạn có TBT cao, đó là tín hiệu tiềm năng cho thấy trang của bạn có thể không phản hồi nhiều với các tương tác của người dùng khi trang tải.

Để tìm ra TBT của trang, bạn có thể sử dụng Lighthouse. Nếu TBT của một trang cao, có khả năng luồng chính quá bận trong quá trình tải trang và có thể ảnh hưởng đến mức độ phản hồi của trang trong khoảng thời gian quan trọng đó trong vòng đời của trang.

Để phát hiện thấy lượt tương tác chậm sau khi trang tải xong, bạn có thể cần sử dụng các loại dữ liệu khác, chẳng hạn như các luồng người dùng phổ biến mà bạn có thể đã xác định trong số liệu phân tích trang web. Ví dụ: nếu bạn làm việc trên một trang web thương mại điện tử, luồng người dùng phổ biến sẽ là những hành động mà người dùng thực hiện khi thêm mặt hàng vào giỏ hàng trực tuyến và thanh toán.

Cho dù bạn có dữ liệu thực địa hay không, bước tiếp theo là kiểm thử và tái tạo các tương tác chậm theo cách thủ công — vì chỉ khi có thể tái hiện một hoạt động tương tác chậm mới khắc phục được.

Tái hiện hoạt động tương tác chậm trong phòng thí nghiệm

Có nhiều cách giúp bạn tái tạo các hoạt động tương tác chậm trong phòng thí nghiệm thông qua việc kiểm tra thủ công. Tuy nhiên, bạn có thể thử các cách sau đây.

Ghi lại dấu vết

Bạn nên dùng Trình phân tích hiệu suất của Chrome để chẩn đoán và khắc phục sự cố tương tác chậm. Để phân tích tài nguyên của một tương tác trong trình phân tích hiệu suất của Chrome, hãy làm theo các bước sau:

1. Mở trang bạn muốn thử nghiệm.
2. Mở Công cụ của Chrome cho nhà phát triển rồi chuyển đến bảng điều khiển Hiệu suất.
3. Nhấp vào nút Ghi ở phía trên bên trái của bảng điều khiển để bắt đầu theo dõi.
4. Thực hiện(các) hoạt động tương tác mà bạn muốn khắc phục sự cố.
5. Nhấp lại vào nút Record (Ghi lại) để ngừng theo dõi.

Khi trình phân tích tài nguyên được điền sẵn, vị trí đầu tiên cần xem xét phải là phần tóm tắt hoạt động ở đầu trình phân tích tài nguyên. Phần tóm tắt hoạt động hiển thị các thanh màu đỏ ở trên cùng, nơi các nhiệm vụ dài diễn ra trong bản ghi. Điều này cho phép bạn nhanh chóng phóng to các khu vực có vấn đề.

Bạn có thể nhanh chóng tập trung vào các khu vực có vấn đề bằng cách kéo và chọn một khu vực trong phần tóm tắt hoạt động. Bạn có thể tuỳ ý sử dụng tính năng breadcrumb trong trình phân tích tài nguyên để thu hẹp dòng thời gian và bỏ qua hoạt động không liên quan.

Sau khi bạn đã tập trung vào vị trí xảy ra lượt tương tác, kênh Hoạt động tương tác sẽ giúp bạn sắp xếp lượt tương tác và hoạt động xảy ra trong kênh chính bên dưới lượt tương tác đó:

Bạn có thể xem thêm thông tin chi tiết về phần tương tác dài nhất bằng cách di chuột qua hành động lặp lại trong kênh tương tác:

Phần bị sọc của lượt tương tác thể hiện thời lượng của tương tác đã vượt quá 200 mili giây, đây là giới hạn trên của ngưỡng "tốt" đối với INP của một trang. Các phần của tương tác được liệt kê là:

1. Độ trễ đầu vào được biểu thị bằng râu bên trái.
2. Thời lượng xử lý—được hiển thị bằng khối đồng nhất giữa râu trái và phải.
3. Độ trễ hiển thị—được biểu thị bằng râu phải.

Từ đây, chúng ta sẽ tìm hiểu sâu hơn về(các) vấn đề gây ra tình trạng tương tác chậm. Nội dung này sẽ được đề cập ở phần sau của hướng dẫn này.

Tiện ích Các chỉ số quan trọng về trang web của Chrome

Trình phân tích hiệu suất là phương pháp đề xuất để chẩn đoán các lượt tương tác được xác định là có tốc độ chậm. Tuy nhiên, bạn có thể cần thời gian để xác định các lượt tương tác chậm khi bạn không biết lượt tương tác nào là lượt tương tác gây ra vấn đề. Một phương pháp cần cân nhắc là sử dụng tiện ích Các chỉ số quan trọng về trang web của Chrome. Bạn có thể sử dụng tiện ích này để thử nhanh một số lượt tương tác nhằm tìm ra các lượt tương tác có vấn đề trước khi chuyển sang trình phân tích hiệu suất.

Sau khi cài đặt, tiện ích Các chỉ số quan trọng về trang web sẽ hiển thị dữ liệu về lượt tương tác trong bảng điều khiển DevTools nếu bạn làm theo các bước sau:

1. Trong Chrome, nhấp vào biểu tượng tiện ích ở bên phải thanh địa chỉ.
2. Tìm tiện ích Các chỉ số quan trọng về trang web trong trình đơn thả xuống.
3. Nhấp vào biểu tượng ở bên phải để mở phần cài đặt của tiện ích.
4. Nhấp vào Tuỳ chọn.
5. Bật hộp đánh dấu Ghi nhật ký trên Console trong màn hình kết quả, sau đó nhấp vào Lưu.

Sau khi làm theo các bước này, hãy mở bảng điều khiển trong Công cụ của Chrome cho nhà phát triển và bắt đầu kiểm tra các hoạt động tương tác đáng ngờ trên một trang. Khi bạn tương tác, dữ liệu chẩn đoán sẽ xuất hiện trong bảng điều khiển:

Mặc dù tiện ích Các chỉ số quan trọng về trang web giúp xác định lượt tương tác chậm và cung cấp một số thông tin chi tiết giúp bạn gỡ lỗi INP, nhưng bạn vẫn nên sử dụng trình phân tích hiệu suất để chẩn đoán lượt tương tác chậm vì công cụ này cung cấp dữ liệu chi tiết mà bạn cần trong mã sản xuất của trang web để tìm nguyên nhân gây ra tình trạng tương tác chậm.

Cách xác định phần nào của tương tác bị chậm

Hoạt động tương tác bao gồm ba phần: độ trễ đầu vào, thời lượng xử lý và độ trễ trình chiếu. Cách bạn tối ưu hoá lượt tương tác để giảm INP của trang phụ thuộc vào phần nào của trang tốn nhiều thời gian nhất.

Cách xác định độ trễ nhập trong thời gian dài

Độ trễ khi nhập dữ liệu có thể khiến độ 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 hệ điều hành nhận hành động của người dùng lần đầu tiên cho đến khi trình duyệt có thể bắt đầu xử lý lệnh gọi lại trình xử lý sự kiện đầu tiên của lượt tương tác đó.

Bạn có thể xác định độ trễ đầu vào trong trình phân tích hiệu suất của Chrome bằng cách xác định lượt tương tác trong kênh tương tác. Độ dài của râu trái cho biết phần thời gian trễ đầu vào của tương tác và bạn có thể tìm thấy giá trị chính xác trong chú giải công cụ bằng cách di chuột qua tương tác trong trình phân tích hiệu suất.

Độ trễ đầu vào không bao giờ bằng 0, nhưng bạn có thể kiểm soát được độ trễ đầu vào là trong bao lâu. Điều quan trọng là xác định xem có công việc nào đang chạy trên luồng chính đang ngăn lệnh gọi lại của bạn chạy ngay khi cần hay không.

Trong hình trước, một tác vụ trong tập lệnh của bên thứ ba đang chạy khi người dùng cố gắng tương tác với trang, do đó kéo dài độ trễ đầu vào. Độ trễ đầu vào kéo dài sẽ ảnh hưởng đến độ trễ của hoạt động tương tác, từ đó có thể ảnh hưởng đến INP của trang.

Cách xác định thời gian xử lý dài

Các lệnh gọi lại sự kiện sẽ chạy ngay sau độ trễ đầu vào và thời gian cần để hoàn tất các lệnh gọi lại này được gọi là thời lượng xử lý. Nếu các lệnh gọi lại sự kiện chạy quá lâu, sẽ khiến trình duyệt không thể hiển thị khung tiếp theo và có thể 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à do JavaScript của bên thứ nhất hoặc bên thứ ba gây tốn kém, và trong một số trường hợp, cả hai yếu tố này. Trong trình phân tích hiệu suất, điều này được thể hiện bằng phần tương tác liền mạch trên kênh tương tác.

Bạn có thể tìm các lệnh gọi lại sự kiện tốn kém bằng cách quan sát những nội dung sau trong dấu vết cho một tương tác cụ thể:

1. Xác định xem tác vụ liên kết với các lệnh gọi lại sự kiện có phải là thao tác dài hay không. Để hiển thị các tác vụ dài trong thiết lập phòng thí nghiệm một cách đáng tin cậy hơn, bạn có thể cần bật chế độ điều tiết CPU trong bảng hiệu suất hoặc kết nối thiết bị Android có cấp thấp đến tầm trung rồi sử dụng tính năng gỡ lỗi từ xa.
2. Nếu tác vụ chạy lệnh gọi lại sự kiện là một tác vụ mất nhiều thời gian, hãy tìm các mục nhập của trình xử lý sự kiện (ví dụ: các mục nhập có tên như Sự kiện: lượt nhấp) trong ngăn xếp lệnh gọi có hình tam giác màu đỏ ở góc trên bên phải của mục nhập.

Bạn có thể thử một trong các chiến lược sau để giảm thời lượng xử lý của một tương tác:

1. Thực hiện càng ít công việc càng tốt. Mọi việc xảy ra trong một lệnh gọi lại sự kiện tốn kém có thực sự cần thiết không? Nếu không, hãy cân nhắc xoá hoàn toàn mã đó nếu có thể hoặc trì hoãn thực thi mã đến một thời điểm sau đó nếu bạn không thể. Bạn cũng có thể tận dụng các tính năng khung để trợ giúp. Ví dụ: tính năng kỷ niệm của React có thể bỏ qua công việc kết xuất không cần thiết cho một thành phần khi đạo cụ của thành phần đó không thay đổi.
2. Trì hoãn công việc không kết xuất trong lệnh gọi lại sự kiện đến một thời điểm sau đó. Bạn có thể chia nhỏ các tác vụ dài bằng cách quay vào luồng chính. Bất cứ khi nào chuyển sang luồng chính, bạn sẽ kết thúc quá trình thực thi tác vụ hiện tại và chia phần còn lại của tác vụ thành một tác vụ riêng. Điều này giúp trình kết xuất có cơ hội xử lý các nội dung cập nhật cho giao diện người dùng đã được thực hiện trước đó trong lệnh gọi lại sự kiện. Nếu bạn đang sử dụng React, tính năng chuyển đổi của ứng dụng có thể giúp bạn làm việc này.

Các chiến lược này có thể giúp bạn tối ưu hoá lệnh gọi lại sự kiện để giảm thời gian chạy các lệnh gọi lại này.

Cách xác định độ trễ trong bản trình bày

Độ trễ đầu vào và thời gian xử lý lâu không phải là nguyên nhân duy nhất gây ra INP kém. Đôi khi, việc kết xuất cập nhật nhằm phản hồi ngay cả một lượng nhỏ mã gọi lại sự kiện có thể gây tốn kém. Thời gian mà trình duyệt cần để hiển thị nội dung cập nhật trực quan cho giao diện người dùng để phản ánh kết quả của một hoạt động tương tác được gọi là độ trễ hiển thị.

Công việc kết xuất thường bao gồm những công việc như tính toán lại kiểu, bố cục, sơn và kết hợp, đồng thời được thể hiện bằng các khối màu tím và xanh lục trong biểu đồ ngọn lửa của trình phân tích tài nguyên. Tổng thời gian trễ trình bày được biểu thị bằng râu phải của hoạt động tương tác trong kênh tương tác.

Trong tất cả các nguyên nhân có thể gây ra độ trễ tương tác cao, độ trễ trình bày có thể là nguyên nhân khó khắc phục và khắc phục nhất. Công việc kết xuất quá mức có thể do bất kỳ yếu tố nào sau đây:

• Kích thước DOM lớn. Công việc kết xuất cần thiết để cập nhật bản trình bày của một trang thường tăng lên cùng với kích thước của DOM của trang. Để biết thêm thông tin, hãy đọc Cách kích thước DOM lớn ảnh hưởng đến khả năng tương tác — và những việc bạn có thể làm với vấn đề này.
• Bắt buộc chỉnh lại luồng. Điều này xảy ra khi bạn áp dụng các thay đổi về kiểu cho các phần tử trong JavaScript và sau đó truy vấn ngay kết quả của công việc đó. Kết quả là trình duyệt phải thực hiện công việc bố cục trước khi làm bất cứ việc gì khác, để trình duyệt có thể trả về các kiểu cập nhật. Để biết thêm thông tin và mẹo về cách tránh việc chỉnh lại luồng, hãy đọc bài viết Tránh việc có bố cục lớn, phức tạp và tình trạng đơ bố cục.
• Thực hiện quá nhiều thao tác hoặc không cần thiết trong lệnh gọi lại requestAnimationFrame. Lệnh gọi lại requestAnimationFrame() chạy trong giai đoạn kết xuất của vòng lặp sự kiện và phải hoàn tất trước khi khung tiếp theo có thể xuất hiện. Nếu bạn đang sử dụng requestAnimationFrame() để thực hiện công việc không liên quan đến các thay đổi đối với giao diện người dùng, hãy hiểu rằng bạn có thể đang trì hoãn khung hình tiếp theo.
• Các lệnh gọi lại ResizeObserver. Những lệnh gọi lại như vậy chạy trước khi kết xuất và có thể trì hoãn việc trình bày khung tiếp theo nếu công việc trong đó tốn kém. Tương tự như với các lệnh gọi lại sự kiện, hãy trì hoãn mọi logic không cần thiết cho khung tiếp theo.

Điều gì xảy ra nếu bạn không thể tái hiện một tương tác chậm?

Điều gì sẽ xảy ra nếu dữ liệu hiện trường của bạn cho thấy một tương tác cụ thể diễn ra chậm, nhưng bạn không thể tái hiện vấn đề theo cách thủ công mà phòng thí nghiệm? Có một vài lý do khiến điều này có thể xảy ra.

Thứ nhất, các trường hợp bạn thực hiện khi kiểm thử các lượt tương tác phụ thuộc vào kết nối mạng và phần cứng của bạn. Bạn có thể đang sử dụng một thiết bị nhanh trên kết nối nhanh, nhưng điều đó không có nghĩa là người dùng của bạn sử dụng như vậy. Bạn có thể thử một trong ba cách sau nếu phù hợp với bạn:

1. Nếu bạn có thiết bị Android thực, hãy sử dụng tính năng gỡ lỗi từ xa để mở một phiên bản Công cụ của Chrome cho nhà phát triển trên máy chủ của bạn và cố gắng tái tạo các hoạt động tương tác chậm ở đó. Thiết bị di động thường không nhanh như máy tính xách tay hoặc máy tính để bàn, vì vậy, bạn có thể dễ dàng quan sát thấy các tương tác chậm hơn trên những thiết bị này.
2. Nếu bạn không có thiết bị thực, hãy bật tính năng điều tiết CPU trong Công cụ của Chrome cho nhà phát triển.

Một nguyên nhân khác có thể là bạn đang chờ trang tải trước khi tương tác với trang, nhưng người dùng của bạn thì không. Nếu bạn đang sử dụng mạng nhanh, hãy mô phỏng các điều kiện mạng chậm hơn bằng cách bật tính năng điều tiết mạng, sau đó tương tác với trang ngay khi trang hiển thị. Bạn nên thực hiện việc này vì luồng chính thường bận rộn nhất trong quá trình khởi động và việc kiểm thử trong khoảng thời gian đó có thể tiết lộ những gì người dùng của bạn đang trải nghiệm.

Khắc phục sự cố INP là một quá trình lặp lại

Việc tìm hiểu nguyên nhân gây ra độ trễ tương tác cao góp phần gây ra INP kém tốn rất nhiều công sức, nhưng nếu có thể xác định nguyên nhân thì bạn đã đi được một nửa rồi. Bằng cách làm theo phương pháp có phương pháp để khắc phục sự cố INP kém, bạn có thể xác định chính xác nguyên nhân gây ra vấn đề và tìm ra điểm khắc phục phù hợp nhanh hơn. Cách xem xét:

• Dựa vào dữ liệu thực địa để tìm các tương tác chậm.
• Kiểm tra theo cách thủ công các hoạt động tương tác tại hiện trường có vấn đề trong phòng thí nghiệm để xem chúng có thể lặp lại hay không.
• Xác định xem nguyên nhân là do độ trễ đầu vào kéo dài, lệnh gọi lại sự kiện tốn kém hay công việc kết xuất tốn kém.
• Lặp lại.

Mục cuối cùng trong số này là quan trọng nhất. Giống như hầu hết các công việc khác bạn làm để cải thiện hiệu suất trang, khắc phục sự cố và cải thiện INP là một quá trình theo chu kỳ. Sau khi bạn khắc phục một tương tác bị chậm, hãy chuyển sang hoạt động tương tác tiếp theo và lặp lại cho đến khi bạn bắt đầu thấy kết quả.