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

Tính năng 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 thu thập giữa hai thời điểm trong một khoảng thời gian trong ứng dụng của bạn.

Đối với các ứng dụng web, tính năng Giám sát hiệu suất tự động thu thập dấu vết cho mỗi trang của ứng dụng có tên 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 đây:

  • lần hiển thị đầu tiên – Chỉ số đo thời gian giữa khi người dùng chuyển đến một trang và khi bất kỳ thay đổi nào diễn ra trong hình ảnh

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

  • domtương tác — Chỉ số đo thời gian giữa khi người dùng truy cập vào một trang và khi trang đó được coi là có tính tương tác cho người dùng

  • domContentLoadedEventEnd – Một chỉ số đo lường thời gian tính từ khi người dùng điều hướng đến một trang cho đến khi HTML ban đầu tài liệ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 kể từ khi người dùng chuyển đến trang và khi sự kiện tải của tài liệu hiện tại hoàn thành

  • độ trễ đầu vào lần đầu – Chỉ số đ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 thẻ phụ Tải trang của thẻ bảng dấu vết nằm ở 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 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à mất bao lâu để đạt đến điểm tải chung, chẳng hạn như ứng dụng thích ứng của bạn.

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ư hiển thị nội dung.

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 có sẵn, vì vậy, bạn không thể thêm chỉ số tùy chỉnh hoặc thuộc tính tuỳ chỉnh cho chúng.

Hiển thị đầu tiên

Chỉ số này đo lường khoảng thời gian từ khi người dùng truy cập vào một trang cho đến khi bất kỳ thay đổi trực quan nào xảy ra.

Chỉ số này rất hữu ích vì lần hiển thị đầu tiên báo hiệu 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 hình ảnh nào diễn ra, bao gồm cả việc thay đổi màu nền hoặc đang 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 từ khi người dùng truy cập vào một trang cho đến khi hiển thị nội dung có ý nghĩa, như hình ảnh hoặc văn bản.

Chỉ số này rất hữu ích khi bạn muốn biết thông tin chi tiết về việc người dùng sẽ sớm nhìn thấy bất kỳ nội dung thực tế của ứng dụng thay vì chỉ một 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 bất kỳ văn bản, hình ảnh nào (bao gồm cả hình nền), canvas không phải màu trắng, hoặc SVG (Đồ hoạ vectơ có thể mở rộng).

domtương tác

Chỉ số này đo lường khoảng thời gian từ khi người dùng truy cập vào một trang cho đến khi trang được coi là có tính tương tác đối với người dùng.

Chỉ số này rất hữu ích trong việc cung cấp thông tin chi tiết về việc người dùng sẽ sớm có thể tương tác với các thành phần trong ứng dụng (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 chỉ số này, hãy tham khảo dấu vết độ trễ đầu vào lần đầu).

  • 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 thuộc tính sẵn sàng "tương tác".

domContentLoadedEventEnd

Chỉ số này đo lường khoảng thời gian từ khi người dùng truy cập vào 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 chỉnh.

  • 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 hoàn toàn và được phân tích cú pháp (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.

Kết thúc sự kiện tải

Chỉ số này đo lường khoảng thời gian từ khi người dùng truy cập vào trang đến khi khi sự kiện tải của tài liệu hiện tại hoàn tất.

Chỉ số này rất hữu ích khi bạn muốn biết thông tin chi tiết về thời gian cần để tải tất cả nội dung, bao gồm 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.

Độ trễ của lần nhập đầu tiên

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 trình duyệt có thể phản hồi thông tin đầu vào đó.

Chỉ số này rất hữu ích vì trình duyệt sẽ phản hồi tương tác của người dùng ấn tượng đầu tiên của họ về khả năng phản hồi của ứng dụng.

  • Bắt đầu khi người dùng tương tác lần đầu tiên với một phần tử trên trang, chẳng hạn như việc 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 nội dung nhập, 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 chỉ số độ trễ đầu vào đầu tiên, bạn cần thêm tệp polyfill thư viện cho chỉ số này. Để biết hướng dẫn cài đặt, hãy tham khảo tài liệu.

Theo dõi, xem và lọc dữ liệu hiệu suất

Để xem dữ liệu về 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 một biểu đồ Hiệu suất Giám sát phiên bản SDK tương thích với hoạt độ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 số lần hồi quy bằng cách xem theo từng tuần các thay đổi 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.

hình ảnh bảng chỉ số trong trang tổng quan của 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:

  1. Chuyển đến Trang tổng quan về Hiệu suất trong bảng điều khiển của Firebase.
  2. 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.
  3. Nhấp chuột trên thẻ chỉ số được điền sẵn để có thêm tùy chọn, chẳng hạn như để thay thế hoặc loại bỏ một 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 biểu đồ và dưới dạng phần trăm thay đổi về 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 chúng

Để xem dấu vết của bạn, hãy chuyển đến Trang tổng quan về Hiệu suất trong bảng điều khiển của Firebase, hãy di chuyển xuống bảng dấu vết, sau đó nhấp vào tab 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à 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ể.

Tính năng 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 của Firebase, trong đó nêu bật chỉ số giúp bạn dễ dà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 đề về hiệu suất 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 có sự chênh lệch 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 thông báo 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 thẻ chỉ số bất kỳ, hãy chọn => Xem chi tiết. Trang khắc phục sự cố 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 đó 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 chi tiết về các chỉ số mối quan tâm. Nhấp vào Nút Lọc để lọc dữ liệu theo thuộc tính, ví dụ:

hình ảnh dữ liệu của tính năng 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 xem kết nối 3g ảnh hưởng như thế nào đến bạn ứng dụng
  • 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 quốc gia cụ thể vùng

Tìm hiểu thêm về xem dữ liệu cho dấu vết của bạn.

Các bước tiếp theo

  • Tìm hiểu thêm về bằ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 của Firebase.

  • Thiết lập cảnh báo cho những lượt tải trang đang giảm hiệu suất của ứng dụng. Ví dụ: bạn có thể định cấu hình một cảnh báo qua email cho nhóm của bạn nếu độ trễ nhập đầu tiên cho một trang cụ thể vượt quá ngưỡng mà bạn đã đặt.