Bảng điều khiển hiệu suất: Phân tích hiệu suất của trang web

Hãy 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 các điểm tắc nghẽn 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.

Hãy dùng bảng điều khiển 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 tính năng ghi.
• 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.

Ngoài ra, 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:

1. Mở Công cụ cho nhà phát triển.
2. Mở Trình đơn lệnh bằng cách nhấn:
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Bắt đầu nhập Performance panel, chọn Show Performance panel rồi nhấn Enter.

Theo dõi trực tiếp Core Web Vitals

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 thu thập và cho bạn biết các chỉ số Nội dung lớn nhất hiển thị (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 điều khiển Hiệu suất cũng sẽ thu thập 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 sẽ cung cấp cho bạn thông tin tổng quan đầy đủ về Core Web Vitals của trang bằng cách sử dụng kết nối mạng và thiết bị của bạn. Bảng điều khiển này cũng thu thập và báo cáo Core Web Vitals cho các lượt chuyển hướng mềm ở phía máy khách trong các ứng dụng một trang.

Trong 3 thẻ chỉ số trong thẻ Lượt tương tác và Mức thay đổi bố cục , bạn có thể tìm thấy các bảng có thông tin về các lượt tương tác và mức thay đổi bố cục đã thu thập, 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 mức thay đổi bố cục). Để xoá cả hai danh sách, hãy nhấp vào khối 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ị của chỉ số đó để xem chú giải công cụ.

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 địa 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 với các chỉ số cục bộ của bạn.

Cách thêm dữ liệu thực địa:

1. Trong phần Hiệu suất > Các bước tiếp theo > Dữ liệu thực địa, hãy nhấp vào Thiết lập.

   

2. Trong hộp thoại Configure field data fetching (Định cấu hình tính năng tìm nạp dữ liệu thực địa), hãy lưu ý đến Privacy disclosure (Thông báo về quyền riêng tư) rồi nhấp vào Ok (OK).

   Nâng cao: Thiết lập mối liên kết giữa môi trường phát triển và môi trường thực tế...

   Bạn có thể thiết lập (nhiều) mối liên kết giữa nguồn gốc trong môi trường phát triển và nguồn gốc trong môi trường phát hành công khai để tự động nhận dữ liệu thực địa phù hợp nhất:

   1. Trong cửa sổ hộp thoại, hãy mở rộng phần Nâng cao rồi nhấp vào + Mới.

   2. Trong bảng liên kết, hãy nhập URL trong môi trường phát triển và URL trong môi trường phát hành công khai rồi nhấp vào \+.

      

      Ví dụ: mối liên kết từ http://localhost:8080 đến https://example.com sẽ hiển thị dữ liệu thực địa cho example.com/page1 khi bạn chuyển đến localhost:8080/page1.

      Ngoài ra, nếu vì lý do nào đó mà bạn không thể tự động nhận dữ liệu trường, bạn có thể bật check_boxLuôn hiện dữ liệu trường cho URL bên dưới rồi cung cấp một URL. Bảng điều khiển Hiệu suất sẽ cố gắng tìm nạp dữ liệu thực địa cho URL này trước rồi cho bạn thấy dữ liệu thực địa này bất kể bạn chuyển đến trang nào.

      Để thay đổi chế độ cài đặt tìm nạp dữ liệu thực địa sau khi thiết lập, hãy nhấp vào Dữ liệu thực địa > Định cấu hình

   Sau khi 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 sẽ cho bạn thấy kết quả so sánh giữa điểm số của các chỉ số cục bộ và điểm số mà người dùng của bạn trải nghiệm. Bạn có thể xem khoảng thời gian thu thập trong phần Dữ liệu thực địa ở 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ị của chỉ số đó để xem chú giải công cụ.

Định cấu hình môi trường để phù hợp hơn với môi trường của người dùng

Sau khi thiết lập tính năng tìm nạp dữ liệu thực địa 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:

1. 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ó) rồi đọ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.

2. Cách định cấu hình môi trường cho ví dụ này:

   1. Đặt khung nhìn thành một trong các kích thước màn hình thông thường (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ử.
   2. 82% người dùng trang web trong ví dụ này sử dụng máy tính để duyệt web. Để đảm bảo rằng bạn so sánh điểm số của các chỉ số cục bộ với dữ liệu thực địa chính xác, bạn có thể chọn Máy tính trong danh sách thả xuống Dữ liệu thực địa > Thiết bị.
   3. 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, ví dụ: Fast 4G (4G nhanh) và CPU thành, ví dụ: 20x slowdown (giảm tốc 20 lần). Bạn cũng có thể nhớ đánh dấu vào hộp check_box Disable network cache (Tắt bộ nhớ đệm mạng) trong cùng một phần.

3. 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 đó để thu thập INP cục bộ rồi so sánh lại điểm số của các chỉ số.

   

   Điểm số của các chỉ số hiện giống với điểm số mà người dùng của bạn trải nghiệm hơn. Theo đó, các 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ố.

Giờ đây, bạn có thể bắt đầu cải thiện Core Web Vitals 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 tính năng ghi 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, 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
• Buộc thu gom rác trong khi ghi
• Lưu bản ghi
• Tải bản ghi
• Xoá bản ghi

Thay đổi chế độ cài đặt tính năng ghi

Capture settings (Chế độ cài đặt tính năng ghi) cho phép bạn thay đổi cách DevTools ghi lại các bản ghi 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 biểu tượng Capture settings settings (Chế độ cài đặt tính năng ghi) để truy cập vào trình đơn Capture settings (Chế độ cài đặt tính năng ghi).

Chọn các lựa chọn sau trong trình đơn Capture settings (Chế độ cài đặt tính năng ghi):

• Disable JavaScript samples (Tắt mẫu JavaScript): Tắt tính năng ghi các ngăn xếp lệnh gọi JavaScript xuất hiện trong ngăn xếp Main (Chính) được gọi trong quá trình ghi. Sẽ giảm chi phí hiệu suất.
• Enable advanced paint instrumentation (slow) (Bật tính năng đo lường nâng cao về quá trình hiển thị (chậm)): Thu thập tính năng đo lường nâng cao về quá trình hiển thị. Cản trở đáng kể hiệu suất.
• Enable CSS selector stats (slow) (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.
• **CPU throttling** (Đ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.
• Screenshot capture (Chụp ảnh màn hình): Chọn kích thước khung hình ảnh chụp màn hình và giới hạn số lượng ảnh chụp màn hình đặt sẵn khi bạn bật Screenshots (Ảnh chụp màn hình).

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à 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 điều hướng báo cáo:

• Điều hướng bản ghi
• Tìm kiếm hoạt động
• Theo dõi trình khởi chạy sự kiện

Sử dụng Thông tin chi tiết về hiệu suất để xem 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 yếu tố quan trọng đối với quy trình công việc của bạn:

• Thay đổi thứ tự của các ngăn xếp và ẩn các ngăn xếp đó
• Ẩn các hàm và hàm con của các hàm đó 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ẻ Bottom-up (Từ dưới lên), Call tree (Cây lệnh gọi) và Event log (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 chỉ số 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 các sự kiện Recalculate Style (Tính toán lại kiểu)
• 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)
• Tài liệu tham khảo về sự kiện trên tiến trình

Cải thiện hiệu suất bằng các bảng điều khiển này

Khám phá các 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

Tài nguyên khác