Check out what’s new from Firebase at Google I/O 2022. Learn more

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

Hiệu suất giám sát sử dụng các dấu vết để dữ liệu thu thập về các quá trình theo dõi trong ứng dụng của bạn. Một dấu vết là một báo cáo có chứa dữ liệu bị bắt giữa hai điểm trong thời gian trong ứng dụng của bạn.

Đối với các ứng dụng web, Hiệu suất giám sát tự động thu thập một dấu vết cho mỗi trang của ứng dụng của bạn được gọi là một 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 đây:

  • sơn đầu tiên - Một số liệu rằng các biện pháp thời gian giữa khi điều hướng người dùng đến một trang và khi bất kỳ sự thay đổi thị giác xảy ra

  • đầu tiên contentful sơn - Một số liệu rằng các biện pháp thời gian giữa khi một điều hướng người dùng đến một trang và khi có ý nghĩa hiển thị nội dung, như một hình ảnh hoặc văn bản

  • DOMInteractive - Một số liệu rằng các biện pháp thời gian giữa khi điều hướng người dùng đến một trang và khi trang được coi là tương tác cho người sử dụng

  • domContentLoadedEventEnd - Một số liệu rằng các biện pháp thời gian giữa khi điều hướng người dùng đến một trang và khi tài liệu HTML ban đầu là hoàn toàn nạp và phân tích cú pháp

  • loadEventEnd - Một số liệu rằng các biện pháp thời gian giữa khi điều hướng người dùng đến trang và khi tài liệu hiện tại của Hoàn thành sự kiện tải

  • chậm trễ đầu vào đầu tiên - Một số liệu rằng các biện pháp thời gian giữa khi tương tác người dùng với một trang và khi trình duyệt có khả năng đáp ứng với đầu vào

Bạn có thể xem dữ liệu từ những dấu vết trong tải trang tab phụ của bảng dấu vết, mà là ở dưới cùng của bảng điều khiển Performance (tìm hiểu thêm về cách sử dụng giao diện điều khiển sau đó trên trang này).

Định nghĩa của một dấu vết tải trang

dấu vết này đo lường một vài số liệu về cách thức trang trong tải ứng dụng của bạn, phải mất bao lâu đặc biệt để đạt được điểm tải thông thường, giống như một ứng dụng đáp ứng.

Dấu vết trang tải giúp bạn theo dõi ứng dụng của bạn vitals web lõi , như sơn contentful đầu tiên.

Metrics thu thập cho vết tải trang

Những dấu vết là out-of-the-box dấu vết, vì vậy bạn không thể thêm chỉ số tùy chỉnh hoặc các thuộc tính tùy chỉnh đối với họ.

sơn đầu tiên

Số liệu này các biện pháp thời gian giữa khi người dùng điều hướng đến một trang và khi bất kỳ sự thay đổi thị giác xảy ra.

Số liệu này là hữu ích vì các tín hiệu sơn đầu tiên cho người dùng rằng trang này đang bắt đầu tải.

  • Bắt đầu khi điều hướng người dùng đến một trang.

  • Dừng lại khi sự thay đổi hình ảnh xảy ra, trong đó có một nền thay đổi màu hoặc có bốc thêm tiêu đề.

sơn contentful đầu tiên

Số liệu này các biện pháp thời gian giữa khi người dùng điều hướng đến một trang và khi hiển thị nội dung có ý nghĩa, như một hình ảnh hoặc văn bản.

Số liệu này rất hữu ích cho hiểu thấu đáo cách sớm người dùng của bạn thấy bất kỳ nội dung thực tế của ứng dụng của bạn chứ không phải chỉ là một màu nền mới hoặc tiêu đề.

  • Bắt đầu khi điều hướng người dùng đến một trang.

  • Dừng ngay lập tức sau khi trình duyệt làm cho nội dung đầu tiên từ DOM, bao gồm bất kỳ văn bản, hình ảnh (bao gồm hình ảnh nền), không phải da trắng vải, hoặc SVG.

DOMInteractive

Số liệu này các biện pháp thời gian giữa khi người dùng điều hướng đến một trang và khi trang được coi là tương tác cho người dùng.

Số liệu này rất hữu ích cho hiểu thấu đáo cách sớm người dùng của bạn có thể thực sự tương tác với các yếu tố trong ứng dụng của bạn, giống như các nút và các 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ẽ đáp ứng với sự tương tác (đối với số liệu này, hãy tham khảo đầu tiên đầu vào chậm trễ dấu vết ).

  • Bắt đầu khi điều hướng người dùng đến một trang.

  • Dừng ngay trước user agent đặt sẵn sàng tài liệu HTML của hiện tại để "tương tác".

domContentLoadedEventEnd

