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:
Loại | Mô tả |
---|---|
navigate |
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 trong đó 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ể, tính năng này có thể giúp cải thiện hiệu suất đáng kể nhờ việc có thể lưu vào bộ nhớ đệm cục bộ và tại một 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 trên thanh địa chỉ hoặc huỷ thao tác đóng tab. Các lần tải lại trang thường dẫn đến việc xác thực lại trở lại máy chủ để kiểm tra xem trang chính có thay đổi hay không. Tỷ lệ phần trăm tải lại trang cao có thể cho thấy người dùng thất vọng. |
restore |
Trang được tải lại sau khi trình duyệt khởi động lại hoặc thẻ đã bị xoá vì lý do liên quan đến bộ nhớ. Đối với Chrome trên Android, các biến này được báo cáo là reload . |
back_forward |
Điều hướng lịch sử, nghĩa là trang đã được xem và quay trở lại gần đây. Với việc 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 được thực thi – cả hai điều này bfcache sẽ tránh được. |
back_forward_cache |
Thao tác điều hướng nhật ký được cung cấp từ bfcache. Tối ưu hóa các trang của bạn để tận dụng bfcache sẽ mang lại trải nghiệm nhanh hơn. Các trang web nên tìm cách loại bỏ các trình chặn bfcache để cải thiện tỷ lệ thao tác trong danh mục này. |
prerender |
Trang đã được kết xuất trước, tương tự như bfcache. Điều này 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).
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:
![Biểu đồ thanh xếp chồng cho thấy nhật ký của các loại điều hướng trong 3 tuần, trong đó phần lớn thao tác điều hướng là "điều hướng" và không có thay đổi lớn nào trong 3 tuần.](https://developer.chrome.com/static/blog/crux-navigation-types/image/navigation-types-history-chart.png?authuser=19&hl=vi)
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).
![Biểu đồ tương quan cho thấy mối tương quan chặt chẽ giữa tỷ lệ tải trang tức thì và tỷ lệ tải trang bfcache](https://developer.chrome.com/static/blog/crux-navigation-types/image/instant-lcp-bfcache-correlation.png?authuser=19&hl=vi)
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ọcform_factor
để tìmphone
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ụ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ả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
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 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
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à 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 chụp màn hình Phân phối các loại điều hướng trong Trang tổng quan CrUX cho thấy dữ liệu trong một tháng.](https://developer.chrome.com/static/blog/crux-navigation-types/image/crux-dashboard-navigation-types.png?authuser=19&hl=vi)
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.