Tìm hiểu các vấn đề về hiệu suất kết xuất thông qua tài liệu tham khảo này về các lựa chọn liên quan đến hiệu suất trên thẻ Hiển thị.
Làm nổi bật các khu vực được vẽ lại bằng hiệu ứng nhấp nháy sơn
Khi bạn bật tuỳ chọn này, Chrome sẽ nhấp nháy màn hình màu xanh lục mỗi khi vẽ lại.
Cách xem các khu vực đang được sơn lại:
- Mở thẻ Rendering (Hiển thị) trên màn hình minh hoạ này và đánh dấu vào Paint flashing (Bật tính năng sơn nhấp nháy).
- Quan sát quá trình vẽ lại được làm nổi bật bằng màu xanh lục.
Nếu, trên một trang khác, bạn thấy toàn bộ màn hình nhấp nháy màu xanh lục hoặc có những vùng màn hình mà bạn không nên vẽ, hãy xem xét điều tra thêm.
Làm nổi bật khu vực thay đổi bố cục
Việc thay đổi bố cục gây ra những lần vẽ lại không mong muốn và có thể gây khó chịu mà còn gây hại.
Cách xem vị trí và thời gian thay đổi bố cục trên một trang:
Mở thẻ Kết xuất rồi đánh dấu chọn Khu vực thay đổi bố cục.
Làm mới trang. Các khu vực có thay đổi về bố cục được đánh dấu nhanh bằng màu tím.
Xem các lớp và thẻ thông tin có đường viền lớp
Sử dụng Đường viền lớp để xem lớp phủ đường viền lớp và ô ở đầu trang.
Cách bật đường viền lớp:
- Mở thẻ Rendering (Hiển thị) rồi đánh dấu vào Layer Borders (Biên giới lớp).
- Quan sát các đường viền của lớp màu cam và ô liu và các ô màu lục lam.
Hãy xem nhận xét trong debug_colors.cc để biết nội dung giải thích về mã hoá màu.
Xem khung hình/giây theo thời gian thực với số liệu thống kê kết xuất khung hình
Số liệu thống kê kết xuất khung hình là một lớp phủ xuất hiện ở góc trên cùng bên phải khung nhìn.
Cách mở phần Thống kê kết xuất khung hình:
- Mở thẻ Rendering (Kết xuất) rồi bật hộp đánh dấu Frame rendering stats (Số liệu thống kê kết xuất khung).
- Quan sát số liệu thống kê ở góc trên cùng bên phải của trang.
Lớp phủ Số liệu thống kê kết xuất khung hình cho thấy:
- Số khung hình/giây ước tính theo thời gian thực khi trang chạy.
- Dòng thời gian khung hình ở dạng biểu đồ có 3 loại khung:
- Đã kết xuất thành công các khung (đường màu xanh dương)
- Khung hiện diện một phần (đường màu vàng)
- Khung hình bị bỏ lỡ (đường màu đỏ).
- Trạng thái tạo điểm ảnh GPU: bật hoặc tắt. Để biết thêm thông tin, hãy xem bài viết Cách tải công cụ tạo điểm ảnh GPU.
- Mức sử dụng bộ nhớ GPU: số lượng bộ nhớ đã sử dụng và MB bộ nhớ tối đa.
Xác định vấn đề về hiệu suất cuộn
Sử dụng Vấn đề về hiệu suất cuộn để xác định các phần tử của trang có trình nghe sự kiện liên quan đến việc cuộn có thể gây hại cho hiệu suất của trang.
Cách xem những phần tử có thể có vấn đề:
- Mở thẻ Hiển thị rồi chọn Scrolling Performance issues (Vấn đề về hiệu suất cuộn).
- Quan sát những phần tử có thể có vấn đề được làm nổi bật.
Xem 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ề 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.
Các chỉ số quan trọng về trang web là một nhóm chỉ số quan trọng áp dụng cho mọi trang web. Mỗi Chỉ số quan trọng chính của trang web thể hiện một khía cạnh riêng biệt của trải nghiệm người dùng, có thể đo lường tại hiện trường và phản ánh trải nghiệm thực tế về một kết quả trọng yếu lấy người dùng làm trung tâm. Các chỉ số quan trọng chính của trang web bao gồm:
- Thời gian hiển thị nội dung lớn nhất (LCP): đo lường hiệu suất tải. Để mang lại trải nghiệm tốt cho người dùng, LCP phải xảy ra trong vòng 2,5 giây kể từ khi trang bắt đầu tải lần đầu.
- Lượt tương tác với Next Paint (INP): đo lường mức độ tương tác. Để mang lại trải nghiệm tốt cho người dùng, các trang nên có INP từ 200 mili giây trở xuống.
- Điểm số tổng hợp về mức thay đổi bố cục (CLS): đo lường độ ổn định của hình ảnh. Để mang lại trải nghiệm tốt cho người dùng, các trang nên duy trì CLS từ 0,1 trở xuống.
Hãy sử dụng tiện ích Chỉ số quan trọng chính của trang web của Chrome để xem các giá trị của Chỉ số quan trọng chính của trang web.