Sử dụng bảng 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ại sao bạn nên sử dụng bảng điều khiển mới?
Bảng Thông tin chi tiết về hiệu suất mới là một thử nghiệm để giải quyết 3 vấn đề mà nhà phát triển gặp phải khi làm việc với bảng 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 Thông tin chi tiết về hiệu suất sẽ đơn giản hoá dữ liệu và chỉ hiển thị những 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 có hỗ trợ việc phân tích theo trường hợp sử dụng. Công cụ này hiện chỉ hỗ trợ trường hợp sử dụng tải trang. Trong tương lai, chúng tôi sẽ hỗ trợ thêm nhiều tính năng khác dựa trên ý kiến phản hồi của bạn, chẳng hạn như tính tương tác.
- Cần có kiến thức chuyên môn sâu về cách trình duyệt hoạt động để sử dụng hiệu quả. Bảng Thông tin chi tiết về hiệu suất làm nổi bật các thông tin chi tiết chính trong ngăn Thông tin chi tiết, kèm theo thông tin 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 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 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 rồi mở bảng điều khiển Thông tin chi tiết về hiệu suất trên trang đó.
Bạn có thể điều tiết mạng và CPU trong khi ghi. Đối với hướng dẫn này, hãy chọn Disable cache (Tắt bộ nhớ đệm) và đặt CPU (CPU) ở chế độ giảm tốc độ 4x trong trình đơn thả xuống:
Nhấp vào Đo lường 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 buổi biểu diễn
Dùng các nút điều khiển ở dưới cùng để điều khiển quá trình 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 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 hình ảnh để hiển thị hoặc ẩn bản xem trước hình ảnh.
Thao tác trong một 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.
Để thu phóng và di chuyển dòng thời gian 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 con trỏ vị trí để xem một khung hình cụ thể.
- Nhấp vào các đ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 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 đề, hãy kiểm tra các mục Tệp, Vấn đề, Cách khắc phục, v.v.
Xem các chỉ số về hiệu suất của Các chỉ số quan trọng về trang web
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
Nội dung lớn nhất hiển thị (LCP) là một trong những chỉ số Core Web Vitals. 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 với một 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 dòng thời gian 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ự cố chậm trễ và đề xuất 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 phần Loại bỏ 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 | Nội dung mô tả |
|---|---|
| Thời gian đến byte đầu tiên (TTFB) | Khoảng 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 | Mức delta giữa TTFB và khi 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ễ hiển thị phần tử | delta giữa thời điểm tài nguyên LCP tải xong cho đến khi phần tử LCP hiển thị hoàn toàn. |
Nếu một phần tử LCP không yêu cầu tải tài nguyên để kết xuất, thì thời gian và độ trễ tải tài nguyên sẽ được 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.
Các thay đổi về bố cục được nhóm trong một cửa sổ của phiên hoạt động. Trong ví dụ này, có hai cửa sổ phiên. Cửa sổ phiên có khoảng trống giữa chúng.
Điểm số tổng hợp về mức thay đổi bố cục (CLS) là một trong những 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 tôi, cửa sổ phiên 1 là cửa sổ lớn nhất, dựa trên màu và cấp độ nền.
Nhấp vào ảnh chụp màn hình để xem chi tiết về quá trình thay đổi bố cục, xác định nguyên nhân gốc 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 định kích thướ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 đ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 (Thông tin chi tiết). Cửa sổ cho biết cửa sổ phiên hiện tại sẽ thay đổi bố cục.
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 ghi được điểm 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, chỉ số này cần được cải thiện. Màu nền của cửa sổ phiên cũng phản ánh tương tự.
Biểu đồ nền cửa sổ phiên tăng lên theo thời gian. Điểm tích luỹ của lần 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 của mạng rồi nhấp vào từng mục để xem chi tiết.
Xem hoạt động của trình kết xuất đồ hoạ
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 bị ẩn. Để bật, hãy chọn GPU trong phần Cài đặt.
Xem thời gian 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 tính năng Thời gian người dùng và hình ảnh hoá thời gian của mình thông qua 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 đã trôi qua.
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 kết quả đo lường trên kênh 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 một bản ghi âm, hãy nhấp vào biểu tượng Xuất .
Nhập một bản ghi
Để tải một bản ghi âm, hãy chọn biểu tượng Nhập .
Xoá một 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, nhấp vào Xoá để xác nhận xoá.