الجلب المُسبَق للموارد لتسريع عمليات الانتقال المستقبلية

تعرف على معلومات حول تلميح rel=prefetch وكيفية استخدامه.

ديميان رينزولي

جيريمي واغنر

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

يشرح هذا الدليل كيفية تحقيق ذلك باستخدام <link rel=prefetch>، وهو تلميح عن الموارد يتيح لك تنفيذ الجلب المُسبَق بطريقة سهلة وفعّالة.

تحسين عمليات التنقّل باستخدام "rel=prefetch"

إنّ إضافة <link rel=prefetch> إلى صفحة ويب تطلب من المتصفّح تنزيل صفحات كاملة، أو بعض الموارد (مثل النصوص البرمجية أو ملفات CSS)، التي قد يحتاجها المستخدم في المستقبل:

<link rel="prefetch" href="/articles/" as="document">

يستهلك التلميح prefetch وحدات بايت إضافية للموارد غير المطلوبة على الفور، لذلك يجب تطبيق هذه التقنية بعناية، ولا يتم جلب الموارد مسبقًا إلا عندما تكون واثقًا من أنّ المستخدمين سيحتاجون إليها. يجب عدم الجلب المسبق عندما يكون المستخدمون في اتصالات بطيئة. يمكنك رصد ذلك باستخدام Network Information API.

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

حالات الاستخدام

الجلب المُسبق للصفحات اللاحقة

جلب مستندات HTML مسبقًا عندما يكون من الممكن توقُّع الصفحات التالية، وبالتالي عند النقر على رابط، يتم تحميل الصفحة على الفور.

على سبيل المثال، في صفحة بيانات المنتج، يمكنك إحضار صفحة المنتج الأكثر شيوعًا في القائمة مسبقًا. في بعض الحالات، يكون توقع عملية الانتقال التالية أكثر سهولة - على صفحة سلة التسوق، عادةً ما يكون احتمال زيارة المستخدم لصفحة الدفع مرتفعًا، ما يجعلها مرشحة جيدًا للجلب المسبق.

ملاحظة: نفّذت eBay ميزة الجلب المسبق للنتائج الخمس الأولى في صفحة البحث لتسريع عمليات تحميل الصفحات المستقبلية، ولاحظت تأثيرًا إيجابيًا في معدلات الإحالات الناجحة.

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

الجلب المسبق لمواد العرض الثابتة

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

على سبيل المثال، تستفيد Netflix من الوقت الذي يقضيه المستخدمون على الصفحات التي تم تسجيل الخروج منها، وذلك للجلب المسبق لـ React الذي سيتم استخدامه بعد تسجيل دخول المستخدمين. وبفضل ذلك، خفّضت الشركة وقت التفاعل بنسبة% 30 في عمليات التنقّل المستقبلية.

في وقت كتابة هذا التقرير، من الممكن مشاركة الموارد التي تم جلبها مسبقًا بين الصفحات التي يتم عرضها من مصادر مختلفة. عند شحن ذاكرة التخزين المؤقت المستندة إلى بروتوكول HTTP، لن يعمل ذلك إلا مع عمليات التنقّل على المستوى الأعلى والموارد الفرعية ذات المصدر نفسه، ولكن لن يكون من الممكن إعادة استخدام الموارد الفرعية التي تم جلبها مسبقًا بين مصادر مختلفة. وهذا يعني أنّه في حال جلب a.com للمورد b.com/library.js مسبقًا، لن يكون متاحًا في ذاكرة التخزين المؤقت لـ c.com. بعض المتصفحات، مثل المتصفحات المستندة إلى WebKit، تتضمّن ذاكرات تخزين مؤقت للأقسام ومساحة تخزين HTML5 لجميع النطاقات التابعة لجهات خارجية.

يعتمد تأثير الجلب المُسبَق لمواد العرض الثابتة في مقاييس الأداء على المورد الذي يتم استرجاعه مُسبقًا:

