تحسين الأداء باستخدام تلميحات الموارد
نشرت: 2022-03-10تستخدم متصفحات الويب الحديثة جميع أنواع الأساليب للمساعدة في تحسين أداء تحميل الصفحة من خلال تخمين ما قد يفعله المستخدم بعد ذلك. لا يعرف المتصفح الكثير عن موقعنا أو تطبيقنا ككل ، وغالبًا ما تأتي أفضل الأفكار حول ما قد يفعله المستخدم ، نحن المطور.
خذ على سبيل المثال المحتوى المرقم ، مثل ألبوم الصور. نعلم أنه إذا كان المستخدم ينظر إلى صورة في ألبوم ما ، فإن فرصة قيامه بالنقر فوق الارتباط "التالي" لعرض الصورة التالية في الألبوم تكون عالية جدًا. ومع ذلك ، لا يعرف المتصفح حقًا أنه من بين جميع الروابط الموجودة على الصفحة ، فإن هذا هو الرابط الذي يرجح أن ينقر عليه المستخدم. بالنسبة إلى المتصفح ، فإن كل هذه الروابط لها نفس الأهمية.
ماذا لو تمكن المستعرض بطريقة ما من معرفة المكان الذي سينتقل إليه المستخدم بعد ذلك ويمكنه جلب الصفحة التالية مسبقًا بحيث يكون تحميل الصفحة أسرع كثيرًا عندما ينقر المستخدم على الرابط؟ هذا من حيث المبدأ ما هي تلميحات الموارد. إنها طريقة للمطور لإخبار المتصفح بما من المحتمل أن يحدث في المستقبل حتى يتمكن المتصفح من تضمين ذلك في اختياراته لكيفية تحميل الموارد.
تستخدم كل تلميحات الموارد هذه السمة rel الخاصة بالعنصر <link> التي ستكون على دراية بالعثور عليها في <head> لمستندات HTML الخاصة بك. في هذه المقالة سوف نلقي نظرة على الأنواع الرئيسية لتلميحات الموارد ومتى وأين يمكننا استخدامها في صفحاتنا. سننتقل من التلميحات الصغيرة والخفية إلى المدافع الكبيرة في النهاية.
الجلب المسبق لنظام أسماء النطاقات
إن عملية بحث DNS هي عملية تحويل اسم مجال صديق للإنسان مثل example.com إلى عنوان IP سهل الاستخدام للآلة مثل 123.54.92.4 المطلوب بالفعل لجلب أحد الموارد.
في كل مرة تكتب فيها عنوان URL في شريط عنوان المتصفح ، أو تتبع رابطًا في صفحة أو حتى تقوم بتحميل مورد مثل صورة من مجال مختلف ، يحتاج المتصفح إلى إجراء بحث DNS للعثور على الخادم الذي يحتوي على المورد الذي لدينا طلب. بالنسبة لصفحة مزدحمة بها الكثير من الموارد الخارجية (مثل موقع إخباري به الكثير من الإعلانات وأجهزة التتبع) ، قد يكون هناك عشرات من عمليات بحث DNS المطلوبة لكل صفحة.
يقوم المستعرض بتخزين نتائج عمليات البحث هذه مؤقتًا ، ولكن يمكن أن تكون بطيئة. تتمثل إحدى تقنيات تحسين الأداء في تقليل عدد عمليات بحث DNS المطلوبة عن طريق تنظيم الموارد على عدد أقل من المجالات. عندما لا يكون ذلك ممكنًا ، يمكنك تحذير المتصفح بشأن المجالات التي سيحتاج إلى البحث عنها باستخدام تلميح مورد dns-prefetch .
<link rel="dns-prefetch" href="https://images.example.com"> عندما يواجه المتصفح هذا التلميح ، يمكنه البدء في حل اسم المجال images.example.com في أقرب وقت ممكن ، على الرغم من أنه لا يعرف كيف سيتم استخدامه حتى الآن. يتيح ذلك للمتصفح التقدم في اللعبة والقيام بمزيد من العمل بالتوازي ، مما يقلل من وقت التحميل الإجمالي.
متى يجب استخدام dns-prefetch ؟
استخدم dns-prefetch عندما تستخدم صفحتك موارد من مجال مختلف ، لمنح المتصفح السبق. يعد دعم المتصفح رائعًا حقًا ، ولكن إذا كان المستعرض لا يدعمه ، فلن يحدث أي ضرر - لا يحدث الجلب المسبق.
لا تجلب مسبقًا أي نطاقات لا تستخدمها ، وإذا وجدت نفسك ترغب في جلب عدد كبير من المجالات مسبقًا ، فقد يكون من الأفضل لك أن تبحث في سبب الحاجة إلى كل هذه المجالات وما إذا كان يمكن فعل أي شيء لتقليل العدد.
التوصيل المسبق
خطوة واحدة من الجلب المسبق لنظام أسماء النطاقات هي الاتصال المسبق بالخادم . يتطلب إنشاء اتصال بخادم يستضيف موردًا عدة خطوات:
- بحث DNS (كما ناقشنا للتو) ؛
- مصافحة TCP
"محادثة" مختصرة بين المتصفح والخادم لإنشاء الاتصال. - تفاوض TLS على مواقع HTTPS
هذا يتحقق من أن معلومات الشهادة صالحة وصحيحة للاتصال.
يحدث هذا عادةً مرة واحدة لكل خادم ويستغرق وقتًا ثمينًا - خاصةً إذا كان الخادم بعيدًا جدًا عن المتصفح وكان زمن انتقال الشبكة مرتفعًا. (هذا هو المكان الذي تساعد فيه شبكات CDN الموزعة عالميًا حقًا!) بنفس الطريقة التي يمكن أن يساعد بها الجلب المسبق DNS المتصفح في التقدم في اللعبة قبل أن يرى ما هو قادم ، يمكن أن يتأكد الاتصال المسبق بالخادم من ذلك عندما يصل المتصفح إلى الجزء من الصفحة التي تحتاج إلى مورد ، تم بالفعل العمل البطيء لإنشاء الاتصال والخط مفتوح وجاهز للعمل.
<link rel="preconnect" href="https://scripts.example.com"> متى يجب علي استخدام preconnect ؟
مرة أخرى ، دعم المتصفح قوي ولا يوجد أي ضرر إذا كان المتصفح لا يدعم الاتصال المسبق - ستكون النتيجة كما كانت من قبل. ضع في اعتبارك استخدام الاتصال المسبق عندما تعرف بالتأكيد أنك ستصل إلى مورد وتريد المضي قدمًا.
احرص على عدم الاتصال مسبقًا ثم عدم استخدامه ، حيث سيؤدي ذلك إلى إبطاء صفحتك وربط قدر ضئيل من الموارد على الخادم الذي تتصل به أيضًا.
الجلب المسبق للصفحة التالية
يركز التلميحان اللذان نظرنا إليهما حتى الآن بشكل أساسي على الموارد الموجودة داخل الصفحة التي يتم تحميلها. قد تكون مفيدة لمساعدة المتصفح على المضي قدمًا في الصور أو البرامج النصية أو الخطوط ، على سبيل المثال. تهتم التلميحات التالية بشكل أكبر بالتنقل والتنبؤ بالمكان الذي قد ينتقل إليه المستخدم بعد الصفحة التي يتم تحميلها حاليًا.
أولها هو الجلب المسبق ، وقد تبدو علامة الارتباط الخاصة بها كما يلي:
<link rel="prefetch" href="https://example.com/news/?page=2" as="document">يخبر هذا المتصفح أنه يمكنه المضي قدمًا وجلب صفحة في الخلفية بحيث تكون جاهزة للعمل عند الطلب. هناك نوع من المقامرة هنا لأنه يتعين عليك استباق المكان الذي تعتقد أن المستخدم سينتقل فيه بعد ذلك. احصل عليه بشكل صحيح ، وقد تظهر الصفحة التالية يتم تحميلها بسرعة كبيرة. إذا فهمت الأمر بشكل خاطئ ، فقد أهدرت الوقت والموارد في تنزيل شيء لن يتم استخدامه. إذا كان المستخدم على اتصال محدود مثل خطة هاتف جوال محدودة ، فقد تكلفهم بالفعل أموالاً حقيقية.
عندما يحدث الجلب المسبق ، يقوم المتصفح ببحث DNS ويجعل اتصال الخادم الذي رأيناه في النوعين السابقين من التلميحات ، ولكن بعد ذلك يخطو خطوة إلى الأمام ويطلب الملفات وينزلها بالفعل. يتوقف عند هذه النقطة ، ومع ذلك ، لا يتم تحليل الملفات أو تنفيذها ولا يتم تطبيقها بأي شكل من الأشكال على الصفحة الحالية. لقد تم طلبها فقط وإبقائها جاهزة.
قد تعتقد أن الجلب المسبق يشبه إلى حد ما إضافة ملف إلى ذاكرة التخزين المؤقت للمتصفح. بدلاً من الحاجة إلى الخروج إلى الخادم وتنزيله عندما ينقر المستخدم على الرابط ، يمكن سحب الملف من الذاكرة واستخدامه بشكل أسرع.
as
في المثال أعلاه ، يمكنك أن ترى أننا نقوم بتعيين السمة as as="document" . هذه سمة اختيارية تخبر المتصفح أن ما نجلبه يجب التعامل معه كمستند (أي صفحة ويب). يتيح ذلك للمتصفح تعيين نفس النوع من رؤوس الطلبات وسياسات الأمان كما لو كنا قد اتبعنا للتو رابطًا لصفحة جديدة.
هناك الكثير من القيم المحتملة للسمة as من خلال تمكين المتصفح من التعامل مع أنواع مختلفة من الجلب المسبق بالطريقة المناسبة.
قيمة as | نوع المورد |
|---|---|
audio | ملفات الصوت والموسيقى |
video | فيديو |
Track | مسارات الفيديو أو الصوت WebVTT |
script | ملفات جافا سكريبت |
style | أوراق أنماط CSS |
font | خطوط الويب |
image | الصور |
fetch | طلبات XHR و Fetch API |
worker | عمال الويب |
embed | طلبات الوسائط المتعددة <embed> |
object | طلبات الوسائط المتعددة <object> |
document | صفحات الانترنت |
القيم المختلفة التي يمكن استخدامها لتحديد أنواع الموارد بالسمة as .
متى يجب علي استخدام prefetch ؟
مرة أخرى ، prefetch لديه دعم متصفح رائع. يجب عليك استخدامه عندما يكون لديك قدر معقول من اليقين من أن المستخدم قد يتابعه من خلال موقعك إذا كنت تعتقد أن تسريع التنقل سيؤثر بشكل إيجابي على تجربة المستخدم. يجب موازنة ذلك مقابل مخاطر إهدار الموارد من خلال احتمالية جلب مورد لم يتم استخدامه بعد ذلك.
عرض مسبق للصفحة التالية
من خلال prefetch ، رأينا كيف يمكن للمتصفح تنزيل الملفات في الخلفية لتكون جاهزة للاستخدام ، ولكننا لاحظنا أيضًا أنه لم يتم فعل أي شيء آخر معهم في تلك المرحلة. يذهب العرض المسبق خطوة أخرى إلى الأمام وينفذ الملفات ، حيث يؤدي إلى حد كبير كل العمل المطلوب لعرض الصفحة باستثناء عرضها فعليًا.
قد يشمل ذلك تحليل المورد لأي مصادر فرعية مثل ملفات JavaScript والصور وإحضارها مسبقًا أيضًا.
<link rel="prerender" href="https://example.com/news/?page=2">يمكن أن يؤدي ذلك حقًا إلى جعل تحميل الصفحة التالية فوريًا ، مع نوع أداء التحميل السريع الذي قد تراه عند الضغط على زر الرجوع في المتصفح. لكن المغامرة أكبر هنا ، لأنك لا تقضي وقتًا في طلب الملفات وتنزيلها فحسب ، بل تقوم بتنفيذها جنبًا إلى جنب مع أي JavaScript وما شابه. قد يستهلك هذا الذاكرة ووحدة المعالجة المركزية (وبالتالي البطارية) بحيث لن يرى المستخدم فائدة إذا انتهى بهم الأمر بعدم طلب الصفحة.
متى يجب علي استخدام prerender ؟
دعم المتصفح للعرض prerender مقيد للغاية حاليًا ، حيث يوفر Chrome و IE القديم فقط (وليس Edge) دعمًا للخيار. قد يحد هذا من فائدته إلا إذا كنت تستهدف Chrome على وجه التحديد. مرة أخرى ، إنها حالة "لا ضرر ولا خطأ" لأن المستخدم لن يرى الفائدة ولكنه لن يسبب أي مشاكل له إذا لم يكن كذلك.
استخدام تلميحات الموارد
لقد رأينا بالفعل كيف يمكن استخدام تلميحات الموارد في <head> لمستند HTML باستخدام علامة <link> . ربما تكون هذه هي الطريقة الأكثر ملاءمة للقيام بذلك ، ولكن يمكنك أيضًا تحقيق الشيء نفسه باستخدام Link: HTTP.
على سبيل المثال ، للجلب المسبق برأس HTTP:
Link: <https://example.com/logo.png>; rel=prefetch; as=image;يمكنك أيضًا استخدام JavaScript لتطبيق تلميحات الموارد ديناميكيًا ، ربما استجابةً لاستخدام التفاعل. لاستخدام مثال من مستند مواصفات W3C:
var hint = document.createElement("link"); hint.rel = "prefetch"; hint.as = "document"; hint.href = "/article/part3.html"; document.head.appendChild(hint);يفتح هذا بعض الاحتمالات المثيرة للاهتمام ، حيث من المحتمل أن يكون من الأسهل التنبؤ بالمكان الذي قد ينتقل إليه المستخدم بعد ذلك بناءً على كيفية تفاعله مع الصفحة.
أشياء يجب ملاحظتها
لقد نظرنا في أربع طرق أكثر قوة بشكل تدريجي لتحميل الموارد مسبقًا ، بدءًا من اللمسة الأخف لمجرد حل DNS وحتى جعل صفحة كاملة جاهزة للعمل في الخلفية. من المهم أن تتذكر أن هذه التلميحات ليست سوى ذلك ؛ إنها تلميحات حول الطرق التي يمكن للمتصفح من خلالها تحسين الأداء . إنها ليست توجيهات. يمكن للمتصفح أخذ اقتراحاتنا واستخدام أفضل أحكامه في تحديد كيفية الرد.
قد يعني هذا أن المتصفح لا يحاول الاستجابة للتلميحات على جهاز مشغول أو ممدود فوق طاقته. إذا كان المستعرض يعرف أنه متصل باتصال محدود ، فقد يقوم بإحضار DNS مسبقًا ولكن ليس الموارد بأكملها ، على سبيل المثال. إذا كانت الذاكرة منخفضة ، فقد يقرر المتصفح مرة أخرى أنه لا يستحق جلب الصفحة التالية حتى يتم إلغاء تحميل الصفحة الحالية.
الحقيقة هي أنه على متصفح سطح المكتب ، من المحتمل أن يتم اتباع جميع التلميحات كما يقترح المطور ، ولكن كن على دراية بأن الأمر متروك للمتصفح في كل حالة.
أهمية الصيانة
إذا كنت قد عملت مع الويب لأكثر من عامين ، فستكون على دراية بحقيقة أنه إذا كان هناك شيء ما على الصفحة غير مرئي ، فغالبًا ما يتم إهماله. تعد البيانات الوصفية المخفية (مثل أوصاف الصفحة) مثالاً جيدًا على ذلك. إذا لم يتمكن الأشخاص الذين يعتنون بالموقع من رؤية البيانات بسهولة ، فيمكن بسهولة إهمالها وتصبح قديمة.
هذه مخاطرة حقيقية مع تلميحات الموارد. نظرًا لأن الشفرة مخفية بعيدًا ولا يتم اكتشافها إلى حد كبير أثناء الاستخدام ، فسيكون من السهل جدًا تغيير الصفحة وأي تلميحات حول الموارد لن يتم تحديثها. نتيجة الجلب المسبق لصفحة لا تستخدمها ، على سبيل المثال ، تعني أن الأدوات التي وضعتها لتحسين أداء موقعك تلحق الضرر به بشكل فعال. لذا فإن وجود إجراءات جيدة في مكانها لتحديث تلميحات الموارد الخاصة بك يصبح أمرًا مهمًا حقًا .
موارد
- "مواصفات تلميحات الموارد ،" W3C
- "تسريع التنقل في الصفحة التالية مع الجلب المسبق" ، آدي عثماني