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

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

Demián Renzulli

Jeremy Wagner

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• يمكن أن تؤدي عملية الجلب المُسبَق للصور إلى تقليل مُدد LCP بشكل ملحوظ في عناصر صور LCP.
• يمكن أن تحسِّن أوراق أنماط الجلب المُسبَق كلاً من سرعة عرض المحتوى على الصفحة (FCP) وسرعة عرض أكبر محتوى مرئي (LCP)، حيث سيتم استهلاك الوقت المستغرَق في تنزيل ورقة الأنماط على الشبكة. بما أنّ أوراق الأنماط تحظر العرض، يمكنها تقليل سرعة عرض أكبر محتوى مرئي (LCP) عند جلبها مسبقًا. في الحالات التي يكون فيها عنصر LCP للصفحة التالية هو صورة خلفية CSS مطلوبة من خلال السمة background-image، سيتم أيضًا جلب الصورة مسبقًا كمورد تابع لورقة الأنماط التي تم جلبها مسبقًا.
• سيسمح الجلب المسبق لـ JavaScript بمعالجة النص البرمجي الذي تم جلبه مسبقًا في وقت أقرب بكثير مما إذا كانت الشبكة مطلوبة لجلبه أولاً أثناء التنقل. ويمكن أن يؤثر ذلك في مقياس مدى استجابة الصفحة لتفاعلات المستخدم (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) });
});

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

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

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

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

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

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

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

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

• تستخدم السمة quicklink واجهة Intersection Observer API لرصد حالات وصول الروابط إلى إطار العرض وجلب الموارد المرتبطة مسبقًا أثناء وقت الخمول. الميزة الإضافية: وزن الرابط السريع (quicklink) أقل من 1 كيلوبايت!
• يستخدم Guess.js تقارير الإحصاءات لإنشاء نموذج قائم على التوقّعات يُستخدم لجلب ما قد يحتاجه المستخدم مسبقًا بشكل ذكي فقط.

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

الجلب المسبق

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

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

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

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

الخاتمة

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