• ويمكن أن يؤدي الجلب المُسبَق للصور إلى تقليل أوقات LCP لعناصر صور LCP بشكلٍ كبير.
• يمكن أن يؤدي الجلب المُسبَق لأوراق الأنماط إلى تحسين كل من سرعة عرض أكبر محتوى مرئي (FCP) وسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، وذلك لأنّه سيتم التخلص من وقت الشبكة لتنزيل ورقة الأنماط. وبما أنّ أوراق الأنماط تحجب العرض، يمكنها تقليل سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) عند الجلب المُسبق. في الحالات التي يكون فيها عنصر LCP للصفحة اللاحقة هو صورة خلفية CSS مطلوبة من خلال السمة background-image، سيتم أيضًا جلب الصورة مسبقًا كمورد تابع لورقة الأنماط التي تم جلبها مسبقًا.
• سيسمح الجلب المسبق بلغة JavaScript بحدوث معالجة النص البرمجي الذي تم جلبه مسبقًا بسرعة أكبر مما لو كانت الشبكة مطالبًا بجلبه أولاً أثناء التنقّل. قد يؤثر ذلك في مقاييس الاستجابة، مثل مهلة الاستجابة الأولى (FID) ومدى استجابة الصفحة لتفاعلات المستخدم (INP). في الحالات التي يتم فيها عرض الترميز على البرنامج من خلال JavaScript، يمكن تحسين سرعة LCP من خلال تقليل حالات التأخير في تحميل الموارد، كما يمكن أن يتم عرض الترميز من جهة العميل الذي يحتوي على عنصر LCP للصفحة في وقت أقرب.
• يمكن أن يؤدي الجلب المُسبَق لخطوط الويب التي لم تستخدمها الصفحة الحالية إلى التخلص من متغيّرات التصميم. في حالات استخدام font-display: swap;، يتم التخلص من فترة التبديل للخط، ما يؤدي إلى عرض النص بشكل أسرع وإزالة متغيّرات التصميم. إذا كانت صفحة مستقبلية تستخدم الخط الذي تم جلبه مسبقًا وكان عنصر LCP في الصفحة عبارة عن جزء نصي يستخدم خط ويب، ستكون سرعة LCP لهذا العنصر أسرع أيضًا.

الجلب المُسبَق لمقاطع JavaScript عند الطلب

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

على سبيل المثال، إذا كانت لديك صفحة تحتوي على زر يفتح مربّع حوار يحتوي على أداة اختيار الرموز التعبيرية، يمكنك تقسيمها إلى ثلاثة أجزاء من JavaScript، وهي الصفحة الرئيسية ومربّع الحوار وأداة الاختيار. يمكن تحميل الصفحة الرئيسية ومربّع الحوار في البداية، بينما يمكن تحميل أداة الاختيار عند الطلب. تسمح لك أدوات مثل webpack بتوجيه المتصفح إلى جلب هذه المقاطع عند الطلب بشكل مسبق.

كيفية تنفيذ rel=prefetch

أبسط طريقة لتنفيذ prefetch هي إضافة علامة <link> إلى <head> من المستند:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

تساعد السمة as المتصفّح في ضبط العناوين الصحيحة وتحديد ما إذا كان المورد متوفّرًا في ذاكرة التخزين المؤقت. تشمل أمثلة قيم هذه السمة: document وscript وstyle وfont وimage وغير ذلك.

يمكنك أيضًا بدء الجلب المُسبَق من خلال عنوان HTTP يتضمّن العلامة Link:

Link: </css/style.css>; rel=prefetch

تتمثل إحدى فوائد تحديد تلميح جلب مسبق في عنوان HTTP في أنّ المتصفح لا يحتاج إلى تحليل المستند للعثور على تلميح المورد، والذي قد يوفر تحسينات بسيطة في بعض الحالات.

ملاحظة: prefetch متوافق مع جميع المتصفحات الحديثة باستثناء Safari. يمكنك تنفيذ أسلوب احتياطي للمتصفح Safari من خلال طلبات XHR أو Fetch API.

