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 thực địa 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 các hoạt động tương tác chậm thông qua việc kiểm thử thủ công.

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. Có nhiều nguyên nhân tiềm ẩn: 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.v.

Bạn có thể gặp khó khăn khi tìm cách khắc phục INP kém. Để 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 so với góc độ của người dùng thực tế, trước tiên, hãy đọc bài viết Tìm lượt tương tác chậm trong trường. Sau khi có dữ liệu thực địa hướng dẫn, bạn có thể kiểm thử 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 hiểu lý do các lượt 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ì dữ liệu này giúp bạn 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í không có dữ liệu trường. Nếu cách này mô tả tình huống của bạn, thì bạn vẫn có thể tìm các lượt tương tác để cải thiện. Mặc dù cách này đòi hỏi nhiều nỗ lực hơn một chút và 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 rất tốt với INP. Nếu trang của bạn có TBT cao, đó là một tín hiệu quan trọng cho thấy trang của bạn có thể không phản hồi nhiều với các lượt tương tác của người dùng trong lượt tải trang ban đầu.

Để xác định TBT của trang, bạn có thể sử dụng Lighthouse hoặc PageSpeed Insights. Nếu TBT của một trang không đáp ứng ngưỡng "tốt", thì 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 tốc độ tương tác diễn ra trong thời gian quan trọng đó trong vòng đời của trang.

Để tìm thấy các lượt tương tác chậm sau khi trang đã tải, bạn có thể cần dựa vào 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, sau đó thực hiện quy trình thanh toán.

Cho dù bạn có dữ liệu thực tế hay không, bước tiếp theo là kiểm thử và tái tạo các lượt tương tác chậm theo cách thủ công, vì chỉ khi đã có thể xác định chính xác một lượt tương tác chậm thì bạn mới có thể khắc phụ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 để 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 thử thủ công, nhưng sau đây là một khung mà bạn có thể sử dụng để tái hiện các tương tác chậm trong môi trường phòng thí nghiệm, đồng thời giảm thiểu nỗ lực nhận thức.

Không được tiếp cận ngay trình phân tích hiệu suất

Nếu đã quen thuộc với trình phân tích hiệu suất của Chrome, thì chắc hẳn bạn biết rằng trình này cung cấp rất nhiều thông tin chẩn đoán hữu ích khi khắc phục các vấn đề về hiệu suất của trang. Đây là một công cụ hữu ích với nhiều ưu điểm.

Tuy nhiên, nhược điểm là trình phân tích hiệu suất của Chrome không cung cấp chế độ xem trực tiếp trong khi tương tác với trang. Cần rất nhiều thời gian để sử dụng, và có nhiều cách hiệu quả hơn để kiểm thử các lượt tương tác theo cách thủ công trước tiên. Mục tiêu là dành lượng thời gian và công sức tối thiểu để tái tạo các lượt tương tác chậm. Sau khi xác định được chắc chắn một lượt tương tác chậm, thì bạn nên sử dụng trình phân tích hiệu suất để tìm hiểu sâu hơn về(các) nguyên nhân gây ra vấn đề đó.

Sử dụng tiện ích Các chỉ số quan trọng về trang web của Chrome

Tiện ích Các chỉ số quan trọng về trang web của Chrome giúp bạn dễ dàng kiểm tra độ trễ tương tác theo cách thủ công. Sau khi cài đặt, tiện ích này sẽ hiển thị dữ liệu về lượt tương tác trong bảng điều khiển DevTools, miễn là bạn làm như sau trước:

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 Console Log (Ghi nhật ký Bảng điều khiển) trên màn hình kết quả, sau đó nhấp vào Save (Lưu).

Sau khi hoàn tất việ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 thử các hoạt động tương tác đáng ngờ trên trang web của bạn. Khi bạn tương tác với trang, dữ liệu chẩn đoán hữu ích sẽ xuất hiện trong bảng điều khiển.

Sử dụng đoạn mã JavaScript

Dù hữu ích đến mức nào, thì tiện ích Các chỉ số quan trọng về trang web có thể không phải là lựa chọn khả thi cho mọi người. Các tiện ích của trình duyệt có thể bị chặn trong một số môi trường do chính sách bảo mật thiết bị. Bạn cũng không thể cài đặt tiện ích trên thiết bị di động. Phương thức sau sẽ gây ra vấn đề nếu bạn muốn kiểm thử theo cách thủ công trên một thiết bị chạy Android thực bằng tính năng gỡ lỗi từ xa.

