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 tại hiện trường của bạn vào phòng thí nghiệm để tái hiện và xác định nguyên nhân gây ra tương tác chậm thông qua 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 thấp. Có rất 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.

Cải thiện INP (Lượt tương tác đến nội dung) có thể không hề dễ dàng. Để 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 lượt tương tác nào trên trang web của mình có xu hướng chậm nhất từ 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. Khi có dữ liệu thực địa để hướng dẫn, bạn có thể kiểm tra các hoạt động tương tác cụ thể đó theo cách thủ công trong các công cụ trong phòng thí nghiệm để tìm ra lý do các hoạt động tương tác đó diễn ra chậm.

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

Việc có dữ liệu thực địa là rất quan trọng vì dữ liệu này giúp bạn tiết kiệm được nhiều thời gian tìm hiểu xem những hoạt động tương tác nào cần được tối ưu hoá. Tuy nhiên, có thể bạn đang ở vị trí mà bạn không có dữ liệu trường. Nếu trường hợp đó giống với trường hợp của bạn, 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ù việc này đòi hỏi nhiều nỗ lực hơn và một phương pháp khác.

Tổng thời gian chặn (TBT) là một chỉ số trong phòng thí nghiệm đánh giá khả năng phản hồi của trang trong quá trình tải và chỉ số này tương quan tốt với INP. Nếu trang của bạn có TBT cao, đó là một tín hiệu tiềm năng cho thấy trang của bạn có thể không phản hồi nhanh với 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 trang cao, có khả năng luồng chính sẽ quá bận trong khi tải trang và có thể ảnh hưởng đến mức độ phản hồi của trang trong thời điểm quan trọng đó trong vòng đời của trang.

Để tìm lượt tương tác chậm sau khi trang tải, bạn có thể cần các loại dữ liệu khác, chẳng hạn như 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 của mình. 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à các 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 trường hay không, bước tiếp theo là kiểm tra và tái tạo các tương tác chậm theo cách thủ công — bởi vì chỉ khi bạn có thể tái tạo một tương tác chậm thì bạn mới có thể khắc phục vấn đề đó.

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

Có một số cách bạn có thể tái tạo các tương tác chậm trong phòng thí nghiệm thông qua kiểm tra thủ công, nhưng sau đây là một khung mà bạn có thể thử.

Ghi lại dấu vết

Trình phân tích hiệu suất của Chrome là công cụ bạn nên dùng để 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 lượ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. Có trang mà bạn muốn thử nghiệm đang 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 lại ở 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) 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) để ngừng theo dõi.

Khi trình phân tích tài nguyên được điền sẵn, nơi đầu tiên cần xem là phần tóm tắt hoạt động ở đầu trình phân tích. Phần tóm tắt hoạt động sẽ hiển thị các thanh màu đỏ ở trên cùng nơi diễn ra các tác vụ dài trong bản ghi. Tính năng này giúp bạn nhanh chóng phóng to 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 đường dẫn 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.

Khi bạn đã tập trung vào vị trí xảy ra lượt tương tác, kênh Lượt tương tác sẽ giúp bạn căn chỉnh lượt tương tác và hoạt động xảy ra trong luồng 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 hoạt động tương tác diễn ra lâu nhất bằng cách di chuột qua lượt lặp lại trong kênh tương tác:

Phần có sọc của tương tác thể hiện thời lượng tương tác vượt quá 200 mili giây, đây là giới hạn trên của "tốt" cho 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 hiển thị bằng râu bên trái.
2. Thời lượng xử lý – được hình dung bằng khối liền mạch giữa các râu bên trái và bên phải.
3. Độ trễ hiển thị – được hình ảnh bởi người râu.

Từ đây, vấn đề nằm ở việc tìm hiểu kỹ hơn(các) vấn đề gây ra sự tương tác chậm. Vấn đề này sẽ được đề cập ở phần sau của hướng dẫn này.

