كيف ساعد الجلب المُسبَق شركة Terra من زيادة نسبة النقر إلى الظهور للإعلانات بنسبة% 30 وتسريع سرعة عرض أكبر جزء من المحتوى على الصفحة.

يؤدي تحميل الموارد مسبقًا إلى تسريع أوقات تحميل الصفحات وتحسين مقاييس النشاط التجاري.

Guilherme Moser de Souza

Thierno Thiam

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

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

تصف دراسة الحالة هذه تنفيذ Terra أثناء رحلة استخدام Terra، ما أدى إلى زيادة نسبة النقر إلى الظهور للإعلانات بنسبة 11% على الأجهزة الجوّالة، و 30% في نسبة النقر إلى الظهور للإعلانات على أجهزة الكمبيوتر المكتبية، وانخفاض بنسبة 50% في أوقات سرعة عرض أكبر محتوى مرئي (LCP).

استراتيجية الجلب المُسبَق

إنّ ميزة "الجلب المُسبَق" متوفّرة منذ فترة، ولكن من المهم استخدامها بعناية لأنّها تستهلك عرض نطاق إضافيًا للموارد غير الضرورية على الفور. يجب تطبيق هذه التقنية بعناية لتجنُّب استخدام البيانات غير الضرورية. في ما يتعلّق بتطبيق Terra، يتم جلب المقالات مسبقًا في حال استيفاء الشروط التالية:

• مستوى ظهور الروابط المؤدية إلى المقالات التي تمّ تحميلها مسبقًا: استخدمت Terra واجهة برمجة التطبيقات Intersection Observer API لرصد مستوى ظهور القسم الذي يحتوي على المقالات التي يريدون تحميلها مسبقًا.
• شروط مواتية لزيادة استخدام البيانات: كما ذكرنا سابقًا، الجلب المسبق هو تحسين في الأداء المبني على توقُّع يستهلك بيانات إضافية، وقد لا تكون النتيجة المرجوة في كل موقف. لتقليل احتمالية إهدار معدل نقل البيانات، يستخدم Terra واجهة برمجة التطبيقات Network Information API مع واجهة برمجة التطبيقات Device Memory API لتحديد ما إذا كان يجب جلب المقالة التالية. لا تُجلب Terra المقالة التالية إلا في الحالات التالية:
  • يجب أن تكون سرعة الاتصال بشبكة 3G لا تقل عن 4 جيجا بايت وأن ذاكرة الجهاز لا تقل عن 4 جيجا بايت،
  • أو ما إذا كان الجهاز يعمل بنظام التشغيل iOS.
• وحدة المعالجة المركزية (CPU) غير نشطة: أخيرًا، تتحقّق Terra مما إذا كانت وحدة المعالجة المركزية غير نشطة وقادرة على إجراء عمل إضافي باستخدام requestIdleCallback، والذي يتطلب معاودة الاتصال لتتم معالجته عندما تكون سلسلة التعليمات الرئيسية غير نشطة، أو حسب موعد نهائي محدّد (اختياري)، أيهما أقرب.

ويضمن الالتزام بهذه الشروط ألا يجلب Terra البيانات إلا عند الضرورة، مما يوفر معدل نقل البيانات وعمر البطارية، ويقلل من تأثير الجلب المسبق الذي ينتهي به الأمر إلى عدم الاستخدام.

عند استيفاء هذه الشروط، تُحمِّل Terra مسبقًا المقالات المتوفّرة في القسمَين "محتوى ذو صلة" و "مقترَحة لك" المميّزَين باللون الأزرق أدناه.

التأثير في النشاط التجاري

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

نتيجةً لجلب المقالات مسبقًا، تم رصد زيادة إجمالية في مقاييس الإعلانات وتقليل مدّة سرعة عرض أكبر محتوى مرئي (LCP) ووقت وصول أول بايت (TTFB):

إنّ استخدام ميزة "الجلب المُسبَق" بعناية يُحسِّن بشكل كبير من وقت تحميل الصفحة ويزيد من مقاييس الإعلانات ويقلل من وقت "سرعة عرض أكبر جزء من المحتوى على الصفحة".

التفاصيل التقنية

يمكن تنفيذ الجلب المُسبَق من خلال استخدام تعديلات الموارد، مثل rel=prefetch أو rel=preload، أو من خلال مكتبات مثل quicklink أو Guess.js، أو باستخدام واجهة برمجة تطبيقات قواعد التوقُّع الأحدث. اختارت Terra تنفيذ ذلك باستخدام واجهة برمجة التطبيقات fetch API مع أولوية منخفضة مع مثيل Intersection Observer. اتّخذت Terra هذا الخيار لأنّه يسمح لها بتوفير التوافق مع Safari، الذي لا يتيح حتى الآن طرقًا أخرى للتحميل المُسبَق مثل rel=prefetch أو Speculation Rules API، ولم تكن مكتبة JavaScript المزوّدة بميزات كاملة ضرورية لتلبية احتياجات Terra.

إنّ لغة JavaScript الواردة أدناه مكافئة تقريبًا للرمز البرمجي الذي تستخدمه Terra:

function prefetch(nodeLists) {
  // Exclude slow ECTs < 3g
  if (navigator.connection &&
    (navigator.connection.effectiveType === 'slow-2g'
      || navigator.connection.effectiveType === '2g')
  ) {
    return;
  }

  // Exclude low end device which is device with memory <= 2GB
  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
    return;
  }

  const fetchLinkList = {};

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        if (!fetchLinkList[entry.target.href]) {
          fetchLinkList[entry.target.href] = true;

          fetch(entry.target, {
            priority: 'low'
          });
        }

        observer.unobserve(entry = entry.target);
      }
    });
  });
}

const idleCallback = window.requestIdleCallback || function (cb) {
  let start = Date.now();

  return setTimeout(function () {
    cb({
      didTimeout: false,
      timeRemaining: function () {
        return Math.max(0, 50 - (Date.now() - start));
      }
    });
  }, 1);
}

idleCallback(function () {
  prefetch(nodeLists)
})

• تتحقّق الوظيفة prefetch أولاً من الحد الأدنى لجودة الاتصال وذاكرة الجهاز قبل بدء الجلب المُسبَق.
• بعد ذلك، يستخدم IntersectionObserver لتتبُّع الحالات التي تظهر فيها العناصر في مساحة العرض، ثم يضيف عناوين URL إلى قائمة لتحميلها مسبقًا.
• يتم جدولة عملية التحميل المُسبَق باستخدام requestIdleCallback بهدف تنفيذ الدالة prefetch عندما تكون سلسلة المحادثات الرئيسية غير نشِطة.

الخاتمة

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

نشكر بشكل خاص كلًا من جيلبرتو كوتشي وهاري ثيودولو وميكيل كارلوس مارتينيز دياز وباري بولارد وجيريمي واغنر وليوناردو بينيلي ولوكا باراديدا من فريق مهندسي Terra على مساهمتهم في هذا العمل.