Một phương pháp thay thế để sử dụng tiện ích Web Vital là sao chép và dán một số JavaScript vào bảng điều khiển Công cụ cho nhà phát triển. Mã sau đây cung cấp cho bạn kết quả đầu ra trên bảng điều khiển giống như của tiện ích Chỉ số quan trọng về trang web cho mọi lượt tương tác:

let worstInp = 0;

const observer = new PerformanceObserver((list, obs, options) => {
  for (let entry of list.getEntries()) {
    if (!entry.interactionId) continue;

    entry.renderTime = entry.startTime + entry.duration;
    worstInp = Math.max(entry.duration, worstInp);

    console.log('[Interaction]', entry.duration, `type: ${entry.name} interactionCount: ${performance.interactionCount}, worstInp: ${worstInp}`, entry, options);
  }
});

observer.observe({
  type: 'event',
  durationThreshold: 0, // 16 minimum by spec
  buffered: true
});

Sau khi đã xác định rằng một lượt tương tác có tốc độ chậm đáng tin cậy, bạn có thể phân tích tài nguyên tương tác đó trong trình phân tích hiệu suất để nhận thông tin chi tiết về lý do khiến tương tác đó chậm.

Đ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 hoạt động tương tác cụ thể diễn ra chậm, nhưng bạn không thể tái tạo sự cố mà 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 và đây là một thách thức thường gặp trong việc khắc phục các vấn đề về hiệu suất dưới mọi hình thức.

Mỗi lần, các trường hợp của bạn khi kiểm thử các tương tác phụ thuộc vào kết nối mạng và phần cứng mà bạn đang sử dụng. Suy cho cùng, bạn có thể đang sử dụng một thiết bị có tốc độ cao 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 thật may mắn. Bạn có thể làm một trong ba việc sau nếu trường hợp này xảy ra:

1. Nếu bạn có thiết bị chạy 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 để 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 trong những điều kiện như vậ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.
3. Hãy thử cả hai bước 1 và 2, vì bạn cũng có thể bật chế độ điều tiết CPU trên phiên bản DevTools cho thiết bị thực tế chạy Android.

Một nguyên nhân khác có thể là bạn đang chờ 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ạ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ử tại thời điểm đó có thể tiết lộ những gì người dùng của bạn đang trải nghiệm.

Ghi lại dấu vết

Để biết thêm thông tin về lý do khiến hoạt động tương tác bị chậm, bước tiếp theo là sử dụng trình phân tích hiệu suất trong Công cụ của Chrome cho nhà phát triển. Để 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 như sau:

1. Mở trang bạn cần kiểm tra.
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 lập hồ sơ.
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 điền sẵn, vị trí đầu tiên cần xem 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 thao tác dài diễn ra trong bản ghi. Điều này giú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. Sau khi bạn đã tập trung vào vị trí xảy ra lượt tương tác, kênh 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:

Từ đây, chúng ta sẽ tìm hiểu sâu hơn về vấn đề gây ra tương tác chậm. Có nhiều yếu tố có thể dẫn đến độ trễ tương tác cao. Một số yếu tố trong số đó được trình bày kỹ hơn trong hướng dẫn này.

Sử dụng khoảng thời gian Lighthouse thay thế cho việc theo dõi

Mặc dù có nhiều thông tin chẩn đoán, nhưng trình phân tích hiệu suất của Chrome có thể khiến người dùng chưa biết đến. Một phương án thay thế cho trình phân tích hiệu suất là chế độ khoảng thời gian của Lighthouse. Để sử dụng chế độ này, hãy làm như sau:

1. Khi Công cụ cho nhà phát triển đang mở, hãy chuyển đến thẻ Lighthouse trong Công cụ cho nhà phát triển.
2. Trong phần có nhãn Mode (Chế độ), hãy chọn Timespan (Khoảng thời gian).
3. Chọn loại thiết bị Máy tính hoặc Thiết bị di động trong phần có nhãn Thiết bị.
4. Đảm bảo ít nhất hộp đánh dấu có nhãn Performance (Hiệu suất) đã được chọn trong nhãn Category (Danh mục).
5. Nhấp vào nút Start timespan (Bắt đầu khoảng thời gian).
6. Kiểm tra(các) lượt tương tác trên trang mà bạn muốn tải dữ liệu.
7. Nhấp vào nút Kết thúc khoảng thời gian rồi chờ quá trình kiểm tra xuất hiện
8. Sau khi yêu cầu kiểm tra xuất hiện trong thẻ Lighthouse, bạn có thể lọc các lượt kiểm tra theo INP bằng cách nhấp vào đường liên kết INP bên cạnh nhãn có nội dung Hiển thị các lượt kiểm tra liên quan đến.

