Sử dụng bảng điều khiển Hiệu suất để phân tích hiệu suất của trang web.
Tổng quan
Bảng điều khiển Hiệu suất cho phép bạn ghi lại hồ sơ hiệu suất CPU của các ứng dụng web. Phân tích hồ sơ để tìm ra những nút thắt cổ chai tiềm ẩn về hiệu suất và cách bạn có thể tối ưu hoá việc sử dụng tài nguyên.
Sử dụng bảng Hiệu suất để làm những việc sau:
- Ghi lại hồ sơ hiệu suất.
- Thay đổi chế độ cài đặt chụp.
- Phân tích báo cáo hiệu suất.
Để xem hướng dẫn toàn diện về cách cải thiện hiệu suất của trang web, hãy xem bài viết Phân tích hiệu suất thời gian chạy.
Mở bảng điều khiển Hiệu suất
Để mở bảng điều khiển Hiệu suất, hãy mở Công cụ cho nhà phát triển rồi chọn Hiệu suất trong một nhóm thẻ ở trên cùng.
Hoặc, hãy làm theo các bước sau để mở bảng điều khiển Hiệu suất bằng Trình đơn lệnh:
- Mở Công cụ cho nhà phát triển.
- Mở trình đơn Lệnh bằng cách nhấn:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Bắt đầu nhập Performance panel, chọn Show Performance panel (Hiện bảng điều khiển Hiệu suất) rồi nhấn Enter.
Theo dõi Các chỉ số quan trọng chính của trang web trực tiếp
Khi bạn mở bảng điều khiển Hiệu suất, bảng điều khiển này sẽ ngay lập tức ghi lại và cho bạn biết Thời gian hiển thị nội dung lớn nhất (LCP) và Mức thay đổi bố cục tích luỹ (CLS) cục bộ, đồng thời cho bạn biết điểm số của các chỉ số này (tốt, cần cải thiện hoặc kém).
Nếu bạn tương tác với trang của mình, bảng Hiệu suất cũng sẽ ghi lại Lượt tương tác đến nội dung hiển thị tiếp theo (INP) cục bộ và điểm số của chỉ số này. Ngoài LCP và CLS, chỉ số này cung cấp cho bạn thông tin tổng quan đầy đủ về Các chỉ số quan trọng chính của trang web của trang bằng cách sử dụng kết nối mạng và thiết bị của bạn.
Trong 3 thẻ chỉ số ở thẻ Tương tác và Sự thay đổi bố cục, bạn có thể tìm thấy các bảng chứa thông tin về lượt tương tác và sự thay đổi bố cục đã ghi lại, bao gồm cả các phần tử, thời gian, giai đoạn (đối với lượt tương tác) và điểm số (đối với sự thay đổi bố cục). Để xoá cả hai danh sách, hãy nhấp vào chặn Xoá.
Để xem thông tin chi tiết về điểm số của một chỉ số, hãy di chuột qua giá trị chỉ số để xem chú thích.
So sánh trải nghiệm của bạn với trải nghiệm của người dùng
Bạn cũng có thể tìm nạp dữ liệu thực tế từ Báo cáo trải nghiệm người dùng trên Chrome và so sánh trải nghiệm của người dùng trên trang web của bạn với các chỉ số cục bộ.
Cách thêm dữ liệu trường:
-
Trong mục Hiệu suất > Các bước tiếp theo > Dữ liệu trường, hãy nhấp vào Thiết lập.
-
Trong hộp thoại Configure field data fetching (Định cấu hình việc tìm nạp dữ liệu trường), hãy lưu ý đến Privacy disclosure (Thông tin công bố về quyền riêng tư) rồi nhấp vào Ok.
Khi bạn thiết lập tính năng tìm nạp dữ liệu thực địa, bảng điều khiển Hiệu suất hiện sẽ cho bạn thấy kết quả so sánh giữa điểm số chỉ số cục bộ và điểm số mà người dùng trải nghiệm. Bạn có thể xem khoảng thời gian thu thập trong phần Dữ liệu trường ở bên phải.
Để xem thông tin chi tiết về điểm số của một chỉ số, hãy di chuột qua giá trị chỉ số để xem chú thích.
Định cấu hình môi trường của bạn sao cho phù hợp hơn với môi trường của người dùng
Khi bạn thiết lập tính năng tìm nạp dữ liệu trường như mô tả trong phần trước, bảng điều khiển Hiệu suất sẽ cung cấp cho bạn các đề xuất về cách định cấu hình môi trường để phù hợp hơn với trải nghiệm của người dùng.
Cách định cấu hình môi trường:
-
Trong mỗi thẻ chỉ số, hãy mở rộng phần Xem xét các điều kiện kiểm thử cục bộ (nếu có) và đọc các đề xuất.
Trong ví dụ này, để phù hợp hơn với trải nghiệm của người dùng, bạn có thể muốn sử dụng kích thước màn hình máy tính thông thường và giảm tốc độ CPU cũng như mạng.
-
Để khớp với cấu hình môi trường cho ví dụ này:
- Đặt khung nhìn thành một trong các kích thước màn hình phổ biến (ví dụ: 720p hoặc 1080p). Để mô phỏng các thiết bị và kích thước màn hình cụ thể, bạn có thể sử dụng Chế độ thiết bị trong bảng điều khiển Phần tử.
- 82% người dùng trang web trong ví dụ này sử dụng máy tính để duyệt xem. Để đảm bảo rằng bạn so sánh điểm số chỉ số cục bộ với dữ liệu trường chính xác, bạn có thể chọn Máy tính trong danh sách thả xuống Dữ liệu trường > Thiết bị.
- Trong phần Environment settings (Chế độ cài đặt môi trường), hãy đặt danh sách thả xuống Network (Mạng) thành Fast 4G (Mạng 4G nhanh) và CPU (CPU) thành 20x slowdown (Giảm tốc 20 lần), chẳng hạn. Bạn cũng có thể check_box Tắt bộ nhớ đệm mạng trong cùng một mục.
Lưu ý: Trong trình đơn thả xuống điều tiết của phần Cài đặt môi trường, bảng Hiệu suất cũng có thể đề xuất các chế độ cài đặt sẵn về việc điều tiết để sử dụng. Ngoài ra, để phù hợp hơn với các thiết bị di động cấp thấp và trung bình, bạn có thể điều chỉnh các chế độ đặt sẵn tuỳ chỉnh về việc điều tiết CPU trên thiết bị của mình. Để thực hiện việc này, hãy chọn Calibrate (Hiệu chỉnh) trong phần CPU > Calibrated presets (Chế độ đặt sẵn đã hiệu chỉnh).
-
Sau khi định cấu hình môi trường, hãy tải lại trang, tương tác với trang đó để ghi lại INP cục bộ và so sánh lại điểm số của chỉ số.
Có vẻ như điểm số của chỉ số hiện tương tự hơn với điểm số mà người dùng của bạn trải nghiệm. Do đó, phần Xem xét các điều kiện kiểm thử cục bộ đã biến mất khỏi thẻ chỉ số.
Nhờ đó, giờ đây bạn có thể bắt đầu cải thiện Các chỉ số quan trọng về trang web của trang web:
- Tối ưu hoá LCP
- Tối ưu hoá INP
- Tối ưu hoá CLS
Thu thập và phân tích báo cáo hiệu suất
Trong các phần tiếp theo, hãy làm theo hướng dẫn về cách ghi lại hồ sơ, thay đổi chế độ cài đặt chụp và phân tích báo cáo.
Ghi lại hồ sơ hiệu suất
Khi bạn đã sẵn sàng ghi lại, bảng điều khiển Hiệu suất sẽ cung cấp cho bạn các lựa chọn sau:
- Ghi lại hiệu suất thời gian chạy
- Ghi lại hiệu suất tải
- Chụp ảnh màn hình trong khi ghi hình
- Buộc thu gom rác trong khi ghi
- Lưu bản ghi
- Tải bản ghi lên
- Xoá bản ghi
Thay đổi chế độ cài đặt chụp
Chế độ cài đặt ghi lại cho phép bạn thay đổi cách DevTools ghi lại hiệu suất và có thể cung cấp cho bạn thông tin bổ sung trong báo cáo. Nhấp vào Chế độ cài đặt chụp chế độ cài đặt để truy cập vào trình đơn Chế độ cài đặt chụp.
Chọn các chế độ sau trong trình đơn Chế độ cài đặt chụp:
- Tắt mẫu JavaScript: Tắt tính năng ghi lại các ngăn xếp lệnh gọi JavaScript xuất hiện trong bản ghi Chính được gọi trong quá trình ghi. Sẽ giảm chi phí hiệu suất.
- Bật khả năng đo lường bản vẽ nâng cao (chậm): Ghi lại khả năng đo lường bản vẽ nâng cao. Cản trở đáng kể hiệu suất.
- Bật số liệu thống kê của bộ chọn CSS (chậm): Thu thập số liệu thống kê của bộ chọn CSS. Cản trở đáng kể hiệu suất.
- Điều tiết CPU: Mô phỏng tốc độ CPU chậm hơn.
- Hạn chế băng thông mạng: Mô phỏng tốc độ mạng chậm hơn.
Phân tích báo cáo hiệu suất
Hãy xem bài viết Phân tích bản ghi hiệu suất để biết hướng dẫn đầy đủ về cách sử dụng bảng điều khiển Hiệu suất.
Sau đây là một nhóm các chủ đề trong hướng dẫn, cùng với các tài liệu hữu ích khác:
Cách thao tác trong báo cáo:
- Khám phá bản ghi
- Hoạt động tìm kiếm
- Theo dõi người khởi xướng sự kiện
Sử dụng Thông tin chi tiết về hiệu suất để nhận thông tin chi tiết hữu ích về hiệu suất của trang web:
- Thông tin chi tiết về hiệu suất
Cách tập trung vào những việc quan trọng trong quy trình làm việc:
- Thay đổi thứ tự của các bản nhạc và ẩn chúng
- Ẩn các hàm và phần tử con của chúng trong biểu đồ hình ngọn lửa
- Tạo đường dẫn và chuyển đổi giữa các mức thu phóng
Cách tìm hiểu về các thẻ Từ dưới lên, Cây lệnh gọi và Nhật ký sự kiện:
- Xem hoạt động trong bảng
Cách phân tích báo cáo:
- Xem hoạt động của luồng chính
- Đọc biểu đồ hình ngọn lửa
- Xem ảnh chụp màn hình
- Xem các chỉ số về bộ nhớ
- Xem thời lượng của một phần trong bản ghi
- Phân tích hiệu suất của bộ chọn CSS trong sự kiện Recalculate Style
- Phân tích hiệu suất của Node.js bằng bảng điều khiển Hiệu suất
- Phân tích số khung hình/giây (FPS)
- Thông tin tham khảo về sự kiện trên dòng thời gian
Nâng cao hiệu suất bằng các bảng này
Khám phá những bảng điều khiển khác có thể giúp bạn cải thiện hiệu suất của trang web:
- Lighthouse: Tối ưu hoá tốc độ trang web
- Bộ nhớ: Tổng quan về bảng điều khiển Bộ nhớ
- Kết xuất: Khám phá các vấn đề về hiệu suất kết xuất
- Vấn đề: Tìm và khắc phục vấn đề
- Hiệu suất: Xem thông tin về các lớp