Tìm các hoạt động tương tác chậm trong trường

Tìm hiểu cách tìm các tương tác chậm trong dữ liệu trường của trang web để bạn có thể tìm thấy cơ hội cải thiện Lượt tương tác với Nội dung hiển thị tiếp theo.

Jeremy Wagner

Dữ liệu thực tế là nguồn nguồn đáng tin cậy cho biết cách người dùng thực tế đang trải nghiệm trang web của bạn. Trang này chỉ ra những vấn đề mà bạn có thể không thấy riêng trong dữ liệu của phòng thí nghiệm. Mặc dù các hoạt động tương tác có thể được mô phỏng bằng các công cụ trong phòng thí nghiệm, nhưng bạn sẽ không thể tái tạo được từng hoạt động tương tác trong phòng thí nghiệm theo cách mà người dùng thực tế trải nghiệm chúng. Việc thu thập dữ liệu trường cho Lượt tương tác với nội dung hiển thị tiếp theo (INP) đóng vai trò quan trọng để hiểu mức độ phản hồi của trang đối với người dùng thực, đồng thời dữ liệu này chứa các gợi ý để giúp họ có trải nghiệm tốt hơn nữa.

Thông tin bạn nên thu thập tại hiện trường và lý do

Khi thu thập dữ liệu INP tại hiện trường, bạn cần thu thập những dữ liệu sau đây để giải thích lý do khiến lượt tương tác bị chậm:

• Giá trị INP. Đây là phần dữ liệu quan trọng mà bạn cần thu thập. Việc phân bổ các giá trị này sẽ xác định liệu trang có đáp ứng ngưỡng INP hay không.
• Chuỗi bộ chọn phần tử chịu trách nhiệm về INP của trang. Việc biết INP của trang là tốt, nhưng bản thân nó vẫn chưa đủ tốt. Nếu không biết yếu tố nào gây ra vấn đề đó thì bạn sẽ chìm vào biển tối. Bằng cách ghi nhật ký chuỗi bộ chọn phần tử, bạn sẽ biết chính xác phần tử nào chịu trách nhiệm cho các lượt tương tác.
• Trạng thái tải của trang cho hoạt động tương tác là INP của trang. Khi một trang đang tải, bạn nên giả định rằng có nhiều hoạt động luồng chính đang diễn ra hơn, điều này có thể dẫn đến độ trễ tương tác cao hơn. Trong khi tải trang, việc phân tích cú pháp HTML, phân tích cú pháp biểu định kiểu cũng như đánh giá và thực thi JavaScript sẽ diễn ra. Việc biết được một lượt tương tác diễn ra trong lúc tải trang hay sau đó sẽ giúp bạn tìm hiểu xem liệu bạn có cần tối ưu hoá để khởi động nhanh hơn hay không, để các lượt tương tác đó có nhiều không gian hơn trên luồng chính để chạy nhanh hay liệu lượt tương tác chịu trách nhiệm về INP của trang có bị chậm hay không.
• startTime của hoạt động tương tác. Việc ghi lại startTime của lượt tương tác cho bạn biết chính xác thời điểm lượt tương tác đó xảy ra trên tiến trình hiệu suất.
• Loại sự kiện. Bạn nên biết loại sự kiện này, vì loại sự kiện này sẽ cho bạn biết liệu lượt tương tác là kết quả của click, keypress hay loại sự kiện đủ điều kiện khác. Lượt tương tác của người dùng có thể chứa nhiều lệnh gọi lại và có thể giúp bạn xác định chính xác lệnh gọi lại sự kiện nào trong lượt tương tác mất nhiều thời gian nhất để chạy.

Mặc dù có vẻ như có quá nhiều điều cần xem xét, nhưng bạn không cần phải đổi mới vô lăng để đạt được mục tiêu đó. Rất may, dữ liệu này hiển thị trong thư viện JavaScript web-vitals và bạn sẽ tìm hiểu cách thu thập dữ liệu trong phần tiếp theo.

Đo lường các lượt tương tác trong trường bằng thư viện JavaScript web-vitals

Thư viện JavaScript web-vitals là cách tuyệt vời để tìm các tương tác chậm trong trường, nhờ phần lớn vào khả năng cung cấp phân bổ cho nguyên nhân gây ra các tương tác đó. Bạn có thể thu thập INP trong các trình duyệt hỗ trợ Event Timing API và thuộc tính interactionId của API đó.

Sử dụng nhà cung cấp Giám sát người dùng thực (rum) để nhận INP là thuận tiện nhất, nhưng không phải lúc nào cũng là một lựa chọn. Ví dụ: nếu đó là trường hợp của bạn, bạn có thể sử dụng thư viện JavaScript web-vitals để thu thập và truyền dữ liệu INP đến Google Analytics cho mục đích đánh giá sau:

// Be sure to import from the attribution build:
import {onINP} from 'web-vitals/attribution';

