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