التحميل المسبق ، التوصيل المسبق ، الجلب المسبق: تحسين أداء موقعك باستخدام تلميحات الموارد

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

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

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

هذا هو المكان الذي تأتي فيه تلميحات الموارد.

في السطور التالية ، سوف نلقي نظرة عليها وكيفية الاستفادة من مزاياها بأفضل طريقة ممكنة.

دعونا نتعمق فيه.

كيف تعمل المتصفحات (باختصار)

لفهم تلميحات الموارد بشكل أفضل وأين تكون قابلة للتطبيق ، دعنا نلقي نظرة سريعة على كيفية تحميل المتصفحات للمحتوى بالفعل.

يمكننا تقسيم العملية الكاملة للمتصفح الذي يقوم بتحميل الصفحة إلى ثلاث خطوات:

• اجراء اتصال؛
• تنزيل الكود وتحليله وتقديمه ؛
• جعل الصفحة تفاعلية ؛

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

بمجرد الانتهاء من كل شيء ، يمكن للمتصفح متابعة تنزيل المعلومات وتحليلها ، وإنشاء نموذج كائن المستند (DOM) ونموذج كائن CSS (CSSOM) ، ثم عرض المحتوى.

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

باختصار ، هذه هي العملية التي تتم وراء الكواليس في كل مرة يتم فيها تحميل الصفحة.

دعونا نرى كيف يمكنك التأثير بشكل إيجابي على كل مرحلة من هذه المراحل من خلال دمج تلميحات الموارد.

تلميحات الموارد: الجلب المسبق والتوصيل المسبق والتحميل المسبق

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

تستخدم جميع تلميحات الموارد السمة rel لعنصر الرابط الذي ستجده في رأس مستندات HTML الخاصة بك.

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

والآن بعد أن أصبحت الأساسيات وراءنا ، دعنا ننتقل إلى الجزء الذي أنت هنا من أجله - نظرة عامة على تلميحات الموارد وفوائدها ومتى يتم استخدامها.

الجلب المسبق

link rel = prefetch هو تلميح ذو أولوية منخفضة للمورد يسمح للمتصفح بجلب الموارد التي قد تكون مطلوبة لاحقًا وتخزينها في ذاكرة التخزين المؤقت للمتصفح.

نظرًا لأن الجلب المسبق يحدد أولوية منخفضة جدًا ، فلا تستخدم هذا التلميح للملفات ذات الأهمية العالية .

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

من خلال توقع خطوات الزوار على موقعك والجلب المسبق للموارد ، يمكنك تحسين مقاييس مثل First Contentful Paint و Time to Interactive. شيء فعلته Netflix وقلل من وقت التفاعل بنسبة 30٪.

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

1. الجلب المسبق لـ DNS
يحتاج المستعرض إلى إجراء بحث DNS لتحويل اسم مضيف (عنوان URL) إلى عنوان IP قبل الاتصال بالمضيف (الخادم الأصلي).

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

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

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

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

توصيل مسبق

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

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

لكن هنا يأتي السؤال:

إذا كان الاتصال المسبق يفعل كل شيء يقوم به نظام أسماء النطاقات ، وما فوق ، فلماذا أستخدم الجلب المسبق لنظام أسماء النطاقات في المقام الأول؟

في معظم الحالات ، يكون الاتصال المسبق هو الخيار المفضل للجلب المسبق لنظام أسماء النطاقات ، ولكن المشكلة هي أن الاتصال المسبق غير مدعوم من قبل بعض المتصفحات:

المصدر: caniuse.com

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

وفقًا لجوجل:

مرة أخرى في عام 2019 ، تمكن Chrome من تحسين وقت التفاعل بمقدار 1 ثانية تقريبًا عن طريق الاتصال المسبق بالأصول المهمة.

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

قبل شرح كيفية عمل توجيه التحميل المسبق ، علينا توضيح شيء ما.

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

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

يعمل توجيه التحميل المسبق بشكل أفضل على الموارد التي تعد جزءًا من مسار العرض الحرج ولكن لا يسهل على المستعرض اكتشافها. على سبيل المثال ، الخطوط أو CSS أو JavaScript المهم.

هناك اختلاف آخر بين تلميحات الجلب المسبق والتوصيل المسبق لنظام أسماء النطاقات ، وهو أنه في حين أنهم يحتاجون فقط إلى سمات rel و href ، فإن التحميل المسبق أكثر تعقيدًا. يجب عليك إضافة السمة as ، والتي تشير إلى نوع محتوى المورد الذي تريد تحميله مسبقًا.

وفقًا لأدي عثماني ، مدير هندسي في Google ، فإن توفير سمة عند التحميل المسبق أمر إلزامي:

فيما يلي قائمة كاملة بالقيم التي يمكنك تحديدها:

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

تحقق من مستند الجدولة وأولويات موارد Chrome لمعرفة المزيد حول كيفية تحديد أولويات أنواع الموارد المختلفة.

بالنسبة لبعض الموارد ، مثل الخطوط ، يجب عليك تضمين سمة crossorigin أيضًا.

تحدد السمة crossorigin وضع الطلب لطلب HTTP CORS. CORS (مشاركة الموارد عبر الأصل) هي آلية تسمح للخادم بالإشارة إلى أي أصول بخلاف أصوله التي يجب أن يسمح المتصفح من خلالها بتحميل الموارد. لن نتعمق في هذا الأمر لأنه ليس محور هذه المقالة ، ولكن يمكنك العثور على مزيد من المعلومات هنا.

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

المزيد من تلميحات الموارد ، المزيد من المشاكل

عند قراءة كل شيء حتى الآن ، قد تبدأ في التفكير في أن استخدام أكبر عدد ممكن من تلميحات الموارد لن يؤدي إلا إلى تحميل المتصفحات لصفحاتك بسرعة البرق.

للأسف، ليست هذه هي القضية.

فيما يلي بعض النكسات التي يجب أن تأخذها في الاعتبار عند دمج تلميحات الموارد:

1. قد يؤدي الجلب المسبق إلى زيادة استهلاك البيانات

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

2. يمكن أن يتسبب العرض المسبق في إهدار عرض النطاق الترددي

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

3. قد يؤدي الاتصال المسبق إلى استخدام إضافي لوحدة المعالجة المركزية

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

4. يتجاوز التحميل المسبق الأولويات التي حددها محلل المتصفح

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

خلاصة

لقد تناولنا الكثير من التفاصيل في هذه المقالة ، لذلك دعونا نلخص سريعًا أهم النقاط:

• يتم استخدام الجلب المسبق لنظام أسماء النطاقات والاتصال المسبق لتحديد أولويات أسماء النطاقات (على سبيل المثال ، https://example.com).
• يتم استخدام الجلب المسبق والتحميل المسبق لتحديد أولويات تحميل الموارد. أثناء استخدام الجلب المسبق لتحسين وقت تحميل الصفحات اللاحقة ، يعمل التحميل المسبق بشكل أفضل على الموارد الهامة للصفحة الحالية.
• يشير العرض المسبق إلى صفحة كاملة (على سبيل المثال ، blog.html).
• الجلب المسبق والعرض المسبق والاتصال المسبق هي تلميحات عن الموارد ، ويتم تنفيذها بالشكل الذي يراه المتصفح مناسبًا. يعد توجيه التحميل المسبق أمرًا إلزاميًا للمتصفحات.
• عند استخدام التحميل المسبق ، لا تنس توفير السمتين as و crossorigin لتجنب الجلب المزدوج.
• على الرغم من أن تلميحات الموارد هي إرشادات ذات أولوية منخفضة ، إلا أنها لا تزال تشكل تهديدًا لأداء موقعك. استخدمها باعتدال وعند الضرورة فقط.
• التحميل المسبق هو توجيه قوي يمكنه تجاوز أولويات محلل المتصفح. لا تنس أن المتصفحات الحديثة جيدة جدًا في تحديد أولويات الموارد ، لذا استخدم "تلميح" التحميل المسبق باعتدال.

استخدم المعرفة المكتسبة حديثًا حول تلميحات الموارد لتسريع تسليم المحتوى والأصول وتحسين الأداء العام لموقعك. ولا تنس اختبار موقع الويب الخاص بك في العالم الحقيقي (التركيز على البيانات الميدانية) في كل مرة تقوم فيها بإجراء تغيير.