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 ghi lại giữa hai thời điểm trong ứng dụng của bạn.
Đối với các ứng dụng web, Giám sát hiệu suất tự động thu thập một 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 chỉ số mặc định sau:
lần sơn đầu tiên — Một số liệu đo thời gian giữa khi người dùng điều hướng đến một trang và khi có bất kỳ thay đổi trực quan nào xảy ra
sơn nội dung đầu tiên — Một số liệu đo thời gian giữa khi người dùng điều hướng đến một trang và khi nội dung có ý nghĩa hiển thị, như hình ảnh hoặc văn bản
domInteractive — Một số liệu đo thời gian giữa khi người dùng điều hướng đến một trang và khi trang được coi là tương tác đối với người dùng
domContentLoadedEventEnd — Một số liệu đo thời gian giữa khi người dùng điều hướng đến một trang và khi tài liệu HTML ban đầu được tải và phân tích cú pháp hoàn chỉnh
loadEventEnd — Một số liệu đo thời gian giữa khi người dùng điều hướng đến trang và 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 giữa khi người dùng tương tác với một trang và khi trình duyệt có thể phản hồi đầu vào đó
Bạn có thể xem dữ liệu từ các dấu vết này trong tab phụ Tải trang của bảng theo dõi , ở cuối bảng điều khiển 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 theo dõi tải trang
Dấu vết này đo lường một số chỉ số về cách các trang trong ứng dụng của bạn tải, cụ thể là mất bao lâu để đạt đến các điểm tải phổ biến, chẳng hạn như một ứng dụng đáp ứng.
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ư bức tranh 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à dấu vết sẵn dùng, vì vậy 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 giữa khi người dùng điều hướng đến một trang và khi bất kỳ thay đổi trực quan nào xảy ra.
Số liệu này hữu ích vì lần sơn đầu tiên báo hiệu cho người dùng của bạn 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 giữa khi người dùng điều hướng đến một trang và khi nội dung có ý nghĩa hiển thị, chẳng hạn như hình ảnh hoặc văn bản.
Số liệu này hữu ích cho thông tin chi tiết về khoảng thời gian người dùng của bạn nhìn thấy bất kỳ nội dung thực tế nào trong ứng dụng của bạn thay vì chỉ một 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 bất kỳ văn bản, hình ảnh nào (kể cả hình nền), canvas không phải màu trắng hoặc SVG.
dominteractive
Số liệu này đo thời gian giữa khi người dùng điều hướng đến một trang và khi trang được coi là tương tác đối với người dùng.
Số liệu này hữu ích cho 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, chẳng hạn như các 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 lập tức 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 giữa khi người dùng điều hướng đến một trang và khi tài liệu HTML ban đầu được tải và phân tích cú pháp hoàn chỉnh.
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 biểu định kiểu, hình ảnh và khung con đã tải xong.
tảiEventEnd
Số liệu này đo thời gian giữa khi người dùng điều hướng đến trang và 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 để biết thông tin chi tiết 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 giữa khi người dùng tương tác với một trang và khi trình duyệt có thể phản hồi đầ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 của bạn ấ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 phần tử trên trang, chẳng hạn 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 đầu vào, nghĩa là trình duyệt không bận tải hoặc phân tích 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 rằng ứ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 bảng điều khiển của bạn
Để tìm hiểu xem các chỉ số chính của bạn đang có xu hướng như thế nào, hãy thêm chúng vào bảng chỉ số của bạn ở đầu Bảng điều khiển hiệu suất . Bạn có thể nhanh chóng xác định 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.
Để thêm một chỉ số vào bảng chỉ số của bạn, hãy làm theo các bước sau:
- Chuyển đến bảng điều khiển Hiệu suất trong bảng điều khiển Firebase.
- Nhấp vào một thẻ chỉ số trống, sau đó chọn một chỉ số hiện có để thêm vào bảng của bạn.
- 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 chỉ số hiển thị dữ liệu chỉ số được thu thập theo thời gian, cả ở dạng đồ họa và dưới dạng phần trăm thay đổi bằng số.
Tìm hiểu thêm về cách sử dụng bảng điều khiển .
Xem dấu vết và dữ liệu của họ
Để xem dấu vết của bạn, hãy chuyển đến Bảng điều khiển 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ố chỉ số 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 cho một chỉ số cụ thể.
Giám sát hiệu suất cung cấp một 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 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 vấn đề 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 bảng điều khiển và bạn nhận thấy một đồng bằng lớn.
- Trong bảng theo dõi, bạn sắp xếp để hiển thị vùng đồng bằng lớn nhất ở trên cùng và bạn sẽ 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 khắc phục sự cố theo các cách sau:
- Trên bảng điều khiển số liệu, nhấp vào nút Xem chi tiết số liệu .
- 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ề chỉ số bạn đã chọn.
- Trong bảng theo dõi, hãy nhấp vào tên theo dõi hoặc bất kỳ giá trị chỉ số nào trong hàng được liên kết với dấu vết đó.
- Trong một cảnh báo qua email, hãy nhấp vào Điều tra ngay bây giờ .
Khi bạn nhấp vào một tên theo dõi trong bảng theo dõi, khi đó bạn có thể đi sâu vào các số liệu quan tâm. Nhấn nút bộ lọc để lọc dữ liệu theo thuộc tính, ví dụ:
- 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 cho 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 cho các lượt tải trang đang làm giảm hiệu suất của ứ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 mà bạn đã đặt.