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 trang web của bạn.
Tại sao nên 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 để 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 điều khiển Hiệu suất hiện có:
- Quá nhiều thông tin. Nhờ 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 giúp đơ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 hỗ trợ hoạt động 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 tải trang và sẽ sớm ra mắt thêm nhiều trường hợp khác dựa trên ý kiến phản hồi của bạn (ví dụ: khả năng tương tác).
- Cần có kiến thức chuyên môn sâu về cách các trình duyệt hoạt động để sử dụng hiệu quả. Bảng điều khiển 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à tìm hiểu hiệu suất tải trang thông qua 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 Lựa 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ể 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à 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 này, 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 ghi. Để xem hướng dẫn này, hãy chọn Tắt bộ nhớ đệm và đặt CPU ở mức giảm tốc độ 4 lần trong trình đơn thả xuống:
Nhấp vào Đo lường lượt 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 tải trang xong.
Phát lại bản ghi buổi biểu diễn
Sử 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à 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.
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.
Để 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 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ể dùng các 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 sẽ 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 chúng 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 Chi tiết. Để 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à nhiều mục khác.
Xem chỉ số hiệu suất trong 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 chất lượng cao cho người dùng trên web.
Bạn có thể xem những chỉ số này trong ngăn Dòng thời gian và ngăn 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ố.
Khám phá sự chậm trễ của nội dung hiển thị lớn nhất
Thời gian hiển thị nội dung lớn nhất (LCP) là một trong những chỉ số trong Các chỉ số quan trọng về trang web. Chỉ số này báo cáo thời gian hiển thị của khối văn bản hoặc hình ảnh 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 nội dung lớn nhất hiển thị trên trang của bạn mất nhiều thời gian hơn để hiển thị, thì trong dòng thời gian, bạn sẽ thấy huy hiệu LCP cùng 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 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ể tìm hiểu các nguyên nhân tiềm ẩn dẫn đến tình trạng chậm trễ và các đề xuất về cách khắc phục.
Trong ví dụ này, yêu cầu chặn kết xuất và bạn có thể áp dụng nội tuyến các kiểu quan trọng để khắc phục sự cố đó. Để tìm hiểu thêm, hãy xem bài viết 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 cuộn xuống mục Chi tiết > Chi tiết về thời gian.
Thời gian hiển thị 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 | delta 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 kết xuất 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 được kết xuất hoàn toàn. |
Nếu một phần tử LCP không yêu cầu tải tài nguyên để hiển thị, thì thời gian và độ trễ 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 thay đổi về bố cục được nhóm trong một cửa sổ phiên. Trong ví dụ này, có 2 cửa sổ phiên. Các khoảng cách giữa các cửa sổ phiên hoạt độ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ố chỉ số quan trọng chính của trang web. Sử dụng kênh Layout Shifts (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 bằng thời lượng 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 và cấp độ nền.
Nhấp vào ảnh chụp màn hình để xem thông tin chi tiết về việc thay đổi bố cục, xác định nguyên nhân gốc rễ tiềm ẩn và các thành phần 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 không được định kích thước. Để tìm hiểu cách khắc phục, hãy xem phần Tối ưu hoá Điểm số tổng hợp về mức thay đổi bố cục.
Tìm hiểu về điểm số 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ự thay đổi bố cục hiện tại thuộc về phiên nào.
Nếu toàn bộ trang bị dịch chuyển, điểm tối đa của mỗi lần thay đổi bố cục là 1. Trong ví dụ của chúng tôi, lần thay đổi bố cục đầu tiên đạt điểm 0.15. Thay đổi bố cục thứ hai có điểm số 0.041.
Tổng điểm cho 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 phản ánh tương tự.
Biểu đồ nền của cửa sổ phiên tăng theo thời gian. Điểm tích luỹ của mức 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 phát hành mạng để xem tất cả hoạt động 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
Xem hoạt động kết xuất trong bản nhạc Renderer (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 chi tiết.
Xem hoạt động GPU
Xem hoạt động của GPU trong kênh GPU. Theo mặc định, kênh GPU sẽ bị ẩn. Để bật chế độ này, hãy xem mục GPU trong phần Settings (Cài đặt).
Xem thời gian người dùng
Để nhận được các biện pháp đo lường hiệu suất tuỳ chỉnh, bạn có thể sử dụng Thời gian người dùng và trực quan hoá thời gian của mình bằng kênh Thời gian. Để biết thêm thông tin, hãy xem API thời gian của 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 địa điểm trong đơn đăng ký 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 phép đo trên kênh Thời gian. Nếu bạn không xem được kênh, hãy chọn Thời gian người dùng trong phần Cài đặt.
- Để xem chi tiết, hãy nhấp vào thời gian trên kênh.
Tuỳ chỉnh giao diện người dùng
Để tùy chỉnh Dòng thời gian và Tuyến đường, hãy nhấp vào biểu tượng Cài đặt của bảng điều khiển và chọn các tùy chọn bạn muốn.
Xuất bản ghi âm
Để lưu một bản ghi âm, hãy nhấp vào biểu tượng Xuất .
Nhập bản ghi
Để tải một bản ghi âm, 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, nhấp vào Xoá để xác nhận xoá.