Số liệu này các biện pháp thời gian giữa khi điều hướng người dùng đến một trang và khi tài liệu HTML ban đầu là hoàn toàn nạp và phân tích cú pháp.

  • Bắt đầu khi điều hướng người dùng đến một trang.

  • Dừng ngay sau khi tài liệu HTML ban đầu là hoàn toàn nạp và phân tích cú pháp ( DOMContentLoaded ), nhưng điều này không có nghĩa là stylesheets, hình ảnh, và khung phụ được tải xong.

loadEventEnd

Số liệu này các biện pháp thời gian giữa khi người dùng điều hướng tới trang và khi Hoàn thành sự kiện tải các tài liệu hiện hành.

Số liệu này rất hữu ích cho cái nhìn sâu vào phải mất bao lâu để tải tất cả nội dung của bạn, bao gồm stylesheets và hình ảnh.

  • Bắt đầu khi điều hướng người dùng đến một trang.

  • Dừng ngay sau khi Hoàn thành sự kiện tải tài liệu HTML của hiện tại.

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

Số liệu này các biện pháp thời gian giữa khi tương tác người dùng với một trang và khi trình duyệt có khả năng đáp ứng với đầu vào đó.

Số liệu này là hữu ích vì các trình duyệt đối phó với một tương tác người dùng cung cấp cho người dùng của bạn ấn tượng đầu tiên của họ về tính hiệu quả của ứng dụng của bạn.

  • Bắt đầu khi người dùng tương tác đầu tiên với một yếu tố trên trang web, giống như nhấp chuột vào một nút hoặc liên kết.

  • Dừng ngay lập tức sau khi trình duyệt có khả năng đáp ứng với đầu vào, có nghĩa là trình duyệt không phải là bận rộn tải hoặc phân tích nội dung của bạn.

Lưu ý rằng để đo lường sự chậm trễ đầu vào đầu tiên số liệu, bạn cần phải thêm thư viện polyfill cho chỉ số này. Để được hướng dẫn cài đặt, hãy tham khảo của thư viện tài liệu .

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

Để xem dữ liệu hiệu suất theo thời gian thực, đảm bảo rằng ứng dụng của bạn sử dụng một hiệu suất giám sát phiên bản SDK tương thích với 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 số liệu quan trọng trong bảng điều khiển của bạn

Để tìm hiểu cách số liệu chính của bạn đang có xu hướng, thêm chúng vào bảng số liệu của bạn ở phía trên cùng của bảng điều khiển hiệu suất . Bạn có thể nhanh chóng xác định hồi quy bằng cách nhìn thấy những thay đổi trong tuần-over-tuần hoặc xác minh rằng những thay đổi gần đây trong mã của bạn được cải thiện hiệu suất.

một hình ảnh của hội đồng quản trị số liệu trong bảng điều khiển căn cứ hỏa lực Hiệu suất giám sát

Để thêm một thước đo để hội đồng quản trị số liệu của bạn, folloe các bước sau:

  1. Đi đến bảng điều khiển hiệu suất trong giao diện điều khiển căn cứ hỏa lực
  2. Nhấp vào tab Bảng điều khiển
  3. Nhấn vào một thẻ metric trống rỗng, sau đó chọn một số liệu hiện có để thêm vào bảng của bạn
  4. Nhấn trên thẻ số liệu dân cư cho các tùy chọn hơn, ví dụ để thay thế hoặc loại bỏ một thước đo.

Các số liệu ban chương trình thu thập dữ liệu số liệu theo thời gian, cả về hình thức đồ họa và như là một phần trăm thay đổi số.

Tìm hiểu thêm về cách sử dụng bảng điều khiển .

Xem dấu vết và dữ liệu của họ

Để xem dấu vết của bạn, đi đến bảng điều khiển hiệu suất trong căn cứ hỏa lực điều khiển, di chuyể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ố số liệu 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 bằng phần trăm thay đổi cho một số liệu cụ thể.

Nếu bạn nhấp vào một tên dấu vết trong bảng dấu vết, sau đó bạn có thể nhấp qua màn hình khác nhau để khám phá những dấu vết và đi sâu vào các số liệu quan tâm. Trên hầu hết các trang, bạn có thể sử dụng bộ lọc nút (trên cùng bên trái của màn hình) để lọc dữ liệu bằng thuộc tính, ví dụ:

một hình ảnh của căn cứ hỏa lực Hiệu suất giám sát dữ liệu được lọc bởi thuộc tính
  • Lọc theo URL của trang để xem dữ liệu cho một trang cụ thể của trang web của bạn
  • Lọc theo loại kết nối hiệu quả để học cách kết nối 3g tác động ứ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ề xem dữ liệu cho các 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ề làm thế nào để theo dõi vấn đề hiệu suất trong căn cứ hỏa lực console.

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