Performance Monitoring 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, Performance Monitoring tự động thu thập dấu vết cho từng 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 thu thập các chỉ số mặc định sau:
thời gian hiển thị nội dung lớn nhất – Chỉ số đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm xảy ra thay đổi hình ảnh lớn nhất
lượt tương tác đến nội dung hiển thị tiếp theo – Chỉ số đo lường khoảng thời gian dài nhất giữa thời điểm người dùng tương tác với trang và thời điểm xảy ra lượt hiển thị tiếp theo
mức thay đổi bố cục tích luỹ – Chỉ số đo lường và tính điểm cho các thay đổi bố cục không mong muốn trong một trang
hiển thị đầu tiên – Chỉ số đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm xảy ra bất kỳ thay đổi hình ảnh nào
nội dung đầu tiên hiển thị – Chỉ số đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm nội dung có ý nghĩa xuất hiện, 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 giữa thời điểm người dùng chuyển đến một trang và thời điểm trang được coi là có tính tương tác đối với người dùng
domContentLoadedEventEnd – Chỉ số đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm 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 khoảng thời gian giữa thời điểm người dùng chuyển đến trang và thời điểm 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 giữa thời điểm người dùng tương tác với một trang và thời điểm 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 trên 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 của bạn tải, cụ thể là khoảng thời gian cần thiết để đạt đến các điểm tải phổ biến, chẳng hạn như ứ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 trên web của ứng dụng chẳng hạn như thời gian hiển thị 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 các chỉ số tuỳ chỉnh hoặc thuộc tính tuỳ chỉnh khác vào các dấu vết này.
Thời gian hiển thị nội dung lớn nhất
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm nội dung hình ảnh, văn bản hoặc video lớn nhất xuất hiện.
Chỉ số này hữu ích để bạn hiểu được tốc độ hiển thị nội dung chính của trang web cho người dùng.
Bắt đầu khi người dùng chuyển đến một trang.
Dừng khi xảy ra thay đổi hình ảnh lớn nhất, bao gồm cả hình ảnh, văn bản hoặc các phần tử video. Hãy tham khảo các chỉ số quan trọng trên web để biết thêm thông tin chi tiết.
Phần tử nội dung lớn nhất hiển thị" là một thuộc tính tùy chỉnh xác định phần tử tương ứng với nội dung lớn nhất hiển thị. Thuộc tính này được ghi lại ngoài thời gian hiển thị nội dung lớn nhất.
Lượt tương tác đến nội dung hiển thị tiếp theo
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng tương tác với một trang và thời điểm xảy ra lượt hiển thị tiếp theo.
Chỉ số này hữu ích vì nó đo lường mức độ phản hồi của một trang đối với hoạt động đầu vào của người dùng.
Bắt đầu khi người dùng tương tác với trang (nhấp chuột, nhấn vào thiết bị hoặc nhập bằng bàn phím).
Dừng khi xảy ra lượt hiển thị tiếp theo. Hãy tham khảo các chỉ số quan trọng trên web để biết thêm thông tin chi tiết.
"Lượt tương tác dài nhất đến nội dung hiển thị tiếp theo" là một thuộc tính tùy chỉnh xác định phần tử mà người dùng đã tương tác khi sự kiện lượt tương tác đến nội dung hiển thị tiếp theo xảy ra. Thuộc tính này được ghi lại ngoài thời gian lượt tương tác đến nội dung hiển thị tiếp theo.
Mức thay đổi bố cục tích luỹ
Chỉ số này đo lường mức tăng lớn nhất về điểm số thay đổi bố cục cho mọi thay đổi bố cục không mong muốn xảy ra trong toàn bộ vòng đời của trang.
Chỉ số này hữu ích vì các thay đổi bố cục không mong muốn có thể làm gián đoạn trải nghiệm người dùng. Chỉ số này báo cáo điểm số dựa trên API về tính không ổn định của bố cục. Hãy tham khảo các chỉ số quan trọng trên web để biết thêm thông tin chi tiết về cách tính điểm.
"Mục tiêu thay đổi bố cục lớn nhất" là một thuộc tính tùy chỉnh xác định phần tử đã thay đổi khi xảy ra thay đổi nội dung lớn nhất. Thuộc tính này được ghi lại ngoài điểm số tổng hợp về mức thay đổi bố cục.
Hiển thị đầu tiên
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm xảy ra bất kỳ thay đổi hình ảnh nào.
Chỉ số này hữu ích vì lượt hiển thị đầ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 chuyển đến một trang.
Dừng khi xảy ra bất kỳ thay đổi hình ảnh nào, bao gồm cả thay đổi màu nền hoặc tải tiêu đề.
Nội dung đầu tiên hiển thị
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm nội dung có ý nghĩa xuất hiện, chẳng hạn như hình ảnh hoặc văn bản.
Chỉ số này hữu ích để bạn biết được thông tin chi tiết về thời điểm người dùng nhìn 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 kết xuất nội dung đầu tiên từ DOM, bao gồm mọi văn bản, hình ảnh (kể cả hình ả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 giữa thời điểm người dùng chuyển đến một trang và thời điểm trang được coi là có tính tương tác đối với người dùng.
Chỉ số này hữu ích để bạn biết được thông tin chi tiết về thời điểm người dùng thực sự có thể tương tác với các phần tử trong ứng dụng của bạn, chẳng hạ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. Xin lưu ý rằng điều này không có nghĩa là trình duyệt sẽ phản hồi hoạt động tương tác (đối với chỉ số này, hãy tham khảo dấu vết thời gian phản hồi lần tương tác đầ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 khoảng thời gian giữa thời điểm người dùng chuyển đến một trang và thời điểm 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à biểu định kiểu, hình ảnh và khung phụ đã tải xong.
loadEventEnd
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng chuyển đến trang và thời điểm 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 để bạn biết được thông tin chi tiết về khoảng thời gian cần thiết để 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 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.
Thời gian phản hồi lần tương tác đầu tiên
Chỉ số này đo lường khoảng thời gian giữa thời điểm người dùng tương tác với một trang và thời điểm trình duyệt có thể phản hồi hoạt động đầu vào đó.
Chỉ số này hữu ích vì việc trình duyệt phản hồi lượt tương tác của người dùng sẽ 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.
Bắt đầu khi người dùng lần đầu tiên tương tác với một phần tử 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 hoạt động đầ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ố thời gian phản hồi lần tương tác đầ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 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 điểm hồi quy bằng cách xem các thay đổi theo từng tuần 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ấttrong 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 một thẻ chỉ số đã điền để xem thêm các lựa chọn, chẳng hạn như thay thế hoặc xoá một chỉ số.
Bảng chỉ số cho thấy dữ liệu chỉ số được thu thập theo thời gian, cả ở dạng đồ thị 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 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 của 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 từng dấu vết và bạn thậm chí có thể sắp xếp danh sách theo phần trăm thay đổi 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, trong đó nêu bật các thay đổi về chỉ số , giúp bạn dễ dàng nhanh chóng giải quyết 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 một mức chênh lệch lớn.
- Trong bảng dấu vết, bạn sắp xếp để hiển thị các mức chênh lệch lớn nhất ở trên cùng và thấy a phần trăm thay đổi đáng kể.
- Bạn nhận được thông báo qua email cho biết một vấn đề về hiệu suất.
Bạn có thể truy cập vào trang khắc phục sự cố bằng những cách sau:
- Trên trang tổng quan về chỉ số, hãy nhấp vào nút Xem thông tin 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ố 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 đượ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 nhấp vào tên dấu vết trong bảng dấu vết, bạn có thể xem thông tin chi tiết về 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 đ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 tác động của kết nối 3g đối với ứ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á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 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. 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 thời gian phản hồi lần tương tác đầu tiên cho một trang cụ thể vượt quá ngưỡng mà bạn đặt.