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 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 các nút thắt cổ chai tiềm ẩn về hiệu suất và những cách bạn có thể 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 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 Command (Lệnh) bằng cách nhấn:
  3. macOS: Command+Shift+P
  4. Windows, Linux, ChromeOS: Ctrl+Shift+P Trình đơn lệnh có
  5. 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.

Quan sát trực tiếp các chỉ số quan trọng chính của 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 điều khiển Hiệu suất cũng sẽ ghi lại Lượt tương tác đến lượt hiển thị tiếp theo (INP) cục bộ và điểm số của lượt tương tác đó. Ngoài LCP và CLS, điểm số này sẽ cung cấp cho bạn thông tin tổng quan đầy đủ về Các chỉ số quan trọng về 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.

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 một chỉ số, hãy di chuột qua giá trị 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 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 trang web với các chỉ số cục bộ.

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 mục 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 thực địa 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 công khai:

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

    2. Trong bảng ánh xạ, hãy nhập URL phát triển và URL phát hành công khai rồi nhấp vào +.

      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ụ: mối liên kết của http://localhost:8080 với https://example.com sẽ hiển thị dữ liệu trường 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 thực địa, bạn có thể bật Luôn hiện dữ liệu thực địa cho URL bên dưới và cung cấp một URL. Trước tiên, bảng điều khiển Hiệu suất sẽ tìm nạp dữ liệu trường cho URL này, sau đó hiển thị dữ liệu trường này cho bạn bất kể bạn chuyển đến trang nào.

      Để thay đổi chế độ cài đặt tính năng 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 bạn thiết lập tính năng tìm nạp dữ liệu trường, bảng điều khiển Hiệu suất sẽ cho bạn thấy thông tin so sánh giữa điểm số của 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 dữ liệu trong mục Dữ liệu trường ở bên phải.

    Khoảng thời gian thu thập dữ liệu trường sau khi dữ liệu đượ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

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

    Mở rộng phần "Xem xét các điều kiện kiểm thử cục bộ" 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 nên sử dụng kích thước màn hình máy tính phổ biến và giảm tốc CPU và mạng.

  2. Cách so khớp 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 Thành phần.
    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ố 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. Trong phần Environment settings (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 thành 20x slowdown (Hệ số giảm tốc CPU gấp 20 lần). Bạn cũng có thể nhớ Tắt bộ nhớ đệm mạng trong cùng mục.

  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ộ 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 số của chỉ số hiện đã tương tự như điểm số mà người dùng của bạn trải nghiệm. Do đó, các mục 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 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 chụp

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 vào 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:

Để tìm hiểu cách sử dụng báo cáo này, hãy làm như sau:

Để 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:

Để 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:

Để tìm hiểu cách phân tích báo cáo này, hãy làm như sau:

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: