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

Barry Pollard

Johannes Henkel

بدءًا من مجموعة بيانات مارس 2024، يتضمّن تقرير تجربة المستخدم على Chrome مقياسًا navigation_types. تقدِّم هذه الميزة إحصاءات مجمَّعة عن أنواع التنقّل لعمليات تحميل الصفحات للسمة التي تم طلبها.

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

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

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

ما هي أنواع التنقّل المتوفّرة في CrUX؟

يميّز CrUX أنواع التنقل التالية في الجدول التالي:

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

قيود أنواع التنقل في CrUX

نظرًا لأن CrUX هي مجموعة بيانات عامة، فإن دقة إعداد التقارير بها محدودة. لا يتوفّر المقياس navigation_types في العديد من المصادر وعناوين URL، وذلك بسبب عدم كفاية عدد الزيارات المؤهَّلة. راجِع منهجية CrUX للحصول على مزيد من المعلومات.

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

ننصح المواقع الإلكترونية بتنفيذ ميزة "مراقبة المستخدم الفعلي" (RUM) الخاصة بها لتتمكّن من تقسيم الزيارات حسب معايير مثل أنواع التنقّل. تجدر الإشارة إلى أنّك قد تلاحظ اختلافات في أنواع التنقّل في هذه الحلول استنادًا إلى الأنواع التي يتم الإبلاغ عنها ومرّات مشاهدة الصفحة على الويب التي يتمّ تضمينها. راجِع المقالة لماذا تختلف بيانات CrUX عن بيانات RUM؟.

ويمكن أن توفر تقنية RUM أيضًا مستوى أكبر من التفاصيل حول مشاكل محدّدة في الأداء. على سبيل المثال، على الرغم من أنّ CrUX قد يشير ضمنًا إلى أنّ تحسين أهلية استخدام ميزة "التخزين المؤقت للصفحات" قد يكون مفيدًا، يمكن أن تحدّد واجهة برمجة التطبيقات bfcache notRestored أمرًا API سبب تعذّر عرض تحميل صفحة معيّنة من خلال ذاكرة التخزين المؤقت.

أنواع التنقّل في واجهة برمجة تطبيقات CrUX

للاطّلاع على أنواع التنقّل في واجهة برمجة التطبيقات، يمكنك تضمين مقياس "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

يمكن أن توفّر CrUX History API سلسلة زمنية لأنواع التنقّل التي تضم ما يصل إلى 25 نقطة بيانات لكل كسر، ما يسمح بتمثيل هذه الكسور بمرور الوقت. لتغيير طلبك من واجهة برمجة التطبيقات CrUX API إلى واجهة برمجة تطبيقات سجلّ CrUX، يمكنك تنفيذه على نقطة النهاية queryHistoryRecord بدلاً من queryRecord. على سبيل المثال، تعرض CrUX History Colab المقياس navigation_types كأشرطة مكدسة:

في لقطة الشاشة السابقة، يتوفر السجلّ لثلاث فترات جمع فقط (28 يومًا لكل منها، بفاصل 7 أيام). بعد تعبئة النموذج بالكامل، سيشمل ذلك جميع فترات جمع البيانات الخمسين. يتيح استعراض هذا السجلّ إمكانية التأكّد من أنّ التحسينات أصبحت سارية المفعول أو تراجعت. وينطبق هذا بشكل خاص على تهيئة ذاكرة التخزين المؤقت لـ HTTP، وهو تحسين الصفحة لاستخدام ذاكرة التخزين المؤقت والعرض المسبق.

أنواع التنقّل في CrUX BigQuery

تتضمّن جداول CrUX في BigQuery الآن سجلّ navigation_type تم إنشاؤه من كل نوع، بينما تتضمّن طرق العرض الموجزة المعروضة أعمدة navigation_types_* متعددة، عمود واحد لكل نوع.

الجداول التفصيلية

يوفّر مخطّط الجدول المفصّل في CrUX BigQuery مدرجات تكرارية مفصّلة لمقاييس أداء الويب، ما يتيح لنا في هذا المثال توضيح كيفية ارتباط أنواع تنقُّل معيّنة بأداء التحميل الفوري أو الجيد.

على سبيل المثال، اطّلعنا على الكسر back_forward_cache وعلاقته بمعدَّل تكرار تحميل الصفحات بشكل فوري (القيمة instant_lcp_density التي تُعرف بأنّها LCP <= 200 ملي ثانية) ومدى تكرار سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) (القيمة good_lcp_density تُعرَّف بأنها LCP <= 2, 500 ملي ثانية). لاحظنا ارتباطًا إحصائيًا قويًا بين back_forward_cache وinstant_lcp_density (}}=0.87 - كما هو موضح في الرسم التالي - وارتباط معتدل بين back_forward_cache وgood_lcp_density (}}=0.29).

لقد حصلنا على تعليقات جيدة من Colab لهذا التحليل، وهنا، نناقش فقط الاستعلام الذي يستخرج كسور shopping_types لـ 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

في نتيجة طلب البحث هذا، تعكس الكسور النسبة المئوية لعمليات تحميل الصفحة لأصل https://www.google.com: إنّ 6.63% من عمليات تحميل الصفحات هذه لها نوع التنقّل back_forward على الهاتف، و1.79% على أجهزة الكمبيوتر المكتبية، و0.09% على الأجهزة اللوحية.

تشير نسبة back_forward الأعلى بشكل كبير على phone إلى أنّه يمكننا محاولة تحسين عمليات تحميل الصفحات هذه ليتم عرضها من خلال ميزة bfcache.

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

وبالتالي، قد يبدو أنّ معدّل back_forward المرتفع على الهواتف لا يرجع إلى قلة استخدام ميزة "التخزين المؤقت للصفحات"، إنما يعكس طريقة انتقال المستخدمين إلى الخلف وإلى الأمام على الهواتف بشكل أكبر.

أنواع التنقل في لوحة بيانات CrUX

تُعد أسهل طريقة للاطّلاع على أنواع التنقل في لوحة بيانات CrUX، والتي يمكن الوصول إليها من أجل مصدر من هذا الرابط. يمكنك ملاحظة من لقطة الشاشة التالية أنّ البيانات المتوفّرة لشهر واحد فقط لا تتوفّر إلا بيانات شهر واحد فقط، ولكن بمرور الوقت سيملأ السجلّ ما يسمح لك بالاطّلاع على التغييرات في الأنواع كل شهر.

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

الخاتمة

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

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

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