Bắt đầu từ tập dữ liệu vào tháng 3 năm 2024, Báo cáo trải nghiệm người dùng trên Chrome (CrUX) sẽ có chỉ số navigation_types. Điều 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 kiểu điều hướng khác nhau 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 hiểu tần suất tương đối của các kiểu điều hướng này. Ví dụ: khi một quá trình điều hướng sử dụng tính năng tiến tới (bfcache), việc này thường dẫn đến việc điều hướng gần như ngay lập tức. Điều này được phản ánh qua các chỉ số LCP và FCP rất nhỏ, cũng như giảm các chỉ số CLS và INP.
Bằng cách đưa ra bảng phân tích kiểu điều hướng, chúng tôi hy vọng sẽ khuyến khích chủ sở hữu trang web nhận thức rõ hơn về các kiểu điều hướng dùng trên trang web của họ, đồng thời tìm cách khuyến khích một số kiểu điều hướng nhanh hơn bằng cách xem xét 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 Nhật ký CrUX (ban đầu có nhật ký 3 tuần và tăng mức độ phù hợp hằng tuần lên toàn bộ trong 6 tháng tới), tập dữ liệu CrUX BigQuery mới nhất và Trang tổng quan CrUX. Việc có nhật ký này cũng giúp chủ sở hữu trang web xem được các thay đổi về mứ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ụ: xoá tính năng chặn bfcache). Phần 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:
| Loại | Nội dung mô tả |
|---|---|
navigate |
Một lượt tải trang không phù hợp với bất kỳ danh mục nào khác. |
navigate_cache |
Một lượt tải trang mà tài nguyên chính (tài liệu HTML chính) được phân phát từ bộ nhớ đệm HTTP. Các trang web thường tận dụng chức năng lưu vào bộ nhớ đệm cho các tài nguyên phụ, nhưng tài liệu HTML chính thường được lưu vào bộ nhớ đệm ít hơn đáng kể. Khi có thể, điều này có thể mang lại sự cải thiện đáng kể về hiệu suất nhờ khả năng được lưu vào bộ nhớ đệm cục bộ và ở CDN. |
reload |
Người dùng đã tải lại trang, bằng cách nhấn nút tải lại, bằng cách nhấn Enter vào thanh địa chỉ hoặc huỷ một thẻ đóng. Việc tải lại trang thường dẫn đến việc xác thực lại máy chủ để kiểm tra xem trang chính đã thay đổi hay chưa. Tỷ lệ phần trăm tải lại trang ở mức cao có thể cho biết người dùng đang thất vọng. |
restore |
Trang này đã được tải lại sau khi trình duyệt khởi động lại hoặc một thẻ đã bị xoá vì lý do bộ nhớ. Đối với Chrome trên Android, các sự kiện này được báo cáo là reload. |
back_forward |
Điều hướng lịch sử, có nghĩa là trang đã được xem và trả lại gần đây. Khi lưu vào bộ nhớ đệm chính xác, đây sẽ là những trải nghiệm nhanh một cách hợp lý nhưng vẫn yêu cầu trang được xử lý và JavaScript phải được thực thi — cả hai điều mà bfcache đều tránh được. |
back_forward_cache |
Thao tác điều hướng lịch sử được phân phát từ bfcache. Tối ưu hoá các trang của bạn để tận dụng bộ nhớ đệm của bfcache sẽ mang lại trải nghiệm nhanh hơn. Các trang web nên tìm cách xoá trình chặn bfcache để cải thiện tỷ lệ điều hướng trong danh mục này. |
prerender |
Trang đã được kết xuất trước, điều này (tương tự như bfcache) có thể dẫn đến việc tải trang gần như ngay lập tức. |
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).
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 rất hạn chế. Đối với nhiều nguồn gốc và URL, chỉ số navigation_types sẽ không có sẵn do không có đủ lưu lượng truy cập đủ điều kiện. Xem phương pháp CrUX để biết thêm thông tin.
Ngoài ra, CrUX không thể cung cấp thông tin 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 thêm số lượng nguồn gốc và URL có trong CrUX.
Các trang web nên triển khai tính 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í, chẳng hạn như kiểu điều hướng. Xin lưu ý rằng bạn có thể thấy sự khác biệt về các kiểu điều hướng trong những giải pháp này tuỳ thuộc vào các loại được báo cáo và những 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 lại khác với dữ liệu rum của tôi?.
rum cũng có thể cung cấp thông tin chi tiết hơn về các vấn đề cụ thể liên quan đến hiệu suất. Ví dụ: mặc dù CrUX có thể ngụ ý rằng cần phải cải thiện khả năng đáp ứng điều kiện của bfcache nhưng bfcache notrecoveryReasons API có thể thông báo 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 API CrUX
Để xem các loại điều hướng trong API, hãy đưa chỉ số navigation_types vào yêu cầu hoặc không đặt chỉ số để bao gồm tất cả các chỉ số:
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 với các phân số của lượt 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 (cho biết 0% tải trang) đến 1.0, (cho biết 100% tải trang) cho khoá nhất định.
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 – tính đến ngày 2 tháng 4 năm 2024, có 6,77% các thao tác điều hướng (tải trang) được phân phát từ 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á quá trình tải trang. Xin lưu ý rằng đối với khoá đã cho bất kỳ (bao gồm cả tổ hợp URL hoặc nguồn gốc và hệ số hình dạng), các phân số navigation_types sẽ có tổng bằng khoảng 1.
Các loại điều hướng trong API Lịch sử CrUX
API Lịch sử CrUX có thể cung cấp một 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 cho mỗi phân số, giúp trực quan hoá 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 nhật ký CrUX của chúng tôi trình bày 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ỉ có trong 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 điền đầy đủ, dữ liệu này sẽ áp dụng cho toàn bộ 25 kỳ thu thập. Việc trực quan hoá nhật ký này giúp bạn có thể xác nhận rằng biện pháp tối ưu hoá đã có hiệu quả hoặc đã sụt giảm. Điều này đặc biệt đúng với cấu hình bộ nhớ đệm HTTP, nhằm tối ưu hoá một trang để bfcache và kết xuất trước.
Các loại điều hướng trong CrUX BigQuery
Các bảng CrUX BigQuery hiện bao gồm một bản ghi navigation_type. Bản ghi này được tạo cho từng loại, trong khi chế độ xem cụ thể của bản tóm tắt bao gồm nhiều cột navigation_types_* (một cột cho mỗi 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ố hiệu suất web. Trong ví dụ này, chúng tôi có thể trình bày 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 nhanh hoặc hiệu quả.
Ví dụ: chúng tôi đã xem xét phân số back_forward_cache và mối tương quan của nó với tần suất các trang được tải ngay (instant_lcp_density được định nghĩa là LCP <= 200 mili giây) và tần suất LCP tốt được nhìn thấy (good_lcp_density được định nghĩa 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 (p=0,87) (thể hiện trong biểu đồ sau), và 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ất rõ. Ở đâ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.202403tại đây (xem mệnh đềFROM) và lọcform_factorchophone, cũng như chọn các nguồn gốc có thứ hạng mức độ phổ biến <= 10000 cho 10.000 nguồn gốc phổ biến nhất (xem mệnh đềWHERE). - Khi truy vấn chỉ số
navigation_typestrong BigQuery, bạn cần phải chia cho tổng các phân sốnavigation_types, vì chúng sẽ chỉ cộng với mỗi nguồn gốc, chứ không cộng lại theo tổ hợp (nguồn gốc, kiểu dáng). - Không phải nguồn gốc nào cũng có
navigation_types, vì vậy, bạn nên sử dụngSAVE_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àn vật liệu
Khi có đủ thông tin tóm tắt, việc truy vấn các bảng cụ thể hoá thường sẽ tiện hơn (và rẻ hơn). Ví dụ: truy vấn sau đây 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 sẽ không có tổng bằng 1,0 trên mỗi hàng, vì vậy bạn cần phải chia từng phân số cho tổng kết quả mà truy vấn cần được diễn giải.
Lý do là vì các phân số navigation_type trong chrome-ux-report.materialized.device_summary (chẳng hạn như mật độ biểu đồ) cộng thêm tối đa 1.0 cho mỗi nguồn gốc thay vì cho mỗi nguồn gốc và thiết bị theo ngày. Nhờ đó, bạn có thể xem sự phân bổ 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
device |
navigation_types_back_forward |
|---|---|
phone |
0.0663 |
desktop |
0.0179 |
tablet |
0.0009 |
Trong kết quả truy vấn này, các phân số phản ánh tỷ lệ phần trăm tải trang cho nguồn gốc https://www.google.com: 6,63% 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 để bàn và 0,09% máy tính bảng.
Tỷ lệ phần trăm back_forward trên phone cao hơn đáng kể cho thấy chúng ta có thể thử tối ưu hoá các lượt tải trang này để chúng có thể được phân phát từ bfcache.
Tuy nhiên, điều quan trọng cũng cần phải xem xét là phần nào số lượt tải trang đã được phân phát bởi bfcache, tức là tỷ lệ truy cập bfcache. Cụm từ tìm kiếm sau đây cho thấy rằng nguồn gốc cụ thể này có thể đã được tối ưu hoá hiệu quả, với tỷ lệ truy cập > 60% cho đ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
device |
back_forward_cache_hit_rate |
|---|---|
phone |
0.6239 |
desktop |
0.6805 |
tablet |
0.7353 |
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à là do người dùng phản ánh nhiều hơn cách người dùng quay lại và chuyển tiếp trên điện thoại.
Các loại điều hướng trong Trang tổng quan CrUX
Cách dễ nhất để xem các loại điều hướng là trong Trang tổng quan CrUX. Bạn có thể truy cập vào Trang tổng quan này để tìm nguồn gốc từ liên kết này. Như bạn có thể thấy trong ảnh chụp màn hình sau đây, ban đầu chỉ có dữ liệu của một tháng nhưng theo thời gian, nhật ký sẽ lấp đầy, cho phép bạn thấy các thay đổi về loại dữ liệu qua từng tháng.
Như bạn cũng có thể thấy, chúng tôi đã đánh dấu các loại điều hướng nhanh hơn mà điểm tham quan sẽ 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 rằng bảng chi tiết về các loại điều hướng trong CrUX vẫn hữu ích, đồng thời giúp bạn hiểu rõ cũng như 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ả việc lưu vào bộ nhớ đệm HTTP, bfcache và kết xuất trước, các trang web có thể đạt được tốc độ tải trang nhanh hơn nhiều so với tải trang đòi hỏi các chuyến quay lại máy chủ.
Chúng tôi cũng rất vui mừng được cung cấp dữ liệu có sẵn ở tất cả các điểm truy cập CrUX để người dùng có thể sử dụng dữ liệu theo ý muốn và xem bảng phân tích 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 tính năng này trên mạng xã hội hoặc trên nhóm thảo luận về CrUX.