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
Sofia Emelianova
Sofia Emelianova
GitHub

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:

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

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

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

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

    2. Trong bảng ánh xạ, hãy nhập URL phát triển và URL sản xuất 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ụ: việc liên kết 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 được 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. 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 đó cho bạn thấy dữ liệu trường 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 trường sau khi thiết lập, hãy nhấp vào Dữ liệu trường > Định cấu hình

    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.

    Khoảng thời gian thu thập dữ liệu trường sau khi dữ liệu được tìm nạp.

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

  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.

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

    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. Để 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 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ị.
    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 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ể Tắt bộ nhớ đệm mạng trong cùng một 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ự 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:

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:

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

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:

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:

Cách tập trung vào những việc quan trọng trong quy trình làm việc:

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:

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

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: