Performance Monitoring sử dụng dấu vết để thu thập dữ liệu về các quy trình được theo dõi trong ứng dụng. 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.
Đối với ứng dụng web, Performance Monitoring tự động thu thập dấu vết cho mỗi trang của ứng dụng, được gọi là dấu vết tải trang. Mỗi dấu vết tải trang sẽ thu thập các chỉ số mặc định sau:
lần hiển thị đầu tiên – Chỉ số đo lường thời gian từ khi người dùng chuyển đến một trang cho đến khi bất kỳ thay đổi nào về hình ảnh xảy ra
hiển thị nội dung đầu tiên – Một chỉ số đo lường thời gian từ khi người dùng chuyển đến một trang cho đến khi nội dung có ý nghĩa hiển thị, chẳng hạn như hình ảnh hoặc văn bản
domInteractive – Chỉ số đo lường khoảng thời gian từ khi người dùng chuyển đế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 – Một chỉ số đo lường thời gian từ khi người dùng chuyển đế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 – Chỉ số đo lường thời gian từ lúc người dùng chuyển đến trang đến lúc sự kiện tải của tài liệu hiện tại hoàn tất
thời gian phản hồi lần tương tác đầu tiên – Chỉ số đo lường khoảng thời gian từ khi người dùng tương tác với một trang đến khi trình duyệt có thể phản hồi hoạt động đầu vào đó
Bạn có thể xem dữ liệu từ các dấu vết này trong thẻ 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 ở phần sau của trang này).
Định nghĩa về dấu vết 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 tải, cụ thể là thời gian cần thiết để đạt đến các điểm tải phổ biến, chẳng hạn như một ứng dụng thích ứng.
Dấu vết tải trang giúp bạn theo dõi các chỉ số quan trọng chính của trang web của ứng dụng, chẳng hạn như lượt vẽ nội dung đầu tiên.
Các chỉ số được thu thập cho dấu vết tải trang
Đây là các dấu vết có sẵn, vì vậy, bạn không thể thêm chỉ số tuỳ chỉnh hoặc thuộc tính tuỳ chỉnh vào các dấu vết này.
Hiển thị đầu tiên
Chỉ số này đo lường khoảng thời gian từ khi người dùng chuyển đến một trang đến khi bất kỳ thay đổi nào về hình ảnh xảy ra.
Chỉ số này rất hữu ích vì lượt vẽ đầu tiên cho người dùng biết rằng trang đang bắt đầu tải.
Bắt đầu khi người dùng chuyển đến một trang.
Dừng khi bất kỳ thay đổi nào về hình ảnh xảy ra, bao gồm cả thay đổi màu nền hoặc tải tiêu đề.
Hiển thị nội dung đầu tiên
Chỉ số này đo lường khoảng thời gian từ khi người dùng chuyển đến một trang đến khi nội dung có ý nghĩa hiển thị, chẳng hạn như hình ảnh hoặc văn bản.
Chỉ số này hữu ích cho thông tin chi tiết về thời gian người dùng thấy nội dung thực tế của ứng dụng thay vì chỉ thấy màu nền hoặc tiêu đề mới.
Bắt đầu khi người dùng chuyển đế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.
domInteractive
Chỉ số này đo lường khoảng thời gian từ khi người dùng chuyển đến một trang đến khi trang được coi là có thể tương tác với người dùng.
Chỉ số này hữu ích cho thông tin chi tiết về thời gian người dùng thực sự có thể tương tác với các phần tử trong ứng dụng, chẳng hạn như nút và đường liên kết siêu văn bản, thay vì chỉ nhìn thấy các phần tử đó trên màn hình. Xin 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 chỉ số 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 chuyển đến một trang.
Dừng ngay trước khi tác nhân người dùng đặt trạng thái sẵn sàng của tài liệu HTML hiện tại thành "tương tác".
domContentLoadedEventEnd
Chỉ số này đo lường thời gian từ khi người dùng điều hướng đến một trang đế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 chuyển đế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 phụ đã tải xong.
loadEventEnd
Chỉ số này đo lường thời gian từ khi người dùng chuyển đến trang đến khi sự kiện tải của tài liệu hiện tại hoàn tất.
Chỉ số này hữu ích cho thông tin chi tiết về thời gian tải tất cả nội dung, bao gồm cả các tệp kiểu và hình ảnh.
Bắt đầu khi người dùng chuyển đế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
Chỉ số này đo lường 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 hoạt động đầu vào đó.
Chỉ số này rất hữu ích vì việc trình duyệt phản hồi một lượt tương tác của người dùng sẽ giúp người dùng có ấn tượng ban đầu về khả năng phản hồi của ứng dụng.
Bắt đầu khi người dùng lần đầu tương tác với một thành phần trên trang, chẳng hạn như nhấp vào một 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 dữ liệu đầ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.
Xin lưu ý rằng để đo lường 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 tính năng 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 theo thời gian thực.
Theo dõi các chỉ số chính trong trang tổng quan
Để tìm hiểu xu hướng của các chỉ số chính, hãy thêm các chỉ số đó vào bảng chỉ số ở đầu trang tổng quan Hiệu suất. Bạn có thể nhanh chóng xác định các lần hồi quy bằng cách xem các thay đổi từ tuần này sang tuần khác hoặc xác minh rằng các thay đổi gần đây trong mã của bạn đang cải thiện hiệu suất.
Trang tổng quan về tính năng Giám sát hiệu suất Firebase" />
Để thêm một chỉ số vào bảng chỉ số, hãy làm theo các bước sau:
- Chuyển đến trang tổng quan 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 điều khiển.
- Nhấp vào biểu tượng trên thẻ chỉ số đã điền sẵn để xem thêm các tuỳ chọn, chẳng hạn như thay thế hoặc xoá chỉ số.
Bảng chỉ số cho thấy dữ liệu chỉ số đã thu thập theo thời gian, cả ở dạng đồ hoạ và dưới dạng tỷ lệ phần trăm 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 dấu vết
Để xem dấu vết, hãy chuyển đến trang tổng quan Hiệu suất trong bảng điều khiển Firebase, di chuyển xuống bảng dấu vết, sau đó nhấp vào thẻ phụ thích hợp. Bảng này hiển thị một số chỉ số hàng đầu cho mỗi dấu vết và bạn thậm chí có thể sắp xếp danh sách theo mức thay đổi theo tỷ lệ phần trăm cho một chỉ số cụ thể.
Performance Monitoring cung cấp một trang khắc phục sự cố trong bảng điều khiển Firebase, nêu 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. 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 chỉ số có liên quan trên trang tổng quan và nhận thấy sự khác biệt lớn.
- Trong bảng dấu vết, bạn sắp xếp để hiển thị các delta lớn nhất ở trên cùng và bạn sẽ thấy một tỷ lệ phần trăm thay đổi đáng kể.
- Bạn nhận được email cảnh báo về vấn đề về hiệu suất.
Bạn có thể truy cập vào trang khắc phục sự cố theo các cách sau:
- Trên trang tổng quan về chỉ số, hãy nhấp vào nút Xem chi tiết về chỉ số.
- Trên bất kỳ thẻ chỉ số nào, hãy chọn
=> Xem chi tiết . Trang khắc phục sự cố sẽ hiển thị thông tin về chỉ số mà 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ị chỉ số nào trong hàng liên kết với dấu vết đó.
- Trong cảnh báo qua email, hãy nhấp vào Kiểm tra ngay.
Khi 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 chỉ số mà bạn quan tâm. Nhấp vào nút
Dữ liệu Giám sát hiệu suất Firebase đượ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 mức độ ảnh hưởng của kết nối 3G đế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 các dấu vết.
Các 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 thông báo cho các lượt tải trang làm giảm hiệu suất của ứng dụng. Ví dụ: bạn có thể định cấu hình thông 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.