Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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 ứng dụng web, Giám sát hiệu suất tự động thu thập một dấu vết cho mỗi 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 - Chỉ số đo thời gian từ khi người dùng điều hướng đến một trang đến khi bất kỳ thay đổi hình ảnh nào xảy ra

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

  • domInteractive - Chỉ số đo thời gian từ khi người dùng điều hướng đến một trang đến khi trang được coi là tương tác đối với người dùng

  • domContentLoadedEventEnd - Một chỉ số đo 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

  • loadEventEnd - Chỉ số đo thời gian từ khi người dùng điều hướng đến trang đế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 - Chỉ số đo 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 lại thông tin đầ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 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ố 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 được các điểm tải thông thường, 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 quan trọng web cốt lõi của ứng dụng, như bức vẽ nội dung đầu tiên.

Các chỉ số được thu thập cho dấu vết tải trang

Các dấu vết này là dấu vết ngoài hộp, vì vậy bạn không thể thêm số liệu tùy chỉnh hoặc thuộc tính tùy chỉnh vào chúng.

Sơn đầu tiên

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

Số liệu này hữu ích vì màu 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 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 nội dung đầu tiên

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

Chỉ số này hữu ích để hiểu rõ hơn về 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 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 thời gian từ khi người dùng điều hướng đến một trang đến khi trang được coi là tương tác đối với người dùng.

Chỉ số này hữu ích để hiểu rõ hơn về việc người dùng của bạn có thể thực sự tương tác với các phần tử trong ứng dụng của bạn sớm như thế nào, 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 lạ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

Chỉ số này đo 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 đ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.

loadEventEnd

Chỉ số này đo thời gian từ khi người dùng điều hướng đến trang đế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.

Đầu vào đầu tiên chậm trễ

Chỉ số này đo 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 lại thông tin đầu vào đó.

Chỉ số 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 nhữ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 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 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, có 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 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 xử lý dữ liệu 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 chỉ số chính trong trang tổng quan của bạn

Để tìm hiểu xu hướng của các chỉ số chính của bạn, hãy thêm chúng vào bảng chỉ số của bạn ở đầ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 các thay đổi gần đây trong mã của bạn đang cải thiện hiệu suất.

hình ảnh của bảng chỉ số 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ố đã phổ biến để có thêm tùy chọn, chẳng hạn như để thay thế hoặc xóa một số liệu.

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 số phần trăm thay đổi.

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 chúng

Để 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 mỗi dấu vết và bạn thậm chí có thể sắp xếp danh sách theo tỷ lệ phần trăm thay đổi cho 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, trang này 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 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 đề hiệu suất tiềm ẩn, 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à 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ị các delta lớn nhất ở trên cùng và bạn thấy một tỷ lệ phần trăm thay đổi đáng kể.
  • Bạn nhận được một email thông báo cho bạn về sự cố hiệu suất.

Bạn có thể truy cập trang khắc phục sự cố theo những cách sau:

  • Trên trang tổng quan chỉ số, nhấp vào nút Xem chi tiết số liệu .
  • 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ố 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 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 tên dấu vết trong bảng dấu vết, sau đó bạn có thể đi sâu vào các chỉ số quan tâm. Nhấp 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 ảnh hưở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 các 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 những lần 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.