تعرَّف على إشارة المرجع 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) وسرعة عرض أكبر محتوى مرئي (LCP)، حيث سيتم استهلاك الوقت المستغرَق في تنزيل ورقة الأنماط على الشبكة. بما أنّ ملفات الأنماط تؤدي إلى حظر العرض، يمكن أن تقلّل من سرعة عرض أكبر محتوى مرئي (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 لرصد وقت ظهور الروابط في مساحة العرض وتحميل الموارد المرتبطة مسبقًا أثناء وقت التوقف. الميزة الإضافية: وزن الرابط السريع (quicklink) أقل من 1 كيلوبايت!
- يستخدم Guess.js تقارير الإحصاءات لإنشاء نموذج قائم على التوقّعات يُستخدم لجلب ما قد يحتاجه المستخدم مسبقًا بشكل ذكي فقط.
يستخدم كلّ من quicklink وGuess.js واجهة برمجة التطبيقات Network Information API لتجنُّب التحميل المُسبَق إذا كان المستخدم على شبكة بطيئة أو فعَّل Save-Data.
ميزة "التحميل المُسبَق" في الخلفية
تعديلات الموارد ليست تعليمات إلزامية، وتقع على عاتق المتصفّح مسؤولية تحديد ما إذا كان سيتم تنفيذها ووقت تنفيذها.
يمكنك استخدام ميزة "التحميل المُسبَق" عدة مرات في الصفحة نفسها. يضع المتصفّح جميع التلميح في "قائمة الانتظار" ويطلب كلّ مورد عندما يكون في وضع السكون. في Chrome، إذا لم يكتمل تحميل البيانات المُسبَقة وتنقّل المستخدم إلى مورد البيانات المُسبَقة المقصود، يتم استئناف عملية التحميل أثناء التنقل من خلال المتصفّح (قد ينفّذ مورّدو المتصفّحات الأخرى ذلك بشكلٍ مختلف).
يتمّ جلب الموارد مسبقًا بأولوية "أدنى"، لذا لا تتنافس الموارد التي يتمّ جلبها مسبقًا مع الموارد المطلوبة في الصفحة الحالية على عرض النطاق.
يتم تخزين الملفات التي تم جلبها مسبقًا في ذاكرة التخزين المؤقت لـ HTTP، أو في ذاكرة التخزين المؤقت للذاكرة (بناءً على ما إذا كان المورد قابلاً للتخزين المؤقت أم لا)، لمدة تختلف حسب المتصفحات. على سبيل المثال، يتم الاحتفاظ بالموارد في Chrome لمدة خمس دقائق تقريبًا، وبعد ذلك يتم تطبيق قواعد Cache-Control العادية للمورد.
الخاتمة
ويمكن أن يؤدي استخدام prefetch إلى تحسين أوقات تحميل عمليات التنقل المستقبلية بشكل كبير، كما أنه يؤدي إلى ظهور الصفحات ليتم تحميلها بشكل فوري. تتوفّر prefetch على نطاق واسع في المتصفّحات الحديثة، ما يجعلها أسلوبًا جذابًا لتحسين تجربة التنقّل للعديد من المستخدمين. تتطلّب هذه التقنية تحميل وحدات بايت إضافية قد لا يتم استخدامها، لذا يجب الانتباه عند استخدامها، ويجب عدم استخدامها إلا عند الضرورة، ومن الأفضل عدم استخدامها إلا على الشبكات السريعة.