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

Dale St. Marthe
Dale St. Marthe
LinkedIn

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 Performance (Hiệu suất) cho phép bạn ghi lại hồ sơ hiệu suất của CPU của các ứng dụng web. Phân tích hồ sơ để tìm điểm tắc nghẽn tiềm ẩn về hiệu suất và cách tối ưu hoá việc sử dụng tài nguyên.

Sử 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 chụp.
  • Phân tích báo cáo hiệu suất.

Để biết 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ở DevTools rồi chọn Hiệu suất trong 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 Performance (Hiệu suất) bằng Command menu (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 Trình đơn lệnh có
  5. Bắt đầu nhập Performance panel, chọn Hiển thị bảng điều khiển Hiệu suất rồi nhấn Enter.

Trực tiếp quan sát Các chỉ số quan trọng về trang web

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à hiển thị cho bạn các chỉ số 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) tại địa phương, đồng thời cho bạn biết điểm số của các chỉ số đó (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 ghi lại Lượt tương tác với lần hiển thị tiếp theo (INP) cục bộ và điểm số của bạn. Ngoài LCP và CLS, bảng này còn 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 dựa trên kết nối mạng và thiết bị của bạn.

Bảng điều khiển Hiệu suất cung cấp danh sách các lượt tương tác đã ghi lại trong 3 thẻ chỉ số. Để xoá danh sách, hãy nhấp vào Xoá.

Để xem bảng chi tiết về điểm số của chỉ số, hãy di chuột qua giá trị của 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 trường 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 trường:

  1. 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.

    Nút "Thiết lập" trong phần Các bước tiếp theo.

  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 trường), hãy lưu ý phần Privacy disclosure (Tiết lộ quyền riêng tư) rồi nhấp vào 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 sản xuất...

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

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

    2. Trong bảng liên kết, hãy nhập URL phát triển và URL sản xuất của bạn rồi nhấp vào dấu +.

      Mối liên kết giữa nguồn gốc phát triển và nguồn gốc phát hành công khai trong phần nâng cao.

      Ví dụ: việc liên kết http://localhost:8080 với https://example.com sẽ cung cấp dữ liệu trường cho example.com/page1 khi bạn điều hướng đến localhost:8080/page1.

      Ngoài ra, nếu vì lý do nào đó bạn không thể tự động nhận dữ liệu của trường, bạn có thể bật Luôn hiển thị dữ liệu trường cho URL bên dưới và 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 trường cho URL này trước, sau đó hiển thị cho bạn dữ liệu của trường này bất kể bạn truy cập vào trang nào.

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

    Sau khi thiết lập tính năng tìm nạp dữ liệu trường, bảng Hiệu suất giờ đây sẽ hiển thị thông tin so sánh giữa điểm chỉ số cục bộ và điểm số của người dùng. Bạn có thể xem khoảng thời gian thu thập dữ liệu trong mục Dữ liệu trường ở bên phải.

    Hoạt động thu thập dữ liệu trong trường sau khi được tìm nạp.

    Để xem bảng 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ú giải công cụ.

Định cấu hình môi trường của bạn cho 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 trường như mô tả trong phần trước, bảng 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.

Để định cấu hình môi trường, hãy làm như sau:

  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ó) và đọc các đề xuất.

    Mục "Xem xét các điều kiện thử nghiệm cục bộ" được mở rộng trong mỗi thẻ chỉ số.

    Có vẻ như 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 phổ biến và điều tiết CPU và mạng.

  2. Để khớp với 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 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ử.
    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 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ị.
    3. Ví dụ: Trong phần Cài đặt môi trường, hãy đặt danh sách thả xuống Mạng thành Fast 4G và CPU thành giảm tốc 20 lần. Bạn cũng có thể chọn Tắt bộ nhớ đệm của mạng trong cùng 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 để ghi lại INP cục bộ của bạn và so sánh lại điểm số của chỉ số.

    Môi trường được định cấu hình để phù hợp với trải nghiệm thực tế của người dùng.

    Có vẻ như điểm chỉ số hiện giống với điểm số mà người dùng của bạn trải nghiệm. Do đó, mục Xem xét điều kiện thử nghiệm địa phương của bạn đã biến mất khỏi các thẻ chỉ số.

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:

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 hồ sơ, thay đổi chế độ cài đặt bản 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 tuỳ chọn sau:

Thay đổi chế độ cài đặt quay video

Chế độ cài đặt bản ghi cho phép bạn thay đổi cách DevTools ghi lại bản ghi hiệu suất và có thể cung cấp thêm thông tin cho bạn trong báo cáo. Nhấp vào Cài đặt chụp để truy cập trình đơn Cài đặt chụp.

Chọn các tuỳ chọn sau trong trình đơn Cài đặt chụp:

Phân tích báo cáo hiệu suất

Hãy xem phần 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.

Phần sau đây trình bày 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 tìm hiểu cách sử dụng báo cáo:

Để tìm hiểu cách tập trung vào những điều quan trọng đối với quy trình làm việc của bạn:

Cách tìm hiểu về các thẻ Từ dưới lên, Cây cuộc gọi và Nhật ký sự kiện:

Cách phân tích báo cáo:

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: