Các loại điều hướng hiện đã có trong CrUX

Barry Pollard

Johannes Henkel

Kể từ tập dữ liệu tháng 3 năm 2024, Báo cáo trải nghiệm người dùng trên Chrome (CrUX) sẽ bao gồm chỉ số navigation_types. Phương diện này cung cấp số liệu thống kê tổng hợp về các loại điều hướng tải trang cho phương diện được truy vấn.

Các loại điều hướng khác nhau sẽ dẫn đến sự khác biệt về chỉ số hiệu suất, vì vậy, khi xem xét hiệu suất của trang web, bạn nên tìm hiểu tần suất tương đối của các loại điều hướng này. Ví dụ: khi một thao tác điều hướng sử dụng lệnh tiến lên trước (bfcache), điều này thường dẫn đến một thao tác điều hướng gần như ngay lập tức, được phản ánh trong các chỉ số LCP và FCP rất nhỏ, đồng thời các chỉ số CLS và INP bị giảm.

Bằng cách cung cấp bảng chi tiết về loại điều hướng, chúng tôi hy vọng sẽ khuyến khích chủ sở hữu trang web hiểu rõ hơn về các loại điều hướng được sử dụng trên trang web của họ, đồng thời khuyến khích một số loại nhanh hơn bằng cách xem xét chế độ thiết lập bộ nhớ đệm, trình chặn bfcache và kết xuất trước.

Chỉ số navigation_types có trong API CrUX hằng ngày, API Lịch sử CrUX (ban đầu sẽ cung cấp nhật ký 3 tuần và sẽ tăng lên theo từng tuần đến mức độ phù hợp đầy đủ trong 6 tháng tiếp theo), tập dữ liệu CrUX BigQuery mới nhất và Trang tổng quan CrUX. Việc ghi nhật ký cũng giúp chủ sở hữu trang web xem được những thay đổi về việc sử dụng loại điều hướng theo thời gian. Điều này có thể cho phép theo dõi các điểm cải tiến (ví dụ: loại bỏ tình trạng chặn bfcache). Dữ liệu này cũng có thể giúp giải thích các thay đổi về chỉ số ngay cả khi không có thay đổi nào đối với trang web.

Có những loại điều hướng nào trong CrUX?

CrUX phân biệt các loại điều hướng sau đây trong bảng sau:

Trong một số trường hợp, một lượt tải trang có thể là sự kết hợp của nhiều kiểu điều hướng. Trong trường hợp đó, CrUX sẽ báo cáo kết quả trùng khớp đầu tiên theo thứ tự đảo ngược của bảng trước (từ dưới lên trên).

Các điểm hạn chế của các loại điều hướng trong CrUX

Vì CrUX là một tập dữ liệu công khai, nên mức độ chi tiết của báo cáo về CrUX bị giới hạn. Đối với nhiều nguồn gốc và URL, chỉ số navigation_types không có sẵn do không đủ lưu lượng truy cập đủ điều kiện. Hãy xem phương pháp CrUX để biết thêm thông tin.

Ngoài ra, CrUX không thể cung cấp bảng chi tiết về các chỉ số khác theo loại điều hướng, vì điều này sẽ làm giảm hơn nữa số lượng nguồn gốc và URL có trong CrUX.

Các trang web nên triển khai chức năng Giám sát người dùng thực (RUM) của riêng mình để có thể phân chia lưu lượng truy cập theo các tiêu chí như loại điều hướng. Lưu ý rằng bạn có thể thấy sự khác biệt về các loại điều hướng trong các giải pháp này, tuỳ thuộc vào loại được báo cáo và loại lượt xem trang được đưa vào báo cáo. Hãy xem bài viết Tại sao dữ liệu CrUX khác với dữ liệu trong rum?.

RUM cũng có thể cung cấp mức độ chi tiết lớn hơn về các vấn đề hiệu suất cụ thể. Ví dụ: mặc dù CrUX có thể ngụ ý rằng việc cải thiện điều kiện để đủ điều kiện sử dụng bộ nhớ đệm bfcache là đáng tin cậy, nhưng bfcache notCacheReasons API có thể cho biết chính xác lý do không thể phân phát một lượt tải trang cụ thể từ bfcache.

Các loại điều hướng trong CrUX API

Để xem các loại điều hướng trong API, hãy thêm chỉ số navigation_types vào yêu cầu hoặc đừng đặt chỉ số để tất cả các chỉ số đều được đưa vào:

export API_KEY="[YOUR_API_KEY]"
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=$API_KEY" \
  --header 'Content-Type: application/json' \
  --data '{"origin": "https://example.com", metrics: ["navigation_types"]}'

Định dạng yêu cầu được mô tả chi tiết hơn trong tài liệu về API, bao gồm cả nội dung giải thích về cách lấy khoá API và hướng dẫn về API. Thao tác này sẽ trả về một đối tượng như sau:

{
  "record": {
    "key": {  "origin": "https://example.com" },
    "metrics": {
      "navigation_types": {
        "fractions": {
          "navigate": 0.5335,
          "navigate_cache": 0.2646,
          "reload": 0.0885,
          "restore": 0.0023,
          "back_forward": 0.0403,
          "back_forward_cache": 0.0677,
          "prerender": 0.0031
        }
      }
    },
    "collectionPeriod": {
      "firstDate": { "year": 2024, "month": 3, "day": 6 },
      "lastDate": { "year": 2024, "month": 4, "day": 2 }
    }
  }
}

Trong phản hồi, CrUX báo cáo chỉ số navigation_types dưới dạng đối tượng bằng các phân số tải trang cho từng loại điều hướng. Mỗi phân số là một giá trị từ 0.0 (tức là 0% số lượt tải trang) đến 1.0 (tức là 100% số lượt tải trang) cho khoá đã cho.

Qua phản hồi này, bạn có thể thấy rằng trong khoảng thời gian thu thập bắt đầu từ ngày 6 tháng 3 năm 2024 – cho đến ngày 2 tháng 4 năm 2024 – 6, 77% lượt điều hướng (lượt tải trang) được phân phát qua bfcache của trình duyệt. Tương tự, một số phân số khác có thể giúp xác định cơ hội để tối ưu hoá việc tải trang. Xin lưu ý rằng đối với khoá nhất định (bao gồm cả tổ hợp URL hoặc nguồn gốc và hệ số hình dạng), phân số navigation_types sẽ có tổng bằng khoảng 1.

Các loại điều hướng trong API nhật ký CrUX

API Lịch sử CrUX có thể cung cấp chuỗi thời gian cho các loại điều hướng với tối đa 25 điểm dữ liệu trên mỗi phân số, cho phép hiển thị các phân số này theo thời gian. Để thay đổi yêu cầu của bạn từ API CrUX sang API Lịch sử CrUX, hãy chạy yêu cầu đó dựa trên điểm cuối queryHistoryRecord thay vì queryRecord. Ví dụ: Colab lịch sử CrUX của chúng tôi biểu thị chỉ số navigation_types dưới dạng các thanh xếp chồng:

Trong ảnh chụp màn hình trước đó, nhật ký chỉ xuất hiện cho 3 khoảng thời gian thu thập (mỗi khoảng thời gian 28 ngày, cách nhau 7 ngày). Sau khi hệ thống điền đầy đủ thông tin, dữ liệu này sẽ bao gồm tất cả 25 khoảng thời gian thu thập. Việc trực quan hoá lịch sử này giúp bạn có thể xác nhận rằng các biện pháp tối ưu hoá đã có hiệu quả hay đã giảm đi. Điều này đặc biệt đúng với cấu hình bộ nhớ đệm HTTP, tối ưu hoá một trang cho bfcache và kết xuất trước.

Các loại điều hướng trong CrUX BigQuery

Bảng BigQuery CrUX hiện bao gồm bản ghi navigation_type (được tạo theo từng loại), còn chế độ xem cụ thể hóa tóm tắt bao gồm nhiều cột navigation_types_* (mỗi cột cho một loại).

Bảng chi tiết

