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