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

حتى برودة هو أنه من السهل جدا لتنفيذ. خمس علامات <link rel> تمنح المتصفح أمرًا لاتخاذ إجراءات أولية:

<link rel="prefetch" href="/style.css" as="style" /> <link rel="preload" href="/style.css" as="style" /> <link rel="preconnect" href="https://example.com" /> <link rel="dns-prefetch" href="https://example.com" /> <link rel="prerender" href="https://example.com/about.html" />

صف بإيجاز ما يفعلون ومتى يستخدمونه.

اذهب إلى: preload · prefetch · preconnect · dns-prefetch · prerender

التحميل المسبق

يخبر <link rel= "preload"> المستعرض بتحميل المورد وتخزينه مؤقتًا (على سبيل المثال ، نص أو ورقة أنماط) في أقرب وقت ممكن. يكون هذا مفيدًا عندما تحتاج إلى مورد بعد ثوانٍ قليلة من تحميل الصفحة - وتريد تسريع العملية.

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

بناء الجملة

 <link rel="preload" href="/style.css" as="style" />

يشير href إلى المورد الذي تريد تنزيله.

as يمكن أن يكون أي شيء يمكنك تنزيله في المتصفح:

style لأوراق الأنماط ،
script للنصوص ،
font للخطوط ،
fetch الموارد المحملة باستخدام fetch() أو XMLHttpRequest ،
انظر القائمة الكاملة على MDN .

من المهم تحديد السمة - وهذا يساعد المستعرض على تحديد أولويات التنزيلات وتخطيطها بشكل صحيح.

متى للاستخدام

استخدم التحميل المسبق عند الحاجة إلى المورد في المستقبل القريب. على سبيل المثال:

الخطوط المخصصة من ملف خارجي:
```
  <link rel="stylesheet" href="index.css" /> /* index.css */ @font-face { src: url('comic-sans.woff2') format('woff2'); } 
```
بشكل افتراضي ، comic-sans.woff2 فقط بعد التحميل والتحليل index.css . حتى لا تنتظر طويلاً ، يمكنك تنزيل الخط مسبقًا باستخدام <link rel= "preload"> :
```
 <link rel="preload" href="comic-sans.woff2" as="font" /> 
```
إذا قسمت الأنماط الخاصة بك وفقًا لنهج CSS الحرج إلى جزأين ، مهم (للعرض الفوري) وغير حرج:
```
 <style> /* Inlined critical styles */ </style> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 
```
باستخدام هذا النهج ، ستبدأ الأنماط غير الهامة فقط في التحميل عندما يتم تشغيل JavaScript ، والذي قد يحدث بعد ثوانٍ قليلة من التقديم. بدلاً من انتظار JS ، استخدم <link rel= "preload"> لبدء التنزيل مسبقًا:
```
 <style> /* Inlined critical styles */ </style> <link rel="preload" href="/app/non-critical.css" as="style" /> <script> /* Custom JS that starts downloading non-critical styles */ loadCSS('/app/non-critical.css'); </script> 
```

لا تسيء التحميل المسبق . إذا قمت بتنزيل كل شيء على التوالي ، فلن يسرع الموقع بطريقة سحرية ، بل على العكس ، سيمنع ذلك المتصفح من التخطيط للعمل بشكل صحيح.

لا تخلط مع الجلب المسبق . لا تستخدم <link rel= "preload"> إلا إذا كنت بحاجة إلى مورد فور تحميل الصفحة. إذا كنت بحاجة إليها لاحقًا ، على سبيل المثال ، للصفحة التالية ، فاستخدم <link rel= "prefetch"> .

تفاصيل

هذه علامة مطلوبة للتنفيذ من قبل المتصفح (إذا كانت تدعمها) ، على عكس جميع علامات <link> الأخرى المرتبطة بالتحميل المسبق. يجب على المتصفح تنزيل المورد المحدد في <link rel="preload"> . في حالات أخرى ، قد يتجاهل التحميل المسبق ، على سبيل المثال ، إذا كان يعمل على اتصال بطيء.

الأولويات. بالنسبة إلى الموارد المختلفة (الأنماط ، البرامج النصية ، الخطوط ، إلخ.) ، عادةً ما تعيّن المستعرضات أولويات مختلفة من أجل تحميل أهم الموارد أولاً. في هذه الحالة ، يعطي المتصفح الأولوية للسمة. بالنسبة لمتصفح Chrome ، يمكنك رؤية جدول الأولويات الكامل .