Giản đồ bảng chi tiết trong CrUX BigQuery cung cấp biểu đồ chi tiết cho các chỉ số về hiệu suất web. Biểu đồ này giúp chúng tôi trình bày trong bản phân tích ví dụ này về mối tương quan giữa các loại điều hướng cụ thể với hiệu suất tải tức thì hoặc hiệu suất tải tốt.

Ví dụ: chúng tôi đã xem xét phân số back_forward_cache và mối tương quan của phân số này với tần suất các trang được tải tức thì (instant_lcp_density được xác định là LCP <= 200 mili giây) và tần suất thấy LCP tốt (good_lcp_density được xác định là LCP <= 2500 mili giây). Chúng tôi đã quan sát thấy mối tương quan thống kê mạnh mẽ giữa back_forward_cache và instant_lcp_density (= 0, 87) (được thể hiện trong biểu đồ sau) và có mối tương quan vừa phải giữa back_forward_cache và good_lcp_density (= 0, 29).

Colab cho bản phân tích này được nhận xét rõ ràng; Ở đây, chúng ta chỉ thảo luận về truy vấn trích xuất các phân số navigation_types cho 10 nghìn nguồn gốc phổ biến nhất từ các bảng chi tiết trong CrUX BigQuery:

• Chúng ta truy cập vào bảng all.202403 tại đây (xem mệnh đề FROM) rồi lọc form_factor để tìm phone và chọn những nguồn gốc có thứ hạng mức độ phổ biến <= 10000 cho 10 nghìn nguồn gốc phổ biến nhất (xem mệnh đề WHERE).
• Khi truy vấn chỉ số navigation_types trong BigQuery, bạn cần chia cho tổng các phân số navigation_types, vì các phân số này sẽ chỉ cộng lại theo nguồn gốc, chứ không phải theo tổ hợp (nguồn gốc, hệ số hình dạng).
• Không phải mọi nguồn gốc đều sẽ có navigation_types, vì vậy, bạn nên sử dụng SAVE_DIVIDE.

