تعرَّف على إشارة المرجع rel=prefetch وكيفية استخدامها.
تُظهر الأبحاث أنّ أوقات التحميل الأسرع تؤدي إلى زيادة معدلات الإحالات الناجحة وتحسين تجارب المستخدمين. إذا كانت لديك إحصاءات عن كيفية تنقّل المستخدِمين في موقعك الإلكتروني والصفحات التي يُرجّح أن يزوروها بعد ذلك، يمكنك تحسين أوقات تحميل عمليات التنقّل المستقبلية من خلال تنزيل موارد هذه الصفحات مسبقًا.
يوضّح هذا الدليل كيفية تحقيق ذلك باستخدام <link rel=prefetch>، وهو تلميح مورد يتيح لك تنفيذ ميزة "التحميل المُسبَق" بطريقة سهلة وفعّالة.
تحسين عمليات التنقّل باستخدام rel=prefetch
تؤدي إضافة <link rel=prefetch> إلى صفحة ويب إلى توجيه المتصفّح لتنزيل صفحات كاملة أو بعض الموارد (مثل النصوص البرمجية أو ملفات CSS) التي قد يحتاجها المستخدم في المستقبل:
<link rel="prefetch" href="/articles/" as="document">
يستهلك التلميح prefetch وحدات بايت إضافية للموارد التي لا تكون مطلوبة على الفور، لذا يجب تطبيق هذه التقنية بعناية، ولا تُحمِّل الموارد مسبقًا إلا عندما تكون متأكدًا من أنّ المستخدمين سيحتاجون إليها. ننصحك بعدم استخدام ميزة "التحميل المُسبَق" عندما يستخدم المستخدمون اتصالات بطيئة. يمكنك رصد ذلك باستخدام Network Information API.
هناك طرق مختلفة لتحديد الروابط التي يجب تحميلها مسبقًا. أبسط طريقة هي prefetching (التحميل المُسبَق) للرابط الأول أو بضعة روابط أولى على الصفحة الحالية. هناك أيضًا مكتبات تستخدِم طرقًا أكثر تعقيدًا، كما هو موضّح لاحقًا في هذه المشاركة.
حالات الاستخدام
تحميل الصفحات اللاحقة مُسبقًا
جلب مسبق لمستندات HTML عندما تكون الصفحات اللاحقة متوقّعة، بحيث يتم تحميل الصفحة على الفور عند النقر على رابط
على سبيل المثال، في صفحة بيانات المنتج، يمكنك تحميل الصفحة مسبقًا للمنتج الأكثر رواجًا في القائمة. في بعض الحالات، يكون من الأسهل توقّع الخطوة التالية في التنقّل. على سبيل المثال، في صفحة سلة التسوّق، تكون احتمالية زيارة المستخدم لصفحة الدفع عادةً عالية، ما يجعلها مرشحًا جيدًا للتحميل المُسبَق.
على الرغم من أنّ ميزة "التحميل المُسبَق للموارد" تستخدِم عرض نطاق إضافيًا، إلا أنّها يمكن أن تحسِّن معظم مقاييس الأداء. غالبًا ما يكون وقت استلام أول بايت (TTFB) أقل بكثير، لأنّ طلب المستند يؤدي إلى الوصول إلى ذاكرة التخزين المؤقت. وبما أنّ وقت استجابة الخادم سيكون أقل، غالبًا ما تكون المقاييس المستندة إلى الوقت أقل أيضًا، بما في ذلك سرعة عرض أكبر محتوى مرئي (LCP) وسرعة عرض المحتوى على الصفحة (FCP).
جلب مواد العرض الثابتة مسبقًا
ميزة "التحميل المُسبَق للأصول الثابتة"، مثل النصوص البرمجية أو ملفات الأنماط، عندما يمكن توقُّع الأقسام اللاحقة التي قد يزورها المستخدم ويُعدّ ذلك مفيدًا بشكل خاص عند مشاركة مواد العرض هذه على العديد من الصفحات.
على سبيل المثال، تستفيد منصة Netflix من الوقت الذي يقضيه المستخدمون على الصفحات التي لم يسجّلوا الدخول إليها، وذلك لتحميل React مسبقًا، والذي سيتم استخدامه بعد تسجيل دخول المستخدمين. وبفضل ذلك، تم تقليل "الوقت إلى التفاعل" بنسبة% 30 في عمليات التنقّل المستقبلية.
يعتمد تأثير ميزة "التحميل المُسبَق" لمواد العرض الثابتة على مقاييس الأداء على المورد الذي يتم تحميله مسبقًا:
- يمكن أن يؤدي التحميل المُسبَق للصور إلى خفض أوقات LCP بشكل كبير لعناصر LCP للصور.
- يمكن أن يؤدي الترجيع المُسبَق لجداول الأنماط إلى تحسين كلّ من FCP وLCL، لأنّه سيتمّ القضاء على وقت الشبكة لتنزيل جدول الأنماط. بما أنّ ملفات الأنماط تؤدي إلى حظر العرض، يمكن أن تقلّل من سرعة عرض أكبر محتوى مرئي (LCP) عند جلبها مسبقًا. في الحالات التي يكون فيها عنصر LCP للصفحة اللاحقة هو صورة خلفية في CSS تمّ طلبها من خلال السمة
background-image، سيتم أيضًا تحميل الصورة مسبقًا كمورد تابع لملفّ الأنماط المُحمَّل مسبقًا. - سيسمح جلب JavaScript مسبقًا بمعالجة النص البرمجي الذي تم جلبه مسبقًا في وقت أقرب بكثير مما لو كان مطلوبًا من الشبكة جلبه أولاً أثناء التنقّل. ويمكن أن يؤثر ذلك في مدى استجابة الصفحة لتفاعلات المستخدم (INP). في الحالات التي يتم فيها عرض العلامات على العميل من خلال JavaScript، يمكن تحسين LCP من خلال تقليل تأخّر تحميل الموارد، ويمكن أن يحدث عرض العلامات من جهة العميل الذي يحتوي على عنصر LCP للصفحة في وقت أقرب.
- يمكن أن يؤدي تحميل خطوط الويب مسبقًا التي لم يتم استخدامها من قبل في الصفحة الحالية إلى إزالة تغييرات التنسيق. في الحالات التي يتم فيها استخدام
font-display: swap;، يتم إيقاف فترة تبديل الخط، ما يؤدي إلى عرض النص بشكل أسرع وإزالة متغيّرات التصميم. إذا كانت الصفحة المستقبلية تستخدم الخط الذي تم جلبه مسبقًا وكان عنصر LCP للصفحة عبارة عن كتلة نص تستخدم خط ويب، سيكون LCP لهذا العنصر أسرع أيضًا.
جلب أجزاء JavaScript عند الطلب مسبقًا
من خلال تقسيم الرموز البرمجية لحِزم JavaScript، يمكنك تحميل أجزاء من التطبيق فقط في البداية وتحميل الباقي بشكلٍ بطيء. إذا كنت تستخدم هذه التقنية، يمكنك تطبيق ميزة "التحميل المُسبَق" على المسارات أو المكوّنات التي ليست ضرورية على الفور ولكن من المرجّح أن يتم طلبها قريبًا.
على سبيل المثال، إذا كانت لديك صفحة تحتوي على زر يفتح مربّع حوار يحتوي على أداة اختيار رموز تعبيرية، يمكنك تقسيمها إلى ثلاث أجزاء من JavaScript، وهي home وdialog وpicker. يمكن تحميل الصفحة الرئيسية ومربّع الحوار في البداية، بينما يمكن تحميل أداة الاختيار عند الطلب. تتيح لك أدوات مثل webpack توجيه المتصفّح إلى تحميل هذه الأجزاء عند الطلب مسبقًا.
كيفية تنفيذ rel=prefetch
إنّ أبسط طريقة لتنفيذ prefetch هي إضافة علامة <link> إلى <head> في المستند:
<head>
...
<link rel="prefetch" href="/articles/" as="document">
...
</head>
تساعد سمة as المتصفح في ضبط الرؤوس الصحيحة وتحديد ما إذا كان المورد متوفّرًا في ذاكرة التخزين المؤقت. تشمل أمثلة القيم لهذه السمة ما يلي: document وscript وstyle وfont وimage وغير ذلك.
يمكنك أيضًا بدء عملية التحميل المُسبَق من خلال عنوان Link HTTP:
Link: </css/style.css>; rel=prefetch
من مزايا تحديد تلميح لجلب المورد مُسبَقًا في عنوان HTTP أنّ المتصفّح لا يحتاج إلى تحليل المستند للعثور على تلميح المورد، ما يمكن أن يقدّم تحسينات طفيفة في بعض الحالات.
جلب وحدات JavaScript مسبقًا باستخدام التعليقات السحرية في Webpack
يتيح لك Webpack تحميل النصوص البرمجية مسبقًا للمسارات أو الوظائف التي تتأكّد بشكل معقول من أنّ المستخدمين سيزورونها أو يستخدمونها قريبًا.
تحمِّل المقتطف التالي من الرمز البرمجي وظيفة ترتيب بشكلٍ بطيء من مكتبة lodash لترتيب مجموعة من الأرقام التي سيتم إرسالها من خلال نموذج:
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
بدلاً من انتظار حدوث الحدث submit لتحميل هذه الوظيفة، يمكنك تحميل هذا المورد مسبقًا لزيادة فرص توفّره في ذاكرة التخزين المؤقت بحلول وقت إرسال المستخدم للنموذج. يسمح 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 للصفحة.
يُعدّ التلفّع المُسبَق بشكل عام عاملاً أيضًا في منح الأولوية للموارد بشكل عام. عند جلب مورد مسبقًا، يتم ذلك بأولوية أدنى ما يمكن. وبالتالي، لن تتنافس أي موارد تم جلبها مسبقًا مع الموارد التي تحتاجها الصفحة الحالية على عرض النطاق.
التحميل المُسبَق الذكي باستخدام quicklink وGuess.js
يمكنك أيضًا تنفيذ ميزة "التحميل المُسبَق الذكي" باستخدام المكتبات التي تستخدم prefetch في الخلفية:
- يستخدم quicklink واجهة برمجة التطبيقات Intersection Observer API لرصد وقت ظهور الروابط في مساحة العرض وتحميل الموارد المرتبطة مسبقًا أثناء وقت التوقف. ميزة إضافية: لا يزيد حجم الرابط السريع عن كيلوبايت واحد.
- يستخدم Guess.js تقارير الإحصاءات لإنشاء نموذج توقّعات يُستخدَم لتحميل المحتوى مسبقًا بشكل ذكي فقط بما يُحتمل أن يحتاجه المستخدم.
يستخدم كلّ من quicklink وGuess.js واجهة برمجة التطبيقات Network Information API لتجنُّب التحميل المُسبَق إذا كان المستخدم على شبكة بطيئة أو فعَّل Save-Data.
ميزة "التحميل المُسبَق" في الخلفية
لا تكون تلميحات الموارد تعليمات إلزامية، ويعود للمتصفّح تحديد ما إذا كان سيتم تنفيذها ووقت تنفيذها.
يمكنك استخدام ميزة "التحميل المُسبَق" عدة مرات في الصفحة نفسها. يضع المتصفّح جميع التلميح في "قائمة الانتظار" ويطلب كلّ مورد عندما يكون في وضع السكون. في Chrome، إذا لم ينتهِ تحميل البيانات المُسبَقة وتنقّل المستخدم إلى مورد البيانات المُسبَقة المقصود، يتم استئناف عملية التحميل أثناء التنقل من خلال المتصفّح (قد ينفّذ مورّدو المتصفّحات الأخرى ذلك بشكلٍ مختلف).
يتمّ جلب الموارد مسبقًا بأولوية "أدنى"، لذا لا تتنافس الموارد التي تمّ جلبها مسبقًا مع الموارد المطلوبة في الصفحة الحالية على عرض النطاق.
يتم تخزين الملفات التي تم جلبها مسبقًا في ذاكرة التخزين المؤقت لبروتوكول HTTP أو ذاكرة التخزين المؤقت (حسب ما إذا كان المورد قابلاً للتخزين المؤقت أم لا)، وذلك لفترة زمنية تختلف حسب المتصفحات. على سبيل المثال، يتم الاحتفاظ بالموارد في Chrome لمدة خمس دقائق تقريبًا، وبعد ذلك يتم تطبيق قواعد Cache-Control العادية للمورد.
الخاتمة
يمكن أن يؤدي استخدام prefetch إلى تحسين أوقات التحميل بشكل كبير في عمليات التنقّل المستقبلية، بل قد يؤدي إلى تحميل الصفحات بشكل فوري. تتوفّر prefetch على نطاق واسع في المتصفّحات الحديثة، ما يجعلها أسلوبًا جذابًا لتحسين تجربة التنقّل للعديد من المستخدمين. تتطلّب هذه التقنية تحميل وحدات بايت إضافية قد لا يتم استخدامها، لذا يجب الانتباه عند استخدامها، ويجب عدم استخدامها إلا عند الضرورة، ومن الأفضل عدم استخدامها إلا على الشبكات السريعة.