Khi đó, một danh sách thả xuống cho những kiểm tra không thành công hoặc không đạt sẽ xuất hiện. Khi mở rộng trình đơn thả xuống đó, bạn sẽ thấy bảng phân tích thời gian tương tác.

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

Độ trễ tương tác cũng chính là độ trễ đầu vào. Độ trễ đầu vào là giai đoạ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 thời điểm trình duyệt có thể bắt đầu xử lý sự kiện đầu tiên được kích hoạt bởi hoạt động đầu vào đó. Độ trễ đầu vào kết thúc ngay khi các lệnh gọi lại sự kiện cho lượt tương tác bắt đầu chạy.

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 thời điểm bắt đầu một tương tác trong kênh tương tác, sau đó tìm thời điểm bắt đầu lệnh gọi lại sự kiện cho hoạt động tương tác đó bắt đầu chạy.

Độ trễ đầu vào sẽ luôn nằm trong dự kiến, vì hệ điều hành phải mất một khoảng thời gian để truyền sự kiện đầu vào đến trình duyệt. Tuy nhiên, bạn có một số quyền kiểm soát đối với độ trễ đầu vào là bao lâu. Đ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 đang ngăn lệnh gọi lại của bạn chạy 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, nên sẽ kéo dài độ trễ đầu vào. Độ trễ đầu vào mở rộng 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 các lệnh gọi lại sự kiện tốn kém

Các lệnh gọi lại sự kiện sẽ chạy ngay sau độ trễ đầu vào. Nếu lệnh gọi lại sự kiện chạy quá lâu, lệnh gọi lại này sẽ khiế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 độ trễ của một lượt tương tác. Các lệnh gọi lại sự kiện chạy trong thời gian dài có thể là kết quả của JavaScript của bên thứ nhất hoặc bên thứ ba tốn kém tài nguyên tính toán, và trong một số trường hợp, cả hai.

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 về 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à tác vụ 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 điều khiển hiệu suất hoặc kết nối thiết bị chạy Android từ 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 trình xử lý sự kiện (ví dụ: các mục nhập có tên như Sự kiện: 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. Đây là những lệnh gọi lại sự kiện tốn kém.

Để giải quyết các lệnh gọi lại sự kiện tốn kém, hãy thử một trong các chiến lược sau:

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 việc xoá hoàn toàn mã đó nếu có thể, hoặc hoãn thực thi đế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ụ: lớp PureComponent và 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 khi đạo cụ và trạng thái không thay đổi cho một thành phần.
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 bạn tạo 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ó thể giúp bạn làm việc này.

Bằng cách sử dụng các chiến lược này, bạn sẽ có thể nhận được các lệnh gọi lại sự kiện ở vị trí mà chúng phản hồi nhanh hơn với hoạt động đầu vào của người dùng.

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

Độ trễ đầu vào kéo dài và các lệnh gọi lại sự kiện tốn kém không phải là nguyên nhân duy nhất có thể gây ra INP kém. Đôi khi, việc kết xuất các bản cập nhật diễn ra để phản hồi ngay cả 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 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ị.

Trong số tất cả các nguyên nhân có thể gây ra độ trễ tương tác cao, công việc kết xuất có thể là vấn đề khó khắc phục và khắc phục nhất, nhưng kết quả rất xứng đáng. 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 hiển thị 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 bài viết 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 để khắc phục 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 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à các mẹo về cách tránh tình trạng buộc chỉnh lại luồng, hãy đọc bài viết Tránh 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. Các 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 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 đó gây 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.

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

Việc tìm ra nguyên nhân gây ra độ trễ tương tác cao góp phần dẫn đến INP kém tốn 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 sự cố 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 thử theo cách thủ công các hoạt động tương tác 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 có phải là do độ trễ đầu vào kéo dài, 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 theo chu kỳ. Khi bạn khắc phục một tương tác 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ả. Hãy luôn cảnh giác!