WITH tmp AS (
  SELECT
    origin,
    SUM(navigation_types.navigate.fraction) AS navigate,
    SUM(navigation_types.navigate_cache.fraction) AS navigate_cache,
    SUM(navigation_types.reload.fraction) AS reload,
    SUM(navigation_types.restore AS restore,
    SUM(navigation_types.back_forward.fraction) AS back_forward,
    SUM(navigation_types.back_forward_cache.fraction) AS back_forward_cache,
    SUM(navigation_types.prerender.fraction) AS prerender,
    SUM(navigation_types.navigate.fraction
      + navigation_types.navigate_cache.fraction
      + navigation_types.reload.fraction
      + navigation_types.restore.fraction
      + navigation_types.back_forward.fraction
      + navigation_types.back_forward_cache.fraction
      + navigation_types.prerender.fraction) AS total
  FROM
    `chrome-ux-report.all.202403`
  WHERE
    experimental.popularity.rank <= 10000 AND
    form_factor.name = 'phone'
  GROUP BY
    origin
)

SELECT
  origin,
  ROUND(SAFE_DIVIDE(navigate, total), 4) AS navigate,
  ROUND(SAFE_DIVIDE(navigate_cache, total), 4) AS navigate_cache,
  ROUND(SAFE_DIVIDE(reload, total), 4) AS reload,
  ROUND(SAFE_DIVIDE(restore, total), 4) AS restore,
  ROUND(SAFE_DIVIDE(back_forward, total), 4) AS back_forward,
  ROUND(SAFE_DIVIDE(back_forward_cache, total), 4) AS back_forward_cache,
  ROUND(SAFE_DIVIDE(prerender, total), 4) AS prerender
FROM
  tmp

Bảng cụ thể

Khi đã có một bản tóm tắt đầy đủ, việc truy vấn các bảng được cụ thể hoá thường sẽ phù hợp hơn (và rẻ hơn). Ví dụ: truy vấn sau trích xuất dữ liệu navigation_types có sẵn từ bảng chrome-ux-report.materialized.device_summary. Bảng này được khoá theo tháng, nguồn gốc và loại thiết bị.

SELECT
  yyyymm,
  device,
  navigation_types_navigate,
  navigation_types_navigate_cache,
  navigation_types_reload,
  navigation_types_restore,
  navigation_types_back_forward,
  navigation_types_back_forward_cache,
  navigation_types_prerender
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://example.com' AND
  navigation_types_navigate IS NOT NULL
ORDER BY
  yyyymm DESC,
  device DESC

Lưu ý rằng các phân số này không cộng lại thành 1,0 trên mỗi hàng, do đó cần phải chia từng phân số cho tổng kết quả mà truy vấn sẽ được diễn giải.

Lý do là các phân số navigation_type trong chrome-ux-report.materialized.device_summary (chẳng hạn như mật độ biểu đồ) sẽ thêm tối đa 1.0 trên mỗi nguồn gốc thay vì theo nguồn gốc và thiết bị mỗi ngày. Nhờ đó, bạn có thể xem thông tin phân bổ của loại điều hướng trên các thiết bị:

SELECT
  device,
  navigation_types_back_forward
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

Trong kết quả truy vấn này, các phân số phản ánh tỷ lệ phần trăm số lần tải trang cho nguồn gốc https://www.google.com: 6,63% số lần tải trang này có loại điều hướng back_forward trên điện thoại, 1,79% máy tính và 0,09% máy tính bảng.

Tỷ lệ phần trăm back_forward cao hơn đáng kể trên phone cho thấy chúng ta có thể cố gắng tối ưu hoá những lần tải trang này để có thể phân phát chúng từ bfcache.

Tuy nhiên, một điều cũng quan trọng là phải xem xét tỷ lệ lượt tải trang đã được bfcache phân phát, tức là tỷ lệ lượt truy cập vào bfcache. Truy vấn sau cho thấy rằng nguồn gốc cụ thể này có thể đã được tối ưu hoá tốt, vì > Tỷ lệ lượt truy cập là 60% đối với điện thoại và máy tính.

SELECT
  device,
  navigation_types_back_forward_cache /
    (navigation_types_back_forward + navigation_types_back_forward_cache)
    AS back_forward_cache_hit_rate
FROM
  chrome-ux-report.materialized.device_summary
WHERE
  origin = 'https://www.google.com' AND
  yyyymm = 202403

Vì vậy, có vẻ như tốc độ back_forward cao trên điện thoại không phải là do mức sử dụng bfcache ít hơn, mà chủ yếu phản ánh cách người dùng điều hướng qua lại và chuyển tiếp nhiều hơn trên điện thoại.

Các loại thao tác trên Trang tổng quan CrUX

Cách dễ nhất để xem các loại điều hướng là truy cập vào Trang tổng quan CrUX. Bạn có thể truy cập vào trang này để tìm nguồn gốc qua đường liên kết này. Như bạn có thể thấy trong ảnh chụp màn hình bên dưới, ban đầu chỉ có dữ liệu của một tháng nhưng theo thời gian, nhật ký sẽ đầy đủ, cho phép bạn thấy các thay đổi về loại theo tháng.

Như bạn cũng có thể thấy, chúng tôi đã làm nổi bật các loại điều hướng nhanh hơn mà điểm tham quan nên tìm cách tối ưu hóa ở đầu trang này của Trang tổng quan.

Kết luận

Chúng tôi hy vọng bạn thấy bảng chi tiết về các loại điều hướng trong CrUX có thể giúp ích cho bạn, đồng thời giúp bạn hiểu rõ và tối ưu hoá hiệu suất của trang web. Bằng cách đảm bảo sử dụng hiệu quả chức năng lưu vào bộ nhớ đệm của HTTP, bfcache và kết xuất trước, các trang web có thể đạt tốc độ tải trang nhanh hơn nhiều so với những lần tải trang yêu cầu quay lại máy chủ.

Chúng tôi cũng rất sẵn sàng cung cấp dữ liệu ở tất cả các điểm truy cập CrUX để người dùng có thể sử dụng dữ liệu như họ muốn và xem bảng chi tiết loại theo URL cho những điểm truy cập được hiển thị trong API CrUX.

Chúng tôi rất mong nhận được ý kiến phản hồi về việc bổ sung này cho CrUX trên mạng xã hội hoặc trên nhóm thảo luận CrUX.