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 chỉ số hiệu suất của Các chỉ số quan trọng về trang web.
- 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 bạn nên sử dụng 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 Thông tin chi tiết về hiệu suất hỗ trợ việc phân tích theo 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, kèm theo ý 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 chỉ cho bạn cách đo lường và hiểu rõ 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, hãy 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ố về hiệu suất trong khi tải lại trang, sau đó tự động dừng việc ghi lại vài giây sau khi tải trang 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à một ví dụ về cách thực hiện.
- Nhấp vào 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 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 thu phóng dựa trên con trỏ vị trí.
- Kéo thanh cuộn ngang ở dưới cùng để di chuyển dòng thời gian sang trái và sang 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 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.
Hãy di chuột qua từng thông tin chi tiết để làm nổi bật những thông tin đó trên các kênh chính.
Nhấp vào một thông tin chi tiết, ví dụ: yêu cầu chặn hiển thị, để mở thông tin đó trong ngăn Details. Để 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à các phần khác.
Xem các 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ề các tín hiệu chất lượng cần thiết để mang lại trải nghiệm tuyệt vời cho người dùng 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.
Hãy 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ố này.
Khám phá sự chậm trễ của việc hiển thị 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 cho biết thời gian hiển thị của hình ảnh hoặc khối văn bản lớn nhất hiển thị trong khung nhìn, so với thời điểm trang bắt đầu tải lần đầu tiên.
Điểm LCP tốt là từ 2,5 giây trở xuống.
Nếu thời gian hiển thị 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 sẽ chặn việc hiển thị và bạn có thể áp dụng các kiểu quan trọng cùng dòng để khắc phục lỗi đó. Để 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 hiển thị LCP, hãy di chuyển xuống phần Chi tiết > Phân tích thời gian.
Thời gian kết xuất LCP bao gồm các phần phụ sau:
| Phần phụ LCP | Mô tả |
|---|---|
| Thời gian đến 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 cần thiết để 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 hoàn tất quá trình tải 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 hiển thị 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 Layout Shift (Thay đổi bố cục) để xác định các vấn đề tiềm ẩn và nguyên nhân dẫn đến việc 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 (Mức thay đổi bố cục tích luỹ). 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ụ này, 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 hóa Điểm số tổng hợp về mức thay đổi bố cục.
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ị thay đổi, điểm tối đa của mỗi lần thay đổi bố cục sẽ là 1. Trong ví dụ này, lượt thay đổi bố cục đầu tiên ghi được 0.15. Lần thay đổi bố cục thứ hai đạt được 0.041.
Tổng điểm trong khoảng thời gian 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 sổ phiên tăng 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 rồi nhấp vào từng mục để xem chi tiết.
Xem hoạt động GPU
Xem hoạt động 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ố đo lường hiệu suất tuỳ chỉnh, bạn có thể sử dụng chế độ Thời gian người dùng và trình bày trực quan dấu thời gian của mình bằng kênh Thời gian. Để biết thêm thông tin, hãy xem bài viết API 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 người dùng:
- Đánh dấu các địa điểm trong ứng dụng của bạn bằng
performance.mark(). - Đo thời gian đã trôi qua giữa các điểm bằng hàm
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 kênh này, hãy đánh dấu vào mục Thời gian 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 đi, hãy nhấp vào biểu tượng Cài đặt trên bảng điều khiển rồi chọn các lựa chọn 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 một 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á.