الجلب المسبق

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

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

بناء الجملة

 <link rel="prefetch" href="/style.css" as="style" />

يشير href إلى المورد الذي تريد تنزيله.

as يمكن أن يكون أي شيء يمكنك تنزيله في المتصفح:

style لأوراق الأنماط ،
script للنصوص ،
font للخطوط ،
fetch الموارد المحملة باستخدام fetch() أو XMLHttpRequest ،
انظر القائمة الكاملة على MDN .

من المهم تحديد السمة - وهذا يساعد المستعرض على تحديد أولويات التنزيلات وتخطيطها بشكل صحيح.

متى للاستخدام

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

لديك متجر على الإنترنت ، وينتقل 40٪ من المستخدمين من الصفحة الرئيسية إلى صفحة المنتج. استخدم <link rel= "prefetch"> عند تحميل ملفات CSS و JS لعرض صفحات المنتج.
لديك تطبيق من صفحة واحدة ، وتحميل صفحات مختلفة حزم مختلفة. عندما يزور المستخدم صفحة ، يمكنك تحميل الحزم مسبقًا لجميع الصفحات التي تشير إليها.

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

ليس للطلبات العاجلة . لا تستخدم <link rel= "prefetch"> عند الحاجة إلى المورد خلال بضع ثوانٍ. في هذه الحالة ، استخدم <link rel= "preload"> .

تفاصيل

علامة اختياري . لا يُطلب من المتصفح اتباع هذه التعليمات ، بل يمكن أن يتجاهلها ، على سبيل المثال ، في اتصال بطيء.

الأولوية في Chrome . في Chrome ، يتم تنفيذ <link rel= "prefetch"> عادةً بأولوية دنيا (راجع جدول الأولوية الكامل ) ، أي بعد تنزيل كل شيء آخر.

المسبق ل

<link rel= "preconnect"> يطلب من المتصفح الاتصال مسبقًا بالنطاق عندما تريد تسريع الاتصال في المستقبل.

يجب على المستعرض إنشاء اتصال إذا كان يسترجع بعض الموارد من مجال جديد لجهة خارجية. على سبيل المثال ، إذا قمت بتنزيل Google Fonts ، React fonts من CDN ، أو طلبت استجابة JSON من خادم API.

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

بناء الجملة

 <link rel= "preconnect" href="https://api.my-app.com" />

يشير href إلى اسم المجال الذي تريد تحديد عنوان IP له. يمكنك تحديد بادئة ( https://domain.com ) أو بدونها ( //domain.com ).

متى للاستخدام

استخدم للنطاقات التي ستحتاج إليها قريبًا لتنزيل نمط أو نص أو صورة مهمة من هناك ، لكنك لا تعرف عنوان URL الخاص بالمورد حتى الآن. على سبيل المثال:

يتم استضافة التطبيق الخاص بك على my-app.com ويجعل طلبات AJAX إلى api.my-app.com : أنت لا تعرف طلبات محددة مسبقًا ، لأنها مصنوعة ديناميكيًا من JS. من المناسب هنا استخدام علامة للاتصال الأولي بمجال ما.
يتم استضافة التطبيق الخاص بك على my-app.com ويستخدم Google Fonts. يتم تنزيلها على مرحلتين: أولاً ، يتم تنزيل ملف CSS من domain fonts.googleapis.com ، ثم يطلب هذا الملف الخطوط من fonts.gstatic.com . لا يمكنك معرفة أي ملفات الخطوط المحددة من fonts.gstatic.com ستحتاج إليها حتى تقوم بتنزيل ملف CSS ، حتى نتمكن من إنشاء اتصال أولي مقدمًا فقط.

استخدم هذه العلامة لتسريع بعض البرامج النصية أو النمط لجهة خارجية قليلاً عن طريق إعداد الاتصال مسبقًا.

لا تعتدي . يعد إنشاء اتصال والمحافظة عليه عملية مكلفة لكل من العميل والخادم. استخدم هذه العلامة بحد أقصى 4-6 نطاقات.

تفاصيل

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

والتي تشمل عملية الاتصال . للاتصال بكل موقع ، يجب على المتصفح تنفيذ الخطوات التالية:

حل DNS . ابحث عن عنوان IP الخاص بالخادم ( 216.58.215.78 ) لاسم المجال المحدد ( google.com ).
مصافحة TCP . تبادل الحزمة (العميل → الخادم → العميل) لبدء اتصال TCP بالخادم.
مصافحة TLS (مواقع HTTPS فقط) . جولتان من تبادل الحزمة (العميل → الخادم → العميل → الخادم → العميل) لبدء جلسة TLS آمنة.

ملاحظة: HTTP / 3 سيحسن ويسرع آلية المصافحة ، لكنه لا يزال بعيد المنال.

نظام أسماء النطاقات-الجلب المسبق

<link rel= "dns-prefetch"> يطلب من المتصفح حل DNS مسبقًا للمجال مقدمًا إذا كنت ستتصل به قريبًا وتريد تسريع الاتصال الأولي.

يجب أن يحدد المستعرض عنوان IP الخاص بالمجال إذا كان سيتم استرداد بعض الموارد من مجال الجهة الخارجية الجديد. على سبيل المثال ، قم بتنزيل Google Fonts أو React fonts من CDN أو اطلب استجابة JSON من خادم API.

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

بناء الجملة

 <link rel= "dns-prefetch" href="https://api.my-app.com" />

يشير href إلى اسم المجال الذي سيتم تعيين عنوان IP له. يمكنك تحديد بادئة ( https://domain.com ) أو بدونها ( //domain.com ).

متى للاستخدام

استخدم للنطاقات التي ستلزم قريبًا لتنزيل الموارد من هناك والتي لا يعرف المستعرض عنها مسبقًا. على سبيل المثال:

يتم استضافة التطبيق الخاص بك على my-app.com ويجعل طلبات AJAX إلى api.my-app.com : أنت لا تعرف طلبات محددة مسبقًا ، لأنها مصنوعة ديناميكيًا من JS. من المناسب هنا استخدام علامة للاتصال الأولي بمجال ما.
يتم استضافة التطبيق الخاص بك على my-app.com ، ويستخدم Google Fonts. يتم تنزيلها على مرحلتين: أولاً ، يتم تنزيل ملف CSS من domain fonts.googleapis.com ، ثم يطلب هذا الملف الخطوط من fonts.gstatic.com . لا يمكنك معرفة أي ملفات الخطوط المحددة من fonts.gstatic.com ستحتاج إليها حتى تقوم بتنزيل ملف CSS ، حتى نتمكن من إنشاء اتصال أولي مقدمًا فقط.

استخدم هذه العلامة لتسريع بعض البرامج النصية أو النمط لجهة خارجية قليلاً عن طريق إعداد الاتصال مسبقًا.

لاحظ المواصفات المماثلة في <link rel= "dns-prefetch"/> و <link rel= "preconnect"> . عادةً ما يكون استخدامهم معًا لنفس النطاق غير منطقي: <link rel= "preconnect"> يتضمن بالفعل <link rel= "dns-prefetch"/> وأكثر من ذلك بكثير. يمكن تبرير ذلك في حالتين:

تريد دعم المتصفحات القديمة . <link rel= "dns-prefetch" /> منذ IE10 و Safari 5 . <link rel= "preconnect"> لبعض الوقت في Chrome و Firefox ، ولكن تمت إضافته إلى Safari في 11.1 فقط ولا يزال غير مدعوم في IE / Edge . إذا كنت بحاجة إلى دعم هذه المتصفحات ، فاستخدم <link rel= "dns-prefetch" /> <link rel= "preconnect"> لـ <link rel= "preconnect"> .
تريد تسريع اتصالك بأكثر من 4-6 مجالات . لا ينصح باستخدام <link rel= "preconnect"> مع أكثر من 4-6 مجالات ، نظرًا لأن إنشاء اتصال والحفاظ عليه يعد عملية مكلفة. يستهلك <link rel= "dns-prefetch" /> موارد أقل ، لذا استخدمه إذا لزم الأمر.

تفاصيل

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

ما هو DNS . كل خادم على الإنترنت لديه عنوان IP فريد يشبه 216.58.215.78 . في شريط عنوان المتصفح ، عادة ما يتم إدخال اسم الموقع (على سبيل المثال ، google.com ) ، وتعيين خوادم DNS (نظام اسم المجال) على عنوان IP الخاص 216.58.215.78 ( 216.58.215.78 ).

لتحديد عنوان IP ، يجب على المتصفح الاستعلام عن خادم DNS. يستغرق الأمر 20-120 مللي ثانية عند الاتصال بمجال طرف ثالث جديد.

يتم تخزين DNS مؤقتًا ، على الرغم من أنه غير موثوق للغاية . تقوم بعض أنظمة التشغيل والمتصفحات بتخزين استعلامات DNS مؤقتًا: سيوفر هذا الوقت على الاستعلامات المتكررة ، لكن لا يمكنك الاعتماد على التخزين المؤقت. على نظام Linux ، لا يعمل عادةً على الإطلاق. يحتوي Chrome على ذاكرة تخزين مؤقت لنظام أسماء النطاقات ، لكنه يستمر لمدة دقيقة واحدة فقط. يقوم Windows بتخزين استجابات DNS لمدة خمسة أيام.

عرض مسبق

<link rel= "prerender"> يطلب من المتصفح تنزيل عنوان URL وعرضه في علامة تبويب غير مرئية. عندما ينقر المستخدم على الرابط ، يجب أن يتم عرض الصفحة على الفور. يعد هذا مفيدًا إذا كنت متأكدًا من أن المستخدم سيزور صفحة معينة ويريد تسريع عرضها.

على الرغم من الفعالية الاستثنائية لهذه العلامة (أو بسببها) ، في عام 2019 <link rel= "prerender"> لا تدعمه المتصفحات الرئيسية بشكل كبير. انظر أدناه لمزيد من التفاصيل.

بناء الجملة

 <link rel="prerender" href="https://my-app.com/pricing" />

يشير href إلى عنوان URL الذي تريد تشغيل العرض في الخلفية.

متى للاستخدام

عندما تكون متأكدًا حقًا من أن المستخدم سيذهب إلى صفحة محددة . إذا كان لديك "نفق" يستطيع من خلاله 70٪ من زوار الصفحة "أ" الانتقال إلى الصفحة "ب" ، ثم <link rel= "prerender"> في الصفحة "أ" سوف يساعدك في عرض الصفحة "ب" بسرعة كبيرة.

لا تعتدي . العرض المسبق مكلف للغاية من حيث حركة المرور والذاكرة. لا تستخدم <link rel= "prerender"> لأكثر من صفحة واحدة.

تفاصيل

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

من أجل توفير الذاكرة ، لا يُجري Chrome عرضًا كاملاً ، ولكن يتم تحميله مسبقًا NoState . هذا يعني أن Chrome يحمّل الصفحة وجميع مواردها ، لكنه لا يعرض ولا ينفذ JavaScript.

لا يدعم Firefox و Safari هذه العلامة على الإطلاق. هذا لا ينتهك المواصفات ، نظرًا لأن المتصفحات غير مطلوبة لاتباع هذه التعليمات ؛ لكن حزين على أي حال. كان خطأ التنفيذ في Firefox مفتوحًا لمدة سبع سنوات. هناك تقارير تفيد بأن Safari أيضًا لا يدعم هذه العلامة .

ملخص

استخدام:

<link rel= "preload"> - عندما تحتاج إلى مورد خلال بضع ثوانٍ
<link rel= "prefetch"> - عندما تحتاج إلى مورد في الصفحة التالية
<link rel= "preconnect"> - عندما تعلم أنك ستحتاج إلى مورد قريبًا ، لكنك لم تعرف بعد عنوان URL الكامل له
<link rel= "dns-prefetch"> - بالمثل ، عندما تعلم أنك ستحتاج إلى مورد قريبًا ، لكنك لا تزال لا تعرف عنوان URL الكامل (للمتصفحات القديمة)
<link rel= "prerender"> - عندما تكون متأكدًا من أن المستخدمين سينتقلون إلى صفحة معينة ويريدون تسريع عرضها

التحميل المسبق ، الجلب المسبق والعلامات الأخرى

التحميل المسبق

بناء الجملة

متى للاستخدام

تفاصيل

الجلب المسبق

بناء الجملة

متى للاستخدام

تفاصيل

المسبق ل

بناء الجملة

متى للاستخدام

تفاصيل

نظام أسماء النطاقات-الجلب المسبق

بناء الجملة

متى للاستخدام

تفاصيل

عرض مسبق

بناء الجملة

متى للاستخدام

تفاصيل

ملخص

More articles: