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

والأمر الأكثر روعة هو أنه يتم تنفيذه بكل بساطة. خمس علامات أعط المتصفح أمرًا لتنفيذ الإجراءات الأولية:

<link rel="prefetch" href="/ar/style.css" as="style" />
<link rel="preload" href="/ar/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" />

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

ерейти к: التحميل المسبق · الجلب المسبق · اتصال مسبق · نظام أسماء النطاقات- الجلب المسبق · قبل العرض

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

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

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

بناء الجملة

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

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

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

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

من المهم تحديد السمة as - يساعد هذا المتصفح على تحديد أولويات التنزيلات وجدولتها بشكل صحيح.

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

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

• الخطوط غير القياسية من ملف خارجي:

  <!-- index.html -->
  <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="/ar/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 rel="preload">. وفي حالات أخرى، قد يتجاهل التحميل المسبق، على سبيل المثال، إذا كان يعمل على اتصال بطيء.

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

الجلب المسبق

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

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

بناء الجملة

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

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

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

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

من المهم تحديد السمة as - يساعد هذا المتصفح على تحديد أولويات التنزيلات وجدولتها بشكل صحيح.

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

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

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

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

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

تفاصيل

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

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

اتصال مسبق

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

يجب أن يقوم المتصفح بإنشاء اتصال إذا قام باسترداد أي موارد من مجال جديد لجهة خارجية. على سبيل المثال، إذا قام بتحميل خطوط Google، أو خطوط React من 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 ويستخدم خطوط جوجل. ويتم تنزيلها في خطوتين: أولاً، يتم تنزيل ملف CSS من النطاق 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، أو خطوط React من 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، ويستخدم خطوط جوجل. ويتم تنزيلها في خطوتين: أولاً، يتم تنزيل ملف CSS من النطاق 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">.
• تريد تسريع الاتصالات لأكثر من 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).

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

يتم تخزين DNS مؤقتًا، على الرغم من أنه ليس بشكل موثوق للغاية. تقوم بعض أنظمة التشغيل والمتصفحات بتخزين استعلامات DNS مؤقتًا: سيوفر هذا الوقت عند الاستعلامات المتكررة، ولكن لا يمكن الاعتماد على التخزين المؤقت. في نظام Linux عادةً لا يعمل على الإطلاق. يحتوي Chrome على ذاكرة تخزين مؤقت لنظام أسماء النطاقات (DNS)، ولكنها تدوم لمدة دقيقة واحدة فقط. يقوم 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 مفتوحًا لمدة سبع سنوات. هناك تقارير تفيد بأن سفاري لا يدعم هذه العلامة أيضًا.

ملخص

يستخدم:

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

المصدر: www.habr.com