يشمل تقرير تجربة المستخدم على Chrome (CrUX) مقياس navigation_types
، بدءًا من مجموعة بيانات آذار (مارس) 2024. يوفِّر ذلك إحصاءات مجمّعة عن أنواع التنقّل في عمليات تحميل الصفحات للسمة التي تم طلبها.
تؤدّي أنواع التنقّل المختلفة إلى اختلافات في مقاييس الأداء، لذا عند مراجعة أداء موقعك الإلكتروني، من المفيد أن تفهم معدّل التكرار النسبي لهذه الأنواع المختلفة. على سبيل المثال، عندما يستخدم التنقّل ميزة الرجوع للأمام (bfcache)، يؤدي ذلك عادةً إلى انتقال شبه فوري، وهو ما ينعكس في مقاييس LCP وFCP صغيرة جدًا وتقليل مقاييس متغيّرات التصميم التراكمية (CLS) ومقياس INP.
من خلال شرح تفاصيل نوع التنقّل، نأمل أن نشجع مالكي المواقع الإلكترونية على أن يكونوا أكثر وعيًا بأنواع التنقّل المستخدمة على مواقعهم الإلكترونية، وأن نشجّع على بعض الأنواع الأسرع من خلال الاطّلاع على إعداد التخزين المؤقت وأدوات حظر التخزين المؤقت والعرض المُسبَق.
يتوفّر المقياس navigation_types
في واجهة برمجة تطبيقات CrUX API اليومية وCrUX History API (مع توفّر سجلّ لمدة 3 أسابيع بشكل مبدئي، ويتزايد التغطية أسبوعيًا إلى تغطية كاملة خلال الأشهر الستة المقبلة)، وأحدث مجموعة بيانات CrUX BigQuery ولوحة بيانات CrUX. يتيح هذا السجلّ أيضًا لمالكي المواقع الإلكترونية الاطّلاع على التغييرات التي تطرأ على استخدام نوع التنقّل بمرور الوقت. قد يسمح ذلك بتتبُّع التحسينات (على سبيل المثال، إزالة حظر ذاكرة التخزين المؤقت للصفحات). ويمكن أن يساعد أيضًا في شرح التغييرات في المقاييس حتى في حال عدم إجراء أي تغييرات على مواقعهم الإلكترونية.
ما هي أنواع التنقّل المتوفّرة في تقرير تجربة المستخدم على Chrome؟
يميز CrUX أنواع التنقل التالية في الجدول التالي:
النوع | الوصف |
---|---|
navigate |
تحميل صفحة لا يتناسب مع أي من الفئات الأخرى. |
navigate_cache |
تحميل صفحة تم من أجله عرض المورد الرئيسي (مستند HTML الرئيسي) من ذاكرة التخزين المؤقت HTTP. غالبًا ما تستخدم المواقع الإلكترونية التخزين المؤقت للموارد الفرعية، ولكن غالبًا ما يتم تخزين مستند HTML الرئيسي في ذاكرة التخزين المؤقت بمعدل أقل بكثير. وعندما يكون ذلك ممكنًا، يمكن أن يؤدي إلى تحسينات ملحوظة في الأداء من إمكانية التخزين المؤقت محليًا وعلى شبكة توصيل المحتوى (CDN). |
reload |
أعاد المستخدم تحميل الصفحة، إما بالضغط على زر إعادة التحميل، أو بالضغط على مفتاح Enter في شريط العناوين، أو عن طريق التراجع عن إغلاق علامة التبويب. غالبًا ما تؤدي عمليات إعادة تحميل الصفحة إلى إعادة التحقق من الصفحة إلى الخادم للتحقق مما إذا كانت الصفحة الرئيسية قد تغيرت أم لا. وقد تشير نسبة كبيرة من عمليات إعادة تحميل الصفحة إلى شعور المستخدمين بالإحباط. |
restore |
تمت إعادة تحميل الصفحة بعد إعادة تشغيل المتصفح، أو علامة تبويب تمت إزالتها لأسباب تتعلق بالذاكرة. وبالنسبة إلى Chrome على نظام التشغيل Android، يتم الإبلاغ عن هذه العناوين باسم reload بدلاً من ذلك. |
back_forward |
التنقل في السجل، مما يعني أنه تم عرض الصفحة وإعادتها إليها مؤخرًا. باستخدام التخزين المؤقت الصحيح، من المفترض أن تكون هذه التجارب سريعة بشكل معقول ولكن لا تزال تتطلب معالجة الصفحة وتنفيذ JavaScript، وكلاهما يتجنب ميزة bfcache. |
back_forward_cache |
التنقّل في السجلّ الذي تم عرضه من خلال "التخزين المؤقت للصفحات". ومن المفترض أن يؤدي تحسين صفحاتك للاستفادة من ميزة "التخزين المؤقت للصفحات" إلى توفير تجارب أسرع. يجب أن تسعى المواقع الإلكترونية إلى إزالة أدوات حظر ذاكرة التخزين المؤقت للصفحات بهدف تحسين النسبة المئوية لعمليات التنقّل في هذه الفئة. |
prerender |
تم عرض الصفحة مسبقًا، ما قد يؤدي إلى إجراء عمليات تحميل للصفحات بشكل فوري تقريبًا، وهو ما يشبه ميزة "التخزين المؤقت للصفحات". |
في بعض الحالات، يكون تحميل الصفحة مزيجًا من أنواع تنقّل متعددة. في هذه الحالة، يُعِد تقرير CrUX أول تطابق بترتيب عكسي للجدول السابق (من أسفل إلى أعلى).
حدود أنواع التنقّل في تقرير تجربة المستخدم على Chrome
ونظرًا لأن CrUX هي مجموعة بيانات عامة، فإن دقة إعداد التقارير الخاصة بها تكون محدودة. بالنسبة إلى العديد من المصادر وعناوين URL، لا يتوفّر مقياس navigation_types
بسبب عدم توفّر عدد كافٍ من الزيارات المؤهَّلة. ويمكنك الاطّلاع على منهجية CrUX لمعرفة المزيد من المعلومات.
بالإضافة إلى ذلك، لا يمكن لـ CrUX توفير تفاصيل للمقاييس الأخرى حسب نوع التنقل، لأنّ ذلك من شأنه أن يقلل من عدد المصادر وعناوين URL المتاحة في CrUX.
ننصح المواقع الإلكترونية بتنفيذ عملية "مراقبة المستخدم الفعلي" (RUM) الخاصة بها لتتمكّن من تقسيم عدد الزيارات حسب معايير مختلفة مثل أنواع التنقّل. يُرجى ملاحظة أنّه قد تلاحظ اختلافات في أنواع التنقّل في هذه الحلول بناءً على الأنواع التي تم الإبلاغ عنها ومشاهدات الصفحة المضمّنة. يُرجى الاطّلاع على المقالة لماذا تختلف بيانات CrUX عن بيانات RUM؟.
كما يمكن أن يوفر RUM أيضًا مستوى أكبر من التفاصيل حول مشكلات معينة في الأداء. على سبيل المثال، على الرغم من أنّ CrUX قد تشير ضمنًا إلى أنّه من المفيد تحسين أهلية ميزة "التخزين المؤقت للصفحات"، إلا أنّ واجهة bfcache notRestoredستنs API يمكنها معرفة سبب عدم إمكانية عرض تحميل صفحة معيّنة بشكل دقيق من خلال ميزة "التخزين المؤقت للصفحات".
أنواع التنقّل في واجهة برمجة تطبيقات CrUX API
للاطّلاع على أنواع التنقّل في واجهة برمجة التطبيقات، يجب تضمين المقياس navigation_types
في الطلب أو عدم ضبط مقياس بحيث يتم تضمين جميع المقاييس:
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"]}'
يتم وصف تنسيق الطلب بمزيد من التفصيل في المستندات المتعلّقة بواجهة برمجة التطبيقات، بما في ذلك شرح حول طريقة الحصول على مفتاح واجهة برمجة التطبيقات ودليل واجهة برمجة التطبيقات. سيؤدي ذلك إلى إرجاع كائن مثل هذا:
{
"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 }
}
}
}
وفي الردّ، يسجِّل تقرير CrUX المقياس navigation_types
على أنّه عنصر مع الكسور من عمليات تحميل الصفحات لكل نوع من أنواع التنقّل. ويمثل كل كسر قيمة تتراوح بين 0.0
(يشير إلى 0% من عمليات تحميل الصفحات) إلى 1.0
(يشير إلى 100% من عمليات تحميل الصفحات) للمفتاح المحدّد.
يوضِّح هذا الردّ أنّه خلال فترة جمع البيانات بدءًا من 6 آذار (مارس) 2024، حتى 2 نيسان (أبريل) 2024، وحتى 2 نيسان (أبريل) 2024، تم عرض 6.77% من عمليات التنقّل (عمليات تحميل الصفحات) من خلال ميزة "التخزين المؤقت للصفحات" في المتصفّح. وبالمثل، يمكن أن تساعد بعض الكسور الأخرى في تحديد الفرص المتاحة لتحسينات تحميل الصفحات. تجدر الإشارة إلى أنّه بالنسبة إلى أيّ مفتاح محدّد (بما في ذلك مجموعة من عنوان URL أو المصدر وشكل الجهاز)، ستضيف كسور navigation_types
ما يصل إلى 1.0 تقريبًا.
أنواع التنقّل في واجهة برمجة تطبيقات CrUX History API
يمكن أن توفّر CrUX History API سلسلة زمنية لأنواع التنقّل تتضمّن ما يصل إلى 25 نقطة بيانات لكل كسر، ما يسمح بعرض هذه الكسور بمرور الوقت. لتغيير طلبك من واجهة برمجة تطبيقات CrUX API إلى واجهة برمجة تطبيقات CrUX History API، عليك تنفيذه على نقطة النهاية queryHistoryRecord
بدلاً من queryRecord
. على سبيل المثال، يحوِّل CrUX History Colab المقياس navigation_types
على هيئة أشرطة مكدسة:
![مخطط شريطي مكدس يعرض تاريخ أنواع التنقل على مدار 3 أسابيع، ويكون معظمها من النوع "التنقل" بدون أي تغييرات رئيسية على مدار الأسابيع الثلاثة.](https://developer.chrome.com/static/blog/crux-navigation-types/image/navigation-types-history-chart.png?authuser=7&hl=ar)
في لقطة الشاشة السابقة، لا يتوفّر السجلّ إلا لمدة 3 فترات جمع (28 يومًا لكل فترة، و7 أيام تفصل بينها). وعند تعبئة هذا الحقل بالكامل، سيغطّي جميع فترات جمع البيانات التي يبلغ عددها 25. ومن خلال عرض هذا السجلّ، يمكنك التأكّد من أنّ التحسينات قد دخلت حيز التنفيذ أو تراجعت. وينطبق هذا بوجه خاص على إعدادات ذاكرة التخزين المؤقت لبروتوكول HTTP، وتحسين الصفحة من أجل استخدام ميزة "التخزين المؤقت للصفحات" والعرض المُسبَق.
أنواع التنقّل في CrUX في BigQuery
تتضمّن جداول CrUX في BigQuery الآن سجلّ navigation_type
المصنوع من كل نوع، بينما يتضمّن الملخّص أعمدة navigation_types_*
متعدّدة، عمودًا لكل نوع.
جداول مفصّلة
يوفّر مخطط الجدول المفصّل في CrUX BigQuery مدرجات تكرارية مفصّلة لمقاييس أداء الويب، ما يتيح لنا توضيح كيفية ارتباط أنواع تنقّل معيّنة بأداء التحميل الفوري أو الجيد في هذا المثال.
على سبيل المثال، نظرنا في الكسر back_forward_cache
وعلاقته بمدى تكرار تحميل الصفحات بشكل فوري (القيمة instant_lcp_density
معرّفة: سرعة عرض أكبر محتوى مرئي (LCP) أقل من 200 ملي ثانية)، ومعدّل عرض مقياس LCP لهذا الكسر (القيمة good_lcp_density
لسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) أقل من 2500 ملي ثانية). لاحظنا ارتباطًا إحصائيًا قويًا بين back_forward_cache
وinstant_lcp_density
(وهي صفر=0.87) - كما هو موضح في المخطط التالي - وارتباط معتدل بين back_forward_cache
وgood_lcp_density
(=0.29).
![مخطط ارتباط يعرض ارتباطًا قويًا بين الجزء من عمليات تحميل الصفحة الفورية والجزء من عمليات تحميل صفحة التخزين المؤقت للصفحات](https://developer.chrome.com/static/blog/crux-navigation-types/image/instant-lcp-bfcache-correlation.png?authuser=7&hl=ar)
تم التعليق جيدًا على Colab لهذا التحليل، ونحن هنا نناقش فقط طلب البحث الذي يستخلص كسور traffic_type لـ 10 آلاف من الأصول الأكثر شيوعًا من الجداول التفصيلية في CrUX BigQuery:
- يمكننا الوصول إلى جدول
all.202403
هنا (راجِع العبارةFROM
)، وفلترةform_factor
لعرضphone
ونختار المصادر ذات الترتيب حسب الرواج <= 10,000 لأهم 10 آلاف مصدر من المصادر الأكثر رواجًا (راجِع عبارةWHERE
). - عند إجراء طلب بحث عن مقياس
navigation_types
في BigQuery، يجب القسمة على إجمالي كسورnavigation_types
، لأنّه لن يتم جمعها إلا لكل مصدر، وليس حسب مجموعة (المصدر وشكل الجهاز). - لن تحتوي بعض الأصول على
navigation_types
، لذا من الأفضل استخدام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
جداول متجانسة
عندما يكون الملخّص كافيًا، غالبًا ما يكون من الأفضل (وأقل تكلفة) إجراء طلب بحث في الجداول الفعلية بدلاً من ذلك. على سبيل المثال، يستخلص طلب البحث التالي بيانات navigation_types
المتاحة من جدول chrome-ux-report.materialized.device_summary
. يتم ربط هذا الجدول حسب الشهر والأصل ونوع الجهاز.
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
لاحظ أن هذه الكسور لن تضيف ما يصل إلى 1.0 لكل صف، لذلك من الضروري قسمة كل كسر على مجموع النتائج التي سيتم تفسير الاستعلام عليها.
يرجع السبب في ذلك إلى أنّ كسور navigation_type
في chrome-ux-report.materialized.device_summary
، مثل كثافات المدرّج التكراري، تضيف ما يصل إلى 1.0 لكل أصل بدلاً من لكل أصل وجهاز لكل تاريخ. يتيح لك هذا الإجراء الاطّلاع على توزيع نوع التنقل على الأجهزة:
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 |
في نتيجة طلب البحث هذه، تعكس الكسور النسبة المئوية لعمليات تحميل الصفحات للأصل https://www.google.com
: تضمّنت% 6.63 من عمليات تحميل هذه الصفحات نوع التنقّل back_forward
على الهاتف و1.79% على أجهزة الكمبيوتر المكتبي و0.09% من الأجهزة اللوحية.
وتشير النسبة المئوية الأعلى بكثير في back_forward
على phone
إلى أنّه يمكننا محاولة تحسين عمليات تحميل هذه الصفحات ليتم عرضها من خلال ميزة "التخزين المؤقت للصفحات".
ومع ذلك، من المهم أيضًا مراعاة نسبة عمليات تحميل الصفحات التي يتم عرضها من قبل من خلال ميزة "التخزين المؤقت للصفحات" - أي معدل نتائج التخزين المؤقت للصفحات. يشير طلب البحث التالي إلى أن هذا المصدر تحديدًا قد يكون قد تم تحسينه جيدًا بالفعل، مع الأخذ في الاعتبار معدلات النتائج التي تزيد عن 60% للهواتف وأجهزة الكمبيوتر المكتبية.
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 |
يبدو أنّ معدّل back_forward
المرتفع على الهواتف لا يرجع إلى انخفاض استخدام ميزة "التخزين المؤقت للصفحات"، بل هو انعكاس بشكل أكبر على كيفية انتقال المستخدمين إلى الخلف وإلى الأمام على الهواتف.
أنواع التنقّل في لوحة بيانات CrUX
إنّ أسهل طريقة للاطّلاع على أنواع التنقّل هي في لوحة بيانات CrUX، والتي يمكن الوصول إليها للحصول على مصدر من هذا الرابط. كما يتبين من لقطة الشاشة التالية، لا تتوفر سوى بيانات شهر واحد في البداية، ولكن بمرور الوقت يمتلئ السجلّ، ما يتيح لك رؤية التغييرات في الأنواع كل شهر.
![لقطة شاشة لشاشة "توزيع أنواع التنقل" في لوحة بيانات CrUX تعرض بيانات شهر واحد.](https://developer.chrome.com/static/blog/crux-navigation-types/image/crux-dashboard-navigation-types.png?authuser=7&hl=ar)
كما ترى أيضًا، لقد سلطنا الضوء على أنواع التنقل الأسرع، التي يجب أن تسعى المعالم إلى تحسينها، في أعلى هذه الصفحة من لوحة البيانات.
الخلاصة
نأمل أن تكون تفاصيل أنواع التنقّل في CrUX مفيدة وأن تساعدك على فهم أداء موقعك الإلكتروني وتحسينه. ومن خلال ضمان الاستخدام الفعّال للتخزين المؤقت عبر HTTP والتخزين المؤقت للصفحات والعرض المُسبَق، يمكن للمواقع الإلكترونية تحقيق عمليات تحميل للصفحات أسرع بكثير من عمليات تحميل الصفحات التي تتطلب الرجوع إلى الخادم.
يسعدنا أيضًا إتاحة البيانات في جميع نقاط وصول "تقرير تجربة المستخدم على Chrome" المختلفة حتى يتمكّن المستخدمون من استهلاك البيانات بالشكل الذي يريدونه والاطّلاع على تقسيمات الأنواع حسب عنوان URL لتلك التي تم الكشف عنها في واجهات برمجة تطبيقات CrUX.
يسعدنا معرفة ملاحظاتك حول هذه الإضافة إلى CrUX على وسائل التواصل الاجتماعي أو على مجموعة مناقشة CrUX.