Tiện ích Chỉ số quan trọng của trang web của Chrome

Trình phân tích hiệu suất là phương pháp được đề xuất để chẩn đoán các lượt tương tác diễn ra chậm, nhưng 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à tương tác có vấn đề. Một phương pháp có thể cân nhắc là sử dụng Tiện ích của Chrome Chỉ số quan trọng về trang web. Bạn có thể sử dụng tiện ích này để thử nhanh một số tương tác nhằm tìm ra các tương tác có vấn đề trước khi chuyển vào trình phân tích hiệu suất.

Sau khi được cài đặt, tiện ích Chỉ số quan trọng của trang web sẽ hiển thị dữ liệu 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, hãy nhấp vào biểu tượng tiện ích ở bên phải thanh địa chỉ.
2. Xác định vị trí tiện ích Chỉ số quan trọng của 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 Tùy chọn.
5. Bật hộp đánh dấu Ghi nhật ký bảng điều khiển trong màn hình kết quả, rồi 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 Chỉ số quan trọng về trang web giúp xác định các 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 có thể cần phải sử dụng trình phân tích hiệu suất để chẩn đoán các lượt tương tác chậm, vì tiện ích này cung cấp dữ liệu chi tiết mà bạn cần khi di chuyển qua mã phát hành chính thức của trang web để tìm ra nguyên nhân gây ra lượt tương tác chậm.

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

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

Cách xác định độ trễ đầu vào lâu

Độ 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 hệ điều hành nhận được 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 bên trái cho biết khoảng thời gian trễ đầu vào của lượt tương tác. Bạn có thể xem giá trị chính xác trong phần chú thích bằng cách di chuột lên lượt tương tác đó trong trình phân tích hiệu suất.

Độ trễ đầu vào không bao giờ được bằng 0, nhưng bạn có một số quyền kiểm soát đối với độ trễ đầu vào dài. Điều quan trọng là tìm hiểu xem có công việc nào đang chạy trên luồng chính khiến các lệnh gọi lại của bạn không 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, từ đó kéo dài độ trễ của dữ liệu nhập. Độ trễ đầu vào kéo dài ảnh hưởng đến độ trễ của lượt tương tác, do đó 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 chạy ngay sau độ trễ đầu vào và thời gian hoàn tất các lệnh gọi lại này được gọi là thời gian xử lý. Nếu các lệnh gọi lại sự kiện chạy quá lâu, chúng sẽ trì hoãn trình duyệt hiển thị khung hình 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à kết quả của JavaScript của bên thứ nhất hoặc bên thứ ba về mặt tính toán và trong một số trường hợp là cả hai. 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 vững chắc trong theo dõi lượt 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 điều sau trong dấu vết của một tương tác cụ thể:

1. Xác định xem tác vụ liên kết với lệnh gọi lại sự kiện có phải là tác vụ kéo dài hay không. Để hiển thị các tác vụ dài trong chế độ cài đặt phòng thí nghiệm một cách đáng tin cậy hơn, có thể bạn cần phải bật chế độ điều tiết CPU trong bảng hiệu suất hoặc kết nối một thiết bị Android tầm 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ụ dài, hãy tìm các mục nhập của trình xử lý sự kiện (ví dụ: mục nhập có tên như Sự kiện: nhấp chuột) trong ngăn xếp lệnh gọi có một 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. Làm càng ít hoạt động càng tốt. Mọi thứ xảy ra trong 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 hoãn việc thực thi mã đến 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 của khung để hỗ trợ. Ví dụ: tính năng ghi nhớ 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 thuộc tính của thành phần đó không thay đổi.
2. Hoãn công việc không hiển thị trong lệnh gọi lại sự kiện cho đế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 chuyển thành luồng chính. Bất cứ khi nào bạn tạo luồng chính, bạn sẽ kết thúc việc thực thi tác vụ hiện tại và chia phần công việc còn lại 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 bản cập nhật đối với 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 tình cờ dùng React, thì tính năng chuyển đổi của ứng dụng này có thể làm việc này cho bạn.

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

