أنواع التنقّل المتوفّرة الآن في "تقرير تجربة المستخدم على Chrome"

Barry Pollard
Johannes Henkel

يشمل تقرير تجربة المستخدم على Chrome (CrUX) مقياس navigation_types، بدءًا من مجموعة بيانات آذار (مارس) 2024. يوفِّر ذلك إحصاءات مجمّعة عن أنواع التنقّل في عمليات تحميل الصفحات للسمة التي تم طلبها.

تؤدّي أنواع التنقّل المختلفة إلى اختلافات في مقاييس الأداء، لذا عند مراجعة أداء موقعك الإلكتروني، من المفيد أن تفهم معدّل التكرار النسبي لهذه الأنواع المختلفة. على سبيل المثال، عندما يستخدم التنقّل ميزة الرجوع للأمام (bfcache)، يؤدي ذلك عادةً إلى انتقال شبه فوري، وهو ما ينعكس في مقاييس LCP وFCP صغيرة جدًا وتقليل مقاييس متغيّرات التصميم التراكمية (CLS) ومقياس INP.

من خلال شرح تفاصيل نوع التنقّل، نأمل أن نشجع مالكي المواقع الإلكترونية على أن يكونوا أكثر وعيًا بأنواع التنقّل المستخدمة على مواقعهم الإلكترونية، وأن نشجّع على بعض الأنواع الأسرع من خلال الاطّلاع على إعداد التخزين المؤقت وأدوات حظر التخزين المؤقت والعرض المُسبَق.

يتوفّر المقياس navigation_types في واجهة برمجة تطبيقات CrUX API اليومية وCrUX History API (مع توفّر سجلّ لمدة 3 أسابيع بشكل مبدئي، ويتزايد التغطية أسبوعيًا إلى تغطية كاملة خلال الأشهر الستة المقبلة)، وأحدث مجموعة بيانات CrUX BigQuery ولوحة بيانات CrUX. يتيح هذا السجلّ أيضًا لمالكي المواقع الإلكترونية الاطّلاع على التغييرات التي تطرأ على استخدام نوع التنقّل بمرور الوقت. قد يسمح ذلك بتتبُّع التحسينات (على سبيل المثال، إزالة حظر ذاكرة التخزين المؤقت للصفحات). ويمكن أن يساعد أيضًا في شرح التغييرات في المقاييس حتى في حال عدم إجراء أي تغييرات على مواقعهم الإلكترونية.

يميز 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 أسابيع، ويكون معظمها من النوع "التنقل" بدون أي تغييرات رئيسية على مدار الأسابيع الثلاثة.
أنواع التنقّل بمرور الوقت

في لقطة الشاشة السابقة، لا يتوفّر السجلّ إلا لمدة 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).

مخطط ارتباط يعرض ارتباطًا قويًا بين الجزء من عمليات تحميل الصفحة الفورية والجزء من عمليات تحميل صفحة التخزين المؤقت للصفحات
ارتباط عمليات تحميل الصفحات الفورية باستخدام ميزة "التخزين المؤقت للصفحات"

تم التعليق جيدًا على 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، والتي يمكن الوصول إليها للحصول على مصدر من هذا الرابط. كما يتبين من لقطة الشاشة التالية، لا تتوفر سوى بيانات شهر واحد في البداية، ولكن بمرور الوقت يمتلئ السجلّ، ما يتيح لك رؤية التغييرات في الأنواع كل شهر.

لقطة شاشة لشاشة &quot;توزيع أنواع التنقل&quot; في لوحة بيانات CrUX تعرض بيانات شهر واحد.
أنواع التنقّل في لوحة بيانات CrUX

كما ترى أيضًا، لقد سلطنا الضوء على أنواع التنقل الأسرع، التي يجب أن تسعى المعالم إلى تحسينها، في أعلى هذه الصفحة من لوحة البيانات.

الخلاصة

نأمل أن تكون تفاصيل أنواع التنقّل في CrUX مفيدة وأن تساعدك على فهم أداء موقعك الإلكتروني وتحسينه. ومن خلال ضمان الاستخدام الفعّال للتخزين المؤقت عبر HTTP والتخزين المؤقت للصفحات والعرض المُسبَق، يمكن للمواقع الإلكترونية تحقيق عمليات تحميل للصفحات أسرع بكثير من عمليات تحميل الصفحات التي تتطلب الرجوع إلى الخادم.

يسعدنا أيضًا إتاحة البيانات في جميع نقاط وصول "تقرير تجربة المستخدم على Chrome" المختلفة حتى يتمكّن المستخدمون من استهلاك البيانات بالشكل الذي يريدونه والاطّلاع على تقسيمات الأنواع حسب عنوان URL لتلك التي تم الكشف عنها في واجهات برمجة تطبيقات CrUX.

يسعدنا معرفة ملاحظاتك حول هذه الإضافة إلى CrUX على وسائل التواصل الاجتماعي أو على مجموعة مناقشة CrUX.