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 Các chỉ số quan trọng về trang web.
- Xem hoạt động trên mạng.
- Mô phỏng tốc độ CPU và mạng chậm hơn.
- Nhập và xuất bản ghi âm.
Tại sao cần có một 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 nhằ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ẽ tinh giản 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ó thêm nhiều trường hợp khác trong tương lai 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 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 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 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 Tuỳ chọn khác > Công cụ khác > Thông tin chi tiết về hiệu suất.
Hoặc sử dụng Trình đơn lệnh để mở bảng 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 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 chỉnh tốc độ mạng và CPU trong khi ghi. Trong 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 (Giảm tốc độ 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 quá trình tải trang hoàn tất.
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 biểu tượng Bật/tắt chế độ xem trước trực quan để hiện hoặc ẩn chế độ xem trước trực quan.
Điều hướng bản ghi hiệu suất
Công cụ cho nhà phát triển sẽ tự động thu nhỏ để hiện toàn bộ dòng thời gian ghi. Bạn có thể điều hướng bản ghi bằng cách thu phóng và di chuyển dòng thời gian.
Để phóng to và di chuyển dòng thời gian sang trái và phải, hãy 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 đến một khung hình cụ thể.
- Nhấp vào các nút 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 đầu 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ể dùng phím tắt. Nhấp vào nút để xem các phím 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 thông tin đó trên các bản nhạc 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 hiển thị, để mở thông tin đó trong ngăn Chi tiết. Để hiểu rõ hơn về vấn đề, hãy xem xét các phần Tệp, Vấn đề, Cách khắc phục và nhiều phần khác.
Xem các chỉ số hiệu suất của Chỉ số quan trọng chính của 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ề 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 lên 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 thời gian 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 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à 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 để kết xuất, 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 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 tình trạng 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 đề này. Để 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 sau:
| Phần phụ 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 | Khoảng 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ử | Khoảng thời gian 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 đượ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ì độ 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 dấu vết 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 của phiên. Trong ví dụ này, có 2 cửa sổ phiên. Các 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 các chỉ số chỉ số quan trọng chính của trang web. Sử dụng bản theo dõi Layout Shifts (Thay đổi bố cục) để xác định các vấn đề và nguyên nhân tiềm ẩn gây ra việc thay đổi bố cục.
Luôn bắt đầu bằng cửa sổ phiên lớn nhất khi cải thiện chỉ số CLS. Trong ví dụ này, 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 một ả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 ta, nguyên nhân gốc rễ tiềm ẩn là phương tiệ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á độ trễ bố cục tích luỹ.
Tìm hiểu về điểm số mức thay đổi bố cục
Để hiểu cách tính điểm, hãy sử dụng mục Cửa sổ trong ngăn Chi tiết. Cửa sổ cho biết sự kiện thay đổi bố cục hiện tại thuộc về thời lượng của phiên nào.
Nếu toàn bộ trang bị thay đổi, đ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 tôi, mức độ thay đổi bố cục đầu tiên là 0.15. Mức độ ảnh hưởng của lần thay đổi bố cục thứ hai là 0.041.
Tổng điểm cho thời lượng 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 đ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 số 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 thẻ Mạng. Bạn có thể mở rộng đường 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 dải 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 dải GPU. Theo mặc định, bản đồ GPU sẽ bị ẩn. Để bật tính năng này, hãy chọn GPU trong phần Cài đặt.
Xem thời gian của người dùng
Để nhận được các chỉ số hiệu suất tuỳ chỉnh, bạn có thể sử dụng Thời gian của người dùng và trực quan hoá thời gian bằng bản ghi Thời gian. Để biết thêm thông tin, hãy xem API thời gian người dùng.
Hãy xem trang minh hoạ này để tính thời gian đã trôi qua của quá trình 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 của bạn bằng
performance.mark(). - Đo thời gian đã trôi qua giữa các dấu bằng
performance.measure(). - Ghi lại hiệu suất.
- Xem các phép đo trên dải Timings (Thời gian). Nếu bạn không thấy bản nhạc, hãy kiểm tra Thời gian của người dùng trong phần Cài đặt.
- Để xem chi tiết, hãy nhấp vào dấu 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à Bản phụ đề, hãy nhấp vào biểu tượng Cài đặt của bảng điều khiển rồi đánh dấu vào các lựa chọn bạn muốn.
Xuất bản ghi
Để lưu bản ghi âm, hãy nhấp vào Xuất .
Nhập bản ghi
Để tải một bản ghi, hãy chọn Nhập .
Xoá bản ghi
Cách xoá một bản ghi âm:
- Nhấp vào biểu tượng 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á.