Sử dụng bảng điều khiển Thông tin chi tiết về hiệu suất để nhận thông tin chi tiết hữu ích và dựa trên trường hợp sử dụng về hiệu suất của trang web.
Tổng quan
Bảng điều khiển Thông tin chi tiết về hiệu suất cho phép bạn làm những việc sau:
- Ghi lại và đo lường hiệu suất tải trang.
- Xem các chỉ số hiệu suất của Web Vitals.
- Xem hoạt động mạng.
- Mô phỏng tốc độ CPU và mạng chậm hơn.
- Nhập và xuất bản ghi.
Tại sao lại có một bảng điều khiển mới?
Bảng điều khiển Thông tin chi tiết về hiệu suất mới là một thử nghiệm nhằm giải quyết 3 vấn đề nan giải sau đây của nhà phát triển khi làm việc với bảng điều khiển Hiệu suất hiện có:
- Quá nhiều thông tin. Với giao diện người dùng được thiết kế lại, bảng điều khiển Thông tin chi tiết về hiệu suất sẽ đơn giản hoá dữ liệu và chỉ hiển thị thông tin có liên quan.
- Khó phân biệt giữa các trường hợp sử dụng. Bảng điều khiển Thông tin chi tiết về hiệu suất hỗ trợ phân tích dựa trên trường hợp sử dụng. Hiện tại, tính năng này chỉ hỗ trợ trường hợp sử dụng tải trang, và sẽ có nhiều tính năng hơn trong tương lai dựa trên ý kiến phản hồi của bạn, ví dụ: tính tương tác.
- Yêu cầu chuyên môn sâu về cách hoạt động của trình duyệt để sử dụng hiệu quả. Bảng điều khiển Thông tin chi tiết về hiệu suất nêu bật các thông tin chi tiết chính trong ngăn Thông tin chi tiết, cùng với ý kiến phản hồi hữu ích về cách khắc phục vấn đề.
Giới thiệu
Hướng dẫn này sẽ hướng dẫn bạn cách đo lường và tìm hiểu hiệu suất tải trang bằng bảng điều khiển Thông tin chi tiết về hiệu suất. Tiếp tục đọc hoặc xem phiên bản video của hướng dẫn này ở trên.
Mở bảng điều khiển Thông tin chi tiết về hiệu suất
- Mở Công cụ cho nhà phát triển.
Nhấp vào biểu tượng Tuỳ chọn khác > Công cụ khác > Thông tin chi tiết về hiệu suất.
Ngoài ra, bạn có thể sử dụng Trình đơn lệnh để mở bảng điều khiển Thông tin chi tiết về hiệu suất.
Ghi lại hiệu suất
Bảng điều khiển Thông tin chi tiết về hiệu suất có thể ghi lại hiệu suất chung và hiệu suất theo trường hợp sử dụng (ví dụ: tải trang).
- Mở trang minh hoạ này trong một thẻ mới và trên trang đó, hãy mở bảng điều khiển Thông tin chi tiết về hiệu suất.
Bạn có thể điều tiết mạng và CPU trong khi quay video. Đối với hướng dẫn này, hãy đánh dấu vào Disable cache (Tắt bộ nhớ đệm) và đặt CPU thành 4x slowdown (Chậm 4 lần) trong trình đơn thả xuống:
Nhấp vào Đo lường mức tải trang. Công cụ cho nhà phát triển ghi lại các chỉ số hiệu suất trong khi trang tải lại, sau đó tự động dừng ghi vài giây sau khi trang tải xong.
Phát lại bản ghi hiệu suất
Sử dụng các nút điều khiển ở dưới cùng để điều khiển việc phát lại bản ghi.
Sau đây là ví dụ về cách thực hiện.
- Nhấp vào biểu tượng Phát để phát bản ghi.
- Nhấp vào biểu tượng Tạm dừng để tạm dừng phát lại.
- Điều chỉnh tốc độ phát bằng trình đơn thả xuống.
- Nhấp vào Bật/tắt bản xem trước trực quan để hiển thị hoặc ẩn bản xem trước trực quan.
Di chuyển trong bản ghi hiệu suất
Công cụ cho nhà phát triển sẽ tự động thu nhỏ để hiển thị toàn bộ tiến trình ghi. Bạn có thể điều hướng bản ghi bằng tính năng thu phóng và di chuyển dòng thời gian.
Để phóng to và di chuyển tiến trình sang trái và phải, hãy sử dụng các nút điều hướng tương ứng:
- Nhấp vào Dòng thời gian để di chuyển đầu phát để xem một khung hình cụ thể.
- Nhấp vào các nút điều khiển Phóng to và Thu nhỏ ở dưới cùng để thu phóng. Trong trường hợp này, bạn sẽ thu phóng dựa trên điểm phát.
- Kéo thanh cuộn ngang ở dưới cùng để di chuyển dòng thời gian sang trái và phải.
Ngoài ra, bạn có thể sử dụng phím tắt. Nhấp vào nút để xem các lối tắt.
Khi sử dụng phím tắt, bạn có thể thu phóng dựa trên con trỏ chuột.
Xem thông tin chi tiết về hiệu suất
Xem danh sách thông tin chi tiết về hiệu suất trong ngăn Thông tin chi tiết. Xác định và khắc phục các vấn đề tiềm ẩn về hiệu suất.
Di chuột qua từng thông tin chi tiết để làm nổi bật các thông tin đó trên các kênh chính.
Nhấp vào một thông tin chi tiết, chẳng hạn như yêu cầu chặn kết xuất, để mở thông tin chi tiết đó trong ngăn Chi tiết. Để hiểu rõ hơn về vấn đề này, hãy kiểm tra các phần Tệp, Vấn đề, Cách khắc phục, v.v.
Xem chỉ số hiệu suất của Web Vitals
Các chỉ số quan trọng về trang web là một sáng kiến của Google nhằm cung cấp hướng dẫn thống nhất về những tín hiệu cần thiết cho biết chất lượng để mang lại trải nghiệm người dùng tuyệt vời trên web.
Bạn có thể xem các chỉ số này trên ngăn Dòng thời gian và Thông tin chi tiết.
Di chuột qua thông tin chi tiết trên Dòng thời gian để tìm hiểu thêm về các chỉ số.
Khám phá độ trễ của lần sơn nội dung lớn nhất
Thời gian hiển thị nội dung lớn nhất (LCP) là một trong các chỉ số Chỉ số quan trọng chính của trang web. Chỉ số này báo cáo thời gian kết xuất của hình ảnh hoặc khối văn bản lớn nhất xuất hiện trong khung nhìn, so với thời điểm đầu tiên trang bắt đầu tải.
Điểm LCP tốt là từ 2,5 giây trở xuống.
Nếu thời gian kết xuất nội dung lớn nhất trên trang của bạn lâu hơn, thì trong dòng thời gian, bạn sẽ thấy huy hiệu LCP có hình vuông màu vàng hoặc hình tam giác màu đỏ.
Để mở ngăn Chi tiết, hãy nhấp vào huy hiệu LCP trên tiến trình hoặc trên ngăn Thông tin chi tiết ở bên phải. Trong ngăn này, bạn có thể khám phá các nguyên nhân có thể gây ra sự chậm trễ và các đề xuất về cách khắc phục.
Trong ví dụ này, một yêu cầu chặn quá trình kết xuất và bạn có thể áp dụng các kiểu quan trọng cùng dòng để khắc phục vấn đề. Để tìm hiểu thêm, hãy xem bài viết Loại bỏ các tài nguyên chặn hiển thị.
Để xem các phần phụ của thời gian kết xuất LCP, hãy di chuyển xuống phần Chi tiết > Bảng chi tiết về thời gian.
Thời gian kết xuất LCP bao gồm các phần phụ sau:
| Phần phụ của LCP | Mô tả |
|---|---|
| Thời gian cho byte đầu tiên (TTFB) | Thời gian từ khi người dùng bắt đầu tải trang cho đến khi trình duyệt nhận được byte đầu tiên của phản hồi tài liệu HTML. |
| Độ trễ khi tải tài nguyên | Độ chênh lệch giữa TTFB và thời điểm trình duyệt bắt đầu tải tài nguyên LCP. |
| Thời gian tải tài nguyên | Thời gian để tải chính tài nguyên LCP. |
| Độ trễ khi hiển thị phần tử | Độ chênh lệch giữa thời điểm tài nguyên LCP tải xong cho đến khi phần tử LCP hiển thị đầy đủ. |
Nếu một phần tử LCP không yêu cầu tải tài nguyên để hiển thị, thì độ trễ và thời gian tải tài nguyên sẽ bị bỏ qua. Ví dụ: trong trường hợp phần tử là một nút văn bản được kết xuất bằng phông chữ hệ thống.
Xem hoạt động thay đổi bố cục
Xem hoạt động thay đổi bố cục trong kênh Layout Shifts (Thay đổi bố cục).
Các sự kiện thay đổi bố cục được nhóm trong một thời lượng phiên. Trong ví dụ này, có hai cửa sổ phiên. Các cửa sổ phiên có khoảng trống giữa các cửa sổ.
Mức thay đổi bố cục tích luỹ (CLS) là một trong các chỉ số các chỉ số quan trọng chính của trang web. Sử dụng kênh Thay đổi bố cục để xác định các vấn đề tiềm ẩn và nguyên nhân gây ra thay đổi bố cục.
Luôn bắt đầu với khoảng thời gian phiên lớn nhất khi cải thiện chỉ số CLS. Trong ví dụ của chúng ta, cửa sổ phiên 1 là cửa sổ lớn nhất, dựa trên màu nền và cấp độ.
Nhấp vào ảnh chụp màn hình để xem thông tin chi tiết về sự thay đổi bố cục, xác định nguyên nhân gốc rễ tiềm ẩn và các phần tử bị ảnh hưởng.
Trong ví dụ của chúng tôi, nguyên nhân gốc rễ tiềm ẩn là nội dung nghe nhìn chưa được định cỡ. Để tìm hiểu cách khắc phục, hãy xem bài viết Tối ưu hoá độ lệch bố cục tích luỹ.
Tìm hiểu về điểm số về mức thay đổi bố cục
Để hiểu cách tính điểm, hãy sử dụng mục Window (Cửa sổ) trong ngăn Details (Chi tiết). Window (Cửa sổ) cho biết sự kiện thay đổi bố cục hiện tại thuộc về cửa sổ phiên nào.
Nếu toàn bộ trang bị dịch chuyển, điểm số tối đa của mỗi lượt thay đổi bố cục là 1. Trong ví dụ của chúng ta, lần thay đổi bố cục đầu tiên có điểm số là 0.15. Lần thay đổi bố cục thứ hai đạt điểm 0.041.
Tổng điểm của phiên này là 0.19. Dựa trên ngưỡng CLS, bạn cần cải thiện. Màu nền của cửa sổ phiên cũng phản ánh điều này.
Biểu đồ nền của cửa sổ phiên tăng lên theo thời gian. Điểm tích luỹ của sự thay đổi bố cục phản ánh mức tăng tại thời điểm đó.
Xem hoạt động mạng
Xem hoạt động mạng trong kênh Mạng. Bạn có thể mở rộng kênh mạng để xem tất cả hoạt động mạng và nhấp vào từng mục để xem thông tin chi tiết.
Xem hoạt động của trình kết xuất
Xem hoạt động kết xuất trong kênh Trình kết xuất. Bạn có thể mở rộng từng trình kết xuất để xem các hoạt động và nhấp vào từng mục để xem thông tin chi tiết.
Xem hoạt động của GPU
Xem hoạt động của GPU trong kênh GPU. Theo mặc định, kênh GPU sẽ bị ẩn. Để bật tính năng này, hãy đánh dấu vào GPU trong phần Cài đặt.
Xem thời gian của người dùng
Để nhận các chỉ số hiệu suất tuỳ chỉnh, bạn có thể sử dụng tính năng Thời gian của người dùng và trực quan hoá thời gian bằng kênh Thời gian. Để biết thêm thông tin, hãy xem API tính thời gian người dùng.
Hãy xem trang minh hoạ này để tính thời gian tải văn bản.
Cách xem thời gian của người dùng:
- Đánh dấu các địa điểm trong ứng dụng bằng
performance.mark(). - Đo lường thời gian đã trôi qua giữa các điểm đánh dấu bằng
performance.measure(). - Ghi lại hiệu suất.
- Xem các số liệu đo lường trên kênh Timings (Thời gian). Nếu bạn không thấy bản nhạc, hãy kiểm tra phần Thời gian của người dùng trong phần Cài đặt.
- Để xem thông tin chi tiết, hãy nhấp vào thời gian trên bản nhạc.
Tuỳ chỉnh giao diện người dùng
Để tuỳ chỉnh Dòng thời gian và Đường dẫn, hãy nhấp vào biểu tượng Cài đặt của bảng điều khiển rồi chọn các tuỳ chọn mà bạn muốn.
Xuất bản ghi
Để lưu bản ghi, hãy nhấp vào biểu tượng Xuất .
Nhập bản ghi
Để tải bản ghi, hãy chọn biểu tượng Nhập .
Xoá bản ghi âm
Cách xoá một bản ghi âm:
- Nhấp vào Xoá. Một hộp thoại xác nhận sẽ mở ra.
- Trong hộp thoại, hãy nhấp vào Xoá để xác nhận việc xoá.