الجلب المسبق لوحدات JavaScript باستخدام تعليقات Webpack السحرية

تتيح لك حزمة webpack جلب النصوص البرمجية مسبقًا للمسارات أو الوظائف التي سيزورها بعض المستخدمين أو سيستخدمونها قريبًا.

يعمل مقتطف الرمز التالي على تحميل وظيفة ترتيب من مكتبة lodash لترتيب مجموعة من الأرقام التي سيتم إرسالها من خلال نموذج:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

بدلاً من انتظار وقوع الحدث "submit" (إرسال) لتحميل هذه الوظيفة، يمكنك جلب هذا المورد مسبقًا لزيادة فرص توفّره في ذاكرة التخزين المؤقت بحلول الوقت الذي يرسل فيه المستخدم النموذج. تسمح حزمة الويب باستخدام التعليقات السحرية داخل import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

يؤدي ذلك إلى توجيه حزمة الويب إلى إدخال علامة <link rel="prefetch"> في مستند HTML:

<link rel="prefetch" as="script" href="1.bundle.js">

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

بشكلٍ عام، يؤثر الجلب المُسبَق بشكل عام في تحديد أولويات الموارد بشكل عام. عند جلب أحد الموارد مسبقًا، يتم تنفيذ ذلك بأقل أولوية ممكنة. وبالتالي، لن تتطلب أي موارد تم جلبها مسبقًا الاستفادة من معدل نقل البيانات للموارد التي تحتاجها الصفحة الحالية.

الجلب المسبق الذكي باستخدام رابط سريع وGuness.js

يمكنك أيضًا تنفيذ الجلب المُسبَق الأكثر ذكاءً من خلال المكتبات التي تستخدم prefetch ضمن التفاصيل:

• يستخدم quicklink (الرابط السريع) Intersection Monitorer API لرصد وقت ظهور الروابط في إطار العرض واسترجاع الموارد المرتبطة بشكل مسبق خلال مدة عدم النشاط. ميزة إضافية: يزن الرابط السريع أقل من 1 كيلوبايت.
• يستخدم Guess.js تقارير الإحصاءات لإنشاء نموذج تنبؤي يُستخدم لإجراء الجلب المُسبَق بذكاء فقط مع ما يُحتمل أن يحتاجه المستخدم.

يستخدم كل من الرابط السريع (Quicklink) وGuss.js واجهة برمجة تطبيقات معلومات الشبكة لتجنُّب الجلب المُسبَق إذا كان المستخدم متصلاً بشبكة بطيئة أو قد فعَّل Save-Data.

الجلب المسبق

لا تُعدّ تلميحات الموارد تعليمات إلزامية، والأمر متروك للمتصفّح ليقرّر ما إذا كان سيتم تنفيذها ووقت تنفيذها.

يمكنك استخدام ميزة الجلب المُسبَق عدة مرات في الصفحة نفسها. يضع المتصفّح جميع التلميحات في قائمة انتظار ويطلب كل مورد عندما يكون غير نشِط لفترة قصيرة. في Chrome، إذا لم ينتهِ الجلب المُسبَق من التحميل وتنقل المستخدم إلى مورد الجلب المُسبَق المحدَّد، سيتم اختيار التحميل أثناء الرحلة الجوية أثناء التنقّل من خلال المتصفِّح (قد ينفذ مورّدو المتصفِّح الآخرون ذلك بشكلٍ مختلف).

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

يتم تخزين الملفات التي يتم جلبها مسبقًا في ذاكرة التخزين المؤقت لبروتوكول HTTP أو في ذاكرة التخزين المؤقت للذاكرة (بناءً على ما إذا كان المورد قابلاً للتخزين المؤقت أم لا)، لفترة زمنية تتفاوت حسب المتصفحات. على سبيل المثال، يتم الاحتفاظ بموارد Chrome لمدة خمس دقائق، وبعد ذلك يتم تطبيق قواعد Cache-Control العادية للمورّد.

الخلاصة

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