function sendToGoogleAnalytics ({name, value, id, attribution}) {
  // Destructure the attribution object:
  const {eventEntry, eventTarget, eventType, loadState} = attribution;

  // Get timings from the event timing entry:
  const {startTime, processingStart, processingEnd, duration, interactionId} = eventEntry;

  const eventParams = {
    // The page's INP value:
    metric_inp_value: value,
    // A unique ID for the page session, which is useful
    // for computing totals when you group by the ID.
    metric_id: id,
    // The event target (a CSS selector string pointing
    // to the element responsible for the interaction):
    metric_inp_event_target: eventTarget,
    // The type of event that triggered the interaction:
    metric_inp_event_type: eventType,
    // Whether the page was loaded when the interaction
    // took place. Useful for identifying startup versus
    // post-load interactions:
    metric_inp_load_state: loadState,
    // The time (in milliseconds) after page load when
    // the interaction took place:
    metric_inp_start_time: startTime,
    // When processing of the event callbacks in the
    // interaction started to run:
    metric_inp_processing_start: processingStart,
    // When processing of the event callbacks in the
    // interaction finished:
    metric_inp_processing_end: processingEnd,
    // The total duration of the interaction. Note: this
    // value is rounded to 8 milliseconds of granularity:
    metric_inp_duration: duration,
    // The interaction ID assigned to the interaction by
    // the Event Timing API. This could be useful in cases
    // where you might want to aggregate related events:
    metric_inp_interaction_id: interactionId
  };

  // Send to Google Analytics
  gtag('event', name, eventParams);
}

// Pass the reporting function to the web-vitals INP reporter:
onINP(sendToGoogleAnalytics);

Nếu có Google Analytics và chạy mã trước đó trên trang web của mình, bạn sẽ nhận được báo cáo chi tiết không chỉ về INP của trang mà còn cả thông tin ngữ cảnh hữu ích có thể giúp bạn hiểu rõ hơn về nơi để bắt đầu tối ưu hoá các lượt tương tác chậm.

Theo dõi toàn bộ thời lượng phiên, không chỉ tối đa onload

Khi bạn sử dụng thư viện JavaScript web-vitals, như đã đề cập trước đó, nhiều sự kiện phân tích có thể được gửi đến Google Analytics. Điều này là bình thường, vì mã mà web-vitals được tạo cho trang hiện tại sẽ không thay đổi và Google Analytics sẽ cho phép bạn ghi đè dữ liệu trước đó.

Tuy nhiên, không phải nhà cung cấp rum nào cũng vận hành theo cách này. Vì vậy, nếu đang xây dựng giải pháp thu thập rum của riêng mình, bạn cần lưu ý điều này. Nếu nhà cung cấp dịch vụ phân tích hiện tại của bạn không cho phép ghi đè các bản ghi hiện có, bạn cần phải ghi lại tất cả các giá trị delta (nghĩa là sự khác biệt giữa trạng thái trước đây và hiện tại của một chỉ số) cho một chỉ số rồi truyền các chỉ số đó bằng cách sử dụng cùng một mã nhận dạng do thư viện web-vitals cung cấp; sau đó, bạn có thể tổng hợp các thay đổi đó bằng cách nhóm theo mã nhận dạng. Để biết thêm thông tin, hãy tham khảo web-vitals phần của tài liệu về cách xử lý các delta.

Nhanh chóng nhận dữ liệu thực địa bằng CrUX

Báo cáo trải nghiệm người dùng trên Chrome (CrUX) là tập dữ liệu chính thức của chương trình Các chỉ số quan trọng về trang web. Mặc dù chỉ riêng dữ liệu CrUX không cung cấp cho bạn tất cả thông tin bạn cần để khắc phục các vấn đề cụ thể về INP, nhưng dữ liệu này sẽ cho bạn biết liệu bạn có gặp vấn đề ngay từ đầu hay không. Ngay cả khi bạn đã thu thập dữ liệu thực địa thông qua một nhà cung cấp rum, hãy cân nhắc việc đối chiếu dữ liệu đó với dữ liệu CrUX cho trang web của bạn (nếu có), vì có những điểm khác biệt trong các phương pháp mà các nhà cung cấp đó sử dụng.

Bạn có thể đánh giá INP của trang web và xem dữ liệu CrUX của trang web bằng PageSpeed Insights (PSI). PageSpeed Insights có thể cung cấp dữ liệu trường ở cấp trang cho các trang web có trong tập dữ liệu CrUX. Để kiểm tra URL bằng PageSpeed Insights, hãy truy cập vào https://pagespeed.web.dev/, nhập URL cần kiểm tra rồi nhấp vào nút Analyze (Phân tích).

Sau khi quá trình đánh giá bắt đầu, dữ liệu CrUX sẽ có ngay khi Lighthouse (một công cụ trong phòng thí nghiệm) chạy.

Khi Lighthouse chạy xong, PSI sẽ điền bài đánh giá vào bài đánh giá bằng Lighthouse.

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

Bạn có thể ở trong trường hợp mà bạn không có hoặc thậm chí không thể thu thập dữ liệu thực tế. Nếu điều này đúng với tình huống của bạn, thì bạn sẽ hoàn toàn phụ thuộc vào các công cụ của phòng thí nghiệm để tìm ra các tương tác có tốc độ chậm. Để biết thêm thông tin về xét nghiệm trong phòng thí nghiệm, hãy đọc bài viết Cách chẩn đoán theo cách thủ công nguyên nhân gây ra INP kém trong phòng thí nghiệm.

Kết luận

Dữ liệu trường là nguồn thông tin tốt nhất mà bạn có thể dựa vào đó để hiểu về tương tác nào có vấn đề đối với người dùng thực trong trường. Bằng cách dựa vào thông tin có trong PageSpeed Insights hoặc dựa vào các công cụ thu thập dữ liệu thực địa, chẳng hạn như thư viện JavaScript web-vitals (hoặc nhà cung cấp rum), bạn có thể tự tin hơn về tương tác nào là có vấn đề nhất và sau đó chuyển sang tái tạo các tương tác có vấn đề trong phòng thí nghiệm rồi tiến hành khắc phục chúng.

Hình ảnh chính từ Unsplash, của Federico Respini.