Cách xác định độ trễ khi trình bày

Độ trễ đầu vào dài và thời gian xử lý không phải là nguyên nhân duy nhất gây ra INP kém. Đôi khi, việc cập nhật quá trình kết xuất diễn ra để phản hồi một lượng nhỏ mã gọi lại sự kiện cũng có thể gây tốn kém. Thời gian 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 lượt 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 các công việc như tính toán lại kiểu, bố cục, vẽ và kết hợp, đồng thời được biểu thị bằng các khối màu tím và màu xanh lục trong biểu đồ ngọn lửa của trình phân tích tài nguyên. Tổng độ trễ hiển thị được biểu thị bằng râu bên phải của 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ễ khi trình bày có thể là nguyên nhân khó khắc phục nhất. Việc kết xuất hình ảnh quá mức có thể do bất kỳ yếu tố nào sau đây gây ra:

• 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 trang thường tăng cùng với kích thước DOM của trang. Để biết thêm thông tin, hãy đọc Mức độ ảnh hưởng của kích thước DOM lớn đến tính tương tác và những việc bạn có thể làm để xử lý 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, sau đó truy vấn ngay lập tức kết quả của thao tá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 kỳ điều gì khác, để trình duyệt có thể trả về các kiểu được cập nhật. Để biết thêm thông tin và mẹo về cách tránh buộc chỉnh lại luồng, hãy đọc bài viết Tránh tình trạng đơ bố cục và bố cục lớn, phức tạp.
• Thao tác quá mức hoặc không cần thiết trong các lệnh gọi lại requestAnimationFrame. Các lệnh gọi lại requestAnimationFrame() được 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 có thể hiển thị khung hình tiếp theo. 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ể trì hoãn khung hình tiếp theo.
• Các lệnh gọi lại ResizeObserver. Các 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 hiển thị khung tiếp theo nếu công việc trong đó tốn kém. Giống như 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ể mô phỏng một tương tác chậm?

Điều gì sẽ xảy ra nếu dữ liệu 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 tạo vấn đề trong phòng thí nghiệm theo cách thủ công? Có một vài lý do khiến điều này xảy ra.

Thứ nhất, trường hợp bạn kiểm thử các hoạt động tương tác phụ thuộc vào phần cứng và kết nối mạ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 cũng vậy. Bạn có thể thử một trong ba cách sau nếu gặp phải trường hợp này:

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ở 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 bằng máy tính xách tay hoặc máy tính để bàn, vì vậy, khả năng tương tác chậm có thể dễ dàng được ghi nhận trên các 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 đợi một trang tải trước khi tương tác với trang đó, nhưng người dùng thì không. Nếu bạn đang sử dụng một 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 làm điều 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ể cho biết trải nghiệm của người dùng.

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

Để tìm ra nguyên nhân gây ra độ trễ tương tác cao góp phần dẫn đến INP thấp, bạn phải làm rất nhiều việc. Tuy nhiên, nếu có thể xác định được nguyên nhân thì bạn đã đi được nửa chặng đường. 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 nguyên nhân gây ra vấn đề một cách chính xác và nhanh chóng tìm ra biện pháp khắc phục phù hợp. Để xem xét:

• Dựa vào dữ liệu tại hiện trường để tìm lượt tương tác chậm.
• Kiểm tra thủ công các hoạt động tương tác có vấn đề với trường trong phòng thí nghiệm để xem chúng có thể tái tạo hay không.
• Xác định xem nguyên nhân có phải là do độ trễ đầu vào lâu, các lệnh gọi lại sự kiện tốn kém hoặc 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, việc khắc phục sự cố và cải thiện INP là một quá trình mang tính chu kỳ. Khi bạn khắc phục một tương tác bị chậm, hãy chuyển sang 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ả.