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:
thời gian hiển thị nội dung lớn nhất – Một chỉ số đo lường thời gian từ khi người dùng chuyển đến một trang đến khi xảy ra thay đổi hình ảnh lớn nhất
lượt tương tác đến lần vẽ tiếp theo – Chỉ số đo lường thời gian dài nhất từ khi người dùng tương tác với trang đến khi lần vẽ tiếp theo xảy ra
mức thay đổi bố cục tích luỹ – Chỉ số đo lường và tính điểm các thay đổi bố cục không mong muốn trong một trang
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 đế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 – Một 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, 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 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 từ khi người dùng chuyển đến một trang đến khi nội dung hình ảnh, văn bản hoặc video lớn nhất hiển thị.
Chỉ số này hữu ích để biết tốc độ người dùng nhìn thấy nội dung chính của trang web.
Bắt đầu khi người dùng chuyển đến một trang.
Dừng khi có thay đổi lớn nhất về hình ảnh, bao gồm cả các thành phần hình ảnh, văn bản hoặc video. Hãy tham khảo các chỉ số cốt lõi của web để biết thêm thông tin chi tiết.
"Thành phần sơn nội dung lớn nhất" là một thuộc tính tuỳ chỉnh xác định phần tử tương ứng với thành phần sơn nội dung lớn nhất. Thông tin này được ghi lại ngoài thời gian vẽ nội dung lớn nhất.
Lượt tương tác đến lần vẽ tiếp theo
Chỉ số này đ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 xảy ra lần vẽ tiếp theo.
Chỉ số này rất hữu ích vì đo lường khả năng phản hồi của 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 quá trình vẽ tiếp theo xảy ra. Hãy tham khảo các chỉ số cốt lõi của web để biết thêm thông tin chi tiết.
"Lượt tương tác dài nhất đến lần vẽ tiếp theo" là một thuộc tính tuỳ chỉnh xác định phần tử mà người dùng đã tương tác khi sự kiện tương tác đến lần vẽ tiếp theo xảy ra. Thông tin này được ghi lại ngoài thời gian tương tác với lần vẽ tiếp theo.
Mức thay đổi bố cục tích luỹ
Chỉ số này đo lường chuỗi điểm số về mức thay đổi bố cục lớn nhất cho mọi lượt 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 rất 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 của người dùng. Chỉ số này báo cáo điểm số dựa trên Layout Instability API (API về độ không ổn định của bố cục). Hãy tham khảo các chỉ số quan trọng chính của trang web để biết thêm thông tin chi tiết về cách tính điểm số.
"Mục tiêu thay đổi bố cục lớn nhất" là một thuộc tính tuỳ chỉnh xác định phần tử đã thay đổi khi xảy ra sự thay đổi nội dung lớn nhất. Thông tin này được ghi lại ngoài điểm số thay đổi bố cục tích luỹ.
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 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 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 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 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ì trình duyệt phản hồi lượt tương tác của người dùng sẽ tạo 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 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 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 mức thay đổi theo tỷ lệ phần trăm dạ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 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ủa bạn.
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.