ويؤدي الجلب المسبق للموارد إلى تسريع وقت تحميل الصفحات وتحسين مقاييس النشاط التجاري.
الجلب المُسبَق هو أسلوب يُستخدم لتسريع تحميل الصفحات عن طريق تنزيل موارد، أو حتى صفحات بأكملها، من المرجّح أن تكون مطلوبة في المستقبل القريب. أوضحت الأبحاث أنّ أوقات التحميل الأسرع تؤدي إلى زيادة معدلات الإحالات الناجحة وتحسين تجارب المستخدمين.
Tera هي واحدة من أكبر بوابات المحتوى في البرازيل، وهي تقدّم خدمات ترفيهية وأخبارًا ورياضية تستقطب أكثر من 63 مليون زائر فريد شهريًا. لقد تعاونا مع فريق الهندسة في شركة Terra من أجل تحسين وقت تحميل المقالات باستخدام تقنيات الجلب المسبق في أقسام معينة من موقعها الإلكتروني.
توضّح دراسة الحالة هذه عملية تنفيذ Terra التي أدّت إلى تحقيق زيادة بنسبة% 11 في نسبة النقر إلى الظهور للإعلانات على الأجهزة الجوّالة، و% 30 في نسبة النقر إلى الظهور للإعلانات على أجهزة الكمبيوتر المكتبي، وانخفاض بنسبة% 50 في سرعة عرض أكبر محتوى مرئي (LCP).
استراتيجية الجلب المُسبَق
بدأ الجلب المُسبَق منذ فترة، ولكن من المهم استخدامه بعناية لأنّه يستهلك معدّل نقل بيانات إضافيًا للموارد التي لا تُعتبر ضرورية على الفور. يجب تطبيق هذا الأسلوب بعناية لتجنب الاستخدام غير الضروري للبيانات. في حالة Terra، يتم جلب المقالات مسبقًا في حال استيفاء الشروط التالية:
- إذن الوصول إلى الروابط المؤدية إلى المقالات التي تم جلبها مسبقًا: استخدمت Terra Intersection Monitorer API لرصد إمكانية عرض القسم الذي يحتوي على المقالات التي أرادت جلب المقالات مسبقًا.
- شروط مواتية لزيادة استخدام البيانات: كما ذكرنا سابقًا، فإنّ الجلب المُسبَق هو تحسين متعلّق في الأداء يستهلك بيانات إضافية، وقد لا تكون النتيجة مرغوبة في كل الحالات. للحد من احتمالية إهدار معدل نقل البيانات، يستخدم Terra Network Information API إلى جانب Device Memory API لتحديد ما إذا كان سيتم جلب المقالة التالية أم لا. لا تجلب Terra المقالة التالية إلا في الحالتَين أدناه:
- تبلغ سرعة الاتصال بشبكة الجيل الثالث على الأقل، وذاكرة الجهاز 4 غيغابايت على الأقل،
- أو إذا كان الجهاز يعمل بنظام iOS.
- وحدة المعالجة المركزية (CPU) غير نشطة: أخيرًا، تتحقّق Terra مما إذا كانت وحدة المعالجة المركزية غير نشطة، وأنّها قادرة على تنفيذ إجراءات إضافية باستخدام
requestIdleCallback، والتي تطلب معاودة الاتصال لتتم معالجتها عندما تكون سلسلة التعليمات الرئيسية غير نشطة أو حسب موعد نهائي محدَّد (اختياري)، أيهما أقرب.
ويضمن الالتزام بهذه الشروط ألا يجلب Terra البيانات إلا عند الضرورة، ما يوفّر معدل نقل البيانات وعمر البطارية، ويقلل من تأثير عمليات الجلب المُسبق التي في نهاية المطاف غير المستخدَمة.
عند استيفاء هذه الشروط، تجلب Terra المقالات المتوفّرة في الأقسام التالية: "محتوى ذو صلة" و "محتوى مقترَح لك" المميّز باللون الأزرق أدناه.
تأثير الأعمال
لقياس تأثير هذه التقنية، أطلقت Terra هذه الميزة لأول مرة في قسم "المحتوى ذو الصلة" من صفحة المقالة. وقد ساعدَهم رمز "نظام مراقبة الزيارات من Urchin" في التفريق بين المقالات التي تم جلبها مسبقًا والمقالات التي لم يتم جلبها مسبقًا لأغراض المقارنة. بعد أسبوعين من اختبار A/B الناجح، قرّرت Terra إضافة وظيفة الجلب المُسبَق إلى القسم "مقترَحة لك".
نتيجةً للجلب المُسبَق للمقالات، تم رصد زيادة إجمالية في مقاييس الإعلانات وانخفاضًا في سرعة LCP والوقت المستغرق في أول بايت (TTFB):
يؤدي الجلب المُسبَق، عند استخدامه بحرص، إلى تحسين وقت تحميل الصفحة بشكلٍ كبير، وزيادة مقاييس الإعلانات، وتقليل وقت سرعة LCP.
التفاصيل التقنية
يمكن تحقيق الجلب المُسبَق من خلال استخدام تلميحات الموارد مثل rel=prefetch أو rel=preload، من خلال مكتبات مثل رابط سريع أو Guess.js أو باستخدام واجهة برمجة تطبيقات قواعد توقُّع جديدة. اختارت Terra تنفيذ هذا باستخدام واجهة برمجة تطبيقات الجلب مع أولوية منخفضة مع مثيل Intersection Monitorer. وقد اختارت Terra هذا الخيار لأنّها تسمح لها باستخدام متصفّح Safari، الذي لا يتيح بعد أساليب الجلب المُسبَق الأخرى، مثل rel=prefetch أو واجهة برمجة تطبيقات قواعد التوقُّع. ولم تكن مكتبة 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 على مساهماتهم في هذا العمل.