Tìm hiểu về dữ liệu hiệu suất tải trang (ứng dụng web)

Giám sát hiệu suất sử dụng dấu vết để thu thập dữ liệu về các quy trình được giám sát trong ứng dụng của bạn. Dấu vết là một báo cáo chứa dữ liệu được thu thập giữa hai thời điểm trong ứng dụng của bạn.

Đối với ứng dụng web, Giám sát hiệu suất sẽ tự động thu thập dấu vết cho từng trang trong ứng dụng của bạn được gọi là dấu vết tải trang . Mỗi dấu vết tải trang thu thập các số liệu mặc định sau:

  • lần sơn đầu tiên - Số liệu đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi xảy ra bất kỳ thay đổi trực quan nào

  • lần vẽ nội dung đầu tiên — Một số liệu đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi nội dung có ý nghĩa hiển thị, như hình ảnh hoặc văn bản

  • domInteractive - Số liệu đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi trang được coi là có tính tương tác đối với người dùng

  • domContentLoadedEventEnd - Số liệu đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi tài liệu HTML ban đầu được tải và phân tích cú pháp hoàn toàn

  • LoadEventEnd - Số liệu đo thời gian từ khi người dùng điều hướng đến trang cho đến khi sự kiện tải của tài liệu hiện tại hoàn tất

  • Độ trễ đầu vào đầu tiên - Một số liệu đo thời gian từ khi người dùng tương tác với một trang cho đến khi trình duyệt có thể phản hồi với đầu vào đó

Bạn có thể xem dữ liệu từ những dấu vết này trong tab phụ Tải trang của bảng dấu vết ở cuối Trang tổng quan hiệu suất (tìm hiểu thêm về cách sử dụng bảng điều khiển sau trên trang này).

Định nghĩa dấu vết tải trang

Dấu vết này đo lường một số số liệu về cách tải các trang trong ứng dụng của bạn, cụ thể là mất bao lâu để đạt được các điểm tải thông thường, chẳng hạn như một ứng dụng phản hồi.

Dấu vết tải trang giúp bạn theo dõi các chỉ số quan trọng về web cốt lõi của ứng dụng, chẳng hạn như lần hiển thị nội dung đầu tiên.

Số liệu được thu thập cho dấu vết tải trang

Những dấu vết này là những dấu vết có sẵn nên bạn không thể thêm chỉ số tùy chỉnh hoặc thuộc tính tùy chỉnh vào chúng.

Sơn đầu tiên

Số liệu này đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi xảy ra bất kỳ thay đổi trực quan nào.

Số liệu này hữu ích vì lần vẽ đầu tiên báo hiệu cho người dùng rằng trang đang bắt đầu tải.

  • Bắt đầu khi người dùng điều hướng đến một trang.

  • Dừng khi có bất kỳ thay đổi trực quan nào xảy ra, bao gồm thay đổi màu nền hoặc tải tiêu đề.

Sơn hài lòng đầu tiên

Số liệu này đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi nội dung có ý nghĩa hiển thị, như hình ảnh hoặc văn bản.

Số liệu này hữu ích để cung cấp thông tin chi tiết về thời gian người dùng nhìn thấy bất kỳ nội dung thực tế nào của ứng dụng thay vì chỉ màu nền hoặc tiêu đề mới.

  • Bắt đầu khi người dùng điều hướng đến một trang.

  • Dừng ngay sau khi trình duyệt hiển thị nội dung đầu tiên từ DOM, bao gồm mọi văn bản, hình ảnh (bao gồm cả hình nền), canvas không phải màu trắng hoặc SVG.

domTương tác

Số liệu này đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi trang đó được coi là có tính tương tác đối với người dùng.

Số liệu này hữu ích để cung cấp thông tin chi tiết về khoảng thời gian người dùng thực sự có thể tương tác với các thành phần trong ứng dụng của bạn, như nút và siêu liên kết, thay vì chỉ nhìn thấy chúng trên màn hình. Lưu ý rằng điều này không có nghĩa là trình duyệt sẽ phản hồi tương tác (đối với số liệu này, hãy tham khảo dấu vết độ trễ đầu vào đầu tiên ).

  • Bắt đầu khi người dùng điều hướng đến một trang.

  • Dừng ngay trước khi tác nhân người dùng đặt mức sẵn sàng của tài liệu HTML hiện tại thành "tương tác".

domContentLoadedEventEnd

Số liệu này đo thời gian từ khi người dùng điều hướng đến một trang cho đến khi tài liệu HTML ban đầu được tải và phân tích cú pháp hoàn toàn.

  • Bắt đầu khi người dùng điều hướng đến một trang.

  • Dừng ngay sau khi tài liệu HTML ban đầu được tải và phân tích cú pháp hoàn toàn ( DOMContentLoaded ), nhưng điều này không có nghĩa là các bảng định kiểu, hình ảnh và khung con đã được tải xong.

tảiSự kiệnKết thúc

Số liệu này đo thời gian từ khi người dùng điều hướng đến trang cho đến khi sự kiện tải của tài liệu hiện tại hoàn tất.

Số liệu này hữu ích để hiểu rõ hơn về thời gian tải tất cả nội dung của bạn, bao gồm cả biểu định kiểu và hình ảnh.

  • Bắt đầu khi người dùng điều hướng đến một trang.

  • Dừng ngay sau khi sự kiện tải của tài liệu HTML hiện tại hoàn tất.

Độ trễ đầu vào đầu tiên

Số liệu này đo thời gian từ khi người dùng tương tác với một trang cho đến khi trình duyệt có thể phản hồi với thông tin đầu vào đó.

Số liệu này hữu ích vì trình duyệt phản hồi tương tác của người dùng mang lại cho người dùng ấn tượng đầu tiên về khả năng phản hồi của ứng dụng của bạn.

  • Bắt đầu khi người dùng tương tác lần đầu với một thành phần trên trang, như nhấp vào nút hoặc siêu liên kết.

  • Dừng ngay sau khi trình duyệt có thể phản hồi thông tin đầu vào, nghĩa là trình duyệt không bận tải hoặc phân tích cú pháp nội dung của bạn.

Lưu ý rằng để đo chỉ số độ trễ đầu vào đầu tiên, bạn cần thêm thư viện polyfill cho chỉ số này. Để biết hướng dẫn cài đặt, hãy tham khảo tài liệu của thư viện.

Theo dõi, xem và lọc dữ liệu hiệu suất

Để xem dữ liệu hiệu suất theo thời gian thực, hãy đảm bảo ứng dụng của bạn sử dụng phiên bản SDK giám sát hiệu suất tương thích với quá trình xử lý dữ liệu theo thời gian thực. Tìm hiểu thêm về dữ liệu hiệu suất thời gian thực .

Theo dõi các số liệu chính trong trang tổng quan của bạn

Để tìm hiểu xu hướng của các số liệu chính của bạn, hãy thêm chúng vào bảng số liệu ở đầu Trang tổng quan hiệu suất . Bạn có thể nhanh chóng xác định các hồi quy bằng cách xem các thay đổi hàng tuần hoặc xác minh rằng những thay đổi gần đây trong mã của bạn đang cải thiện hiệu suất.

hình ảnh bảng số liệu trong trang tổng quan Giám sát hiệu suất Firebase

Để thêm chỉ số vào bảng chỉ số của bạn, hãy làm theo các bước sau:

  1. Chuyển đến bảng điều khiển Hiệu suất trong bảng điều khiển Firebase.
  2. Nhấp vào thẻ số liệu trống, sau đó chọn số liệu hiện có để thêm vào bảng của bạn.
  3. Nhấp vào trên thẻ chỉ số đã điền để có thêm tùy chọn, chẳng hạn như thay thế hoặc xóa chỉ số.

Bảng số liệu hiển thị dữ liệu số liệu được thu thập theo thời gian, cả ở dạng đồ họa và dưới dạng thay đổi phần trăm bằng số.

Tìm hiểu thêm về cách sử dụng trang tổng quan .

Xem dấu vết và dữ liệu của họ

Để xem dấu vết của bạn, hãy đi tới Trang tổng quan hiệu suất trong bảng điều khiển Firebase, cuộn xuống bảng dấu vết, sau đó nhấp vào tab phụ thích hợp. Bảng hiển thị một số số liệu hàng đầu cho từng dấu vết và thậm chí bạn có thể sắp xếp danh sách theo phần trăm thay đổi đối với một số liệu cụ thể.

Giám sát hiệu suất cung cấp trang khắc phục sự cố trong bảng điều khiển Firebase làm nổi bật các thay đổi về chỉ số, giúp bạn dễ dàng giải quyết nhanh chóng và giảm thiểu tác động của các vấn đề về hiệu suất đối với ứng dụng và người dùng của bạn. Bạn có thể sử dụng trang khắc phục sự cố khi tìm hiểu về các sự cố tiềm ẩn về hiệu suất, chẳng hạn như trong các trường hợp sau:

  • Bạn chọn các số liệu có liên quan trên trang tổng quan và bạn nhận thấy một vùng đồng bằng lớn.
  • Trong bảng dấu vết, bạn sắp xếp để hiển thị vùng delta lớn nhất ở trên cùng và bạn thấy phần trăm thay đổi đáng kể.
  • Bạn nhận được thông báo qua email thông báo cho bạn về vấn đề hiệu suất.

Bạn có thể truy cập trang xử lý sự cố theo những cách sau:

  • Trên trang tổng quan chỉ số, hãy nhấp vào nút Xem chi tiết chỉ số .
  • Trên bất kỳ thẻ số liệu nào, hãy chọn => Xem chi tiết . Trang khắc phục sự cố hiển thị thông tin về số liệu bạn đã chọn.
  • Trong bảng dấu vết, hãy nhấp vào tên dấu vết hoặc bất kỳ giá trị số liệu nào trong hàng được liên kết với dấu vết đó.
  • Trong thông báo qua email, hãy nhấp vào Điều tra ngay .

Khi bạn nhấp vào tên dấu vết trong bảng dấu vết, bạn có thể xem chi tiết các số liệu quan tâm. Nhấn vào Nút bộ lọc để lọc dữ liệu theo thuộc tính, ví dụ:

hình ảnh dữ liệu Giám sát hiệu suất Firebase đang được lọc theo thuộc tính
  • Lọc theo URL trang để xem dữ liệu cho một trang cụ thể trên trang web của bạn
  • Lọc theo Loại kết nối hiệu quả để tìm hiểu cách kết nối 3g tác động đến ứng dụng của bạn
  • Lọc theo Quốc gia để đảm bảo vị trí cơ sở dữ liệu của bạn không ảnh hưởng đến một khu vực cụ thể

Tìm hiểu thêm về cách xem dữ liệu về dấu vết của bạn .

Bước tiếp theo

  • Tìm hiểu thêm về cách sử dụng thuộc tính để kiểm tra dữ liệu hiệu suất.

  • Tìm hiểu thêm về cách theo dõi các vấn đề về hiệu suất trong bảng điều khiển Firebase.

  • Thiết lập cảnh báo khi tải trang đang làm giảm hiệu suất ứng dụng của bạn. Ví dụ: bạn có thể định cấu hình cảnh báo qua email cho nhóm của mình nếu độ trễ đầu vào đầu tiên cho một trang cụ thể vượt quá ngưỡng bạn đặt.