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 ra các nút thắt cổ chai về hiệu suất tiềm ẩn 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ở Công cụ cho nhà phát triển và 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 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 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 với
  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 Hiệu suất, bảng này sẽ ghi lại và cho bạn thấy các chỉ số về Nội dung lớn nhất hiển thị (LCP) và Điểm số tổng hợp về mức thay đổi bố cục (CLS) tại địa phương cho bạn biết điểm số của trang (tốt, cần cải thiện hay 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 Hiệu suất cung cấp danh sách các lượt tương tác được ghi nhận trong ba 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 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 mục Các bước tiếp theo.

  2. Trong hộp thoại Định cấu hình quy trình tìm nạp dữ liệu trường, hãy lưu ý thông tin 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 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 +.

      Liên kết giữa nguồn gốc phát triển và nguồn gốc phát triển 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 của trường, bạn có thể bật Luôn hiển thị dữ liệu trường cho URL dưới đây 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 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 chỉ số, hãy di chuột qua giá trị của chỉ số đó để xem chú thích.

Định cấu hình môi trường của bạn để 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 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 của bạ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 để bàn để duyệt web. Để đảm bảo so sánh điểm chỉ số địa phương với dữ liệu trường chính xác, bạn có thể chọn Máy tính từ mục Dữ liệu trường > Danh sách thả xuống Thiết bị.
    3. Trong phần Cài đặt môi trường, đặt danh sách thả xuống Network (Mạng), ví dụ: Fast 4G và CPU (Tốc độ giảm tốc 20 lần) thành 20x giảm tốc độ. 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 người dùng thực tế.

    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 đó, mục Xem xét điều kiện thử nghiệm tại địa phương đã biến mất khỏi các thẻ chỉ số.

Bằng cách đó, bạn có thể bắt đầu cải thiện Chỉ số quan trọng chính của trang web cho trang web của mình:

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

Cài đặt ghi cho phép bạn thay đổi cách Công cụ cho nhà phát triển ghi lại bản ghi hiệu suất và có thể cung cấp cho bạn thêm thông tin 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 tùy chọn sau từ trình đơn Cài đặt ghi lại:

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:

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

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