التحميل الكسول للصور وعناصر <iframe>

bookmark_border تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

غالبًا ما تستهلك الصور وعناصر <iframe> معدل نقل بيانات أكبر من أنواع الموارد الأخرى. في حالة عناصر <iframe>، قد يستغرق تحميل الصفحات وعرضها وقتًا إضافيًا.

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

في ما يتعلّق بعناصر <iframe>، يمكن تحسين مدى استجابة الصفحة لتفاعلات المستخدم (INP) أثناء بدء التشغيل من خلال تحميلها بشكل كسول. ويرجع ذلك إلى أنّ <iframe> هو مستند HTML منفصل تمامًا يتضمّن موارد فرعية خاصة به. على الرغم من إمكانية تشغيل عناصر <iframe> في عملية منفصلة، من الشائع أن تشارك هذه العناصر عملية مع سلاسل محادثات أخرى، ما قد يؤدي إلى حالات تصبح فيها الصفحات أقل استجابةً لإدخال المستخدم.

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

صور تظهر بأسلوب "التحميل الكسول" باستخدام السمة loading

يمكن إضافة السمة loading إلى عناصر <img> لإخبار المتصفحات بكيفية تحميلها:

• يُعلم "eager" المتصفّح بأنّه يجب تحميل الصورة على الفور، حتى لو كانت خارج إطار العرض الأولي. وهذه هي أيضًا القيمة التلقائية للسمة loading.
• تؤجّل السمة "lazy" تحميل الصورة إلى أن تصبح على مسافة محدّدة من إطار العرض المرئي. يختلف مقدار هذه المسافة حسب المتصفّح، ولكن غالبًا ما يتم ضبطها على قيمة كبيرة بما يكفي لتحميل الصورة قبل أن يصل إليها المستخدم أثناء التمرير.

يجب أيضًا الانتباه إلى أنّه في حال استخدام العنصر <picture>، يجب تطبيق السمة loading على العنصر الثانوي <img>، وليس على العنصر <picture> نفسه. والسبب في ذلك هو أنّ العنصر <picture> هو حاوية تحتوي على عناصر <source> إضافية تشير إلى صور مرشّحة مختلفة، ويتم تطبيق الصورة المرشّحة التي يختارها المتصفّح مباشرةً على العنصر الثانوي <img>.

لا تستخدِم أسلوب "التحميل الكسول" للصور التي تظهر في إطار العرض الأولي

يجب إضافة السمة loading="lazy" إلى عناصر <img> التي يتم وضعها خارج إطار العرض الأولي فقط. ومع ذلك، قد يكون من الصعب معرفة الموضع الدقيق لعنصر معيّن بالنسبة إلى إطار العرض قبل عرض الصفحة. يجب مراعاة أحجام إطارات العرض ونسب العرض إلى الارتفاع والأجهزة المختلفة.

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

ومع ذلك، هناك بعض الحالات التي يكون فيها من الواضح تمامًا أنّه يجب تجنُّب تطبيق loading="lazy". على سبيل المثال، يجب بالتأكيد حذف السمة loading="lazy" من عناصر <img> في حالات الصور الرئيسية أو حالات استخدام الصور الأخرى التي من المحتمل أن تظهر فيها عناصر <img> في الجزء الظاهر من الصفحة أو بالقرب من أعلى التنسيق على أي جهاز. تزداد أهمية ذلك بالنسبة إلى الصور التي من المحتمل أن تكون مرشحة لعرض مقياس LCP.

يجب أن تنتظر الصور التي يتم تحميلها بشكل كسول إلى أن تنتهي عملية تحديد موضعها في المتصفّح، وذلك لمعرفة ما إذا كان موضع الصورة النهائي ضمن إطار العرض. وهذا يعني أنّه إذا كان العنصر <img> في إطار العرض المرئي يتضمّن السمة loading="lazy"، لن يتم طلب العنصر إلا بعد تنزيل جميع ملفات CSS وتحليلها وتطبيقها على الصفحة، بدلاً من جلبها فور اكتشافها من خلال أداة فحص التحميل المسبق في الترميز الأولي.

بما أنّ السمة loading في العنصر <img> متوافقة مع جميع المتصفحات الرئيسية، ما مِن حاجة إلى استخدام JavaScript لتأجيل تحميل الصور، لأنّ إضافة JavaScript إضافي إلى الصفحة لتوفير إمكانات يوفّرها المتصفّح يؤثّر في جوانب أخرى من أداء الصفحة، مثل مقياس INP.

عرض توضيحي لأسلوب "التحميل الكسول" للصور

تحميل عناصر <iframe> بأسلوب "التحميل الكسول"

يمكن أن يؤدي التحميل الكسول لعناصر <iframe> إلى أن تصبح مرئية في إطار العرض إلى توفير كمية كبيرة من البيانات وتحسين تحميل الموارد المهمة المطلوبة لتحميل الصفحة ذات المستوى الأعلى. بالإضافة إلى ذلك، بما أنّ عناصر <iframe> هي في الأساس مستندات HTML كاملة يتم تحميلها ضِمن مستند ذي مستوى أعلى، يمكن أن تتضمّن عددًا كبيرًا من الموارد الفرعية، خاصةً JavaScript، ما قد يؤثّر بشكل كبير في مقياس INP للصفحة إذا كانت المهام ضِمن تلك الإطارات تتطلّب وقت معالجة كبيرًا.

تُعدّ عمليات التضمين التابعة لجهات خارجية من حالات الاستخدام الشائعة لعناصر <iframe>. على سبيل المثال، تستخدم مشغّلات الفيديو المضمّنة أو المشاركات على وسائل التواصل الاجتماعي عادةً عناصر <iframe>، وغالبًا ما تتطلّب عددًا كبيرًا من الموارد الفرعية التي يمكن أن تؤدي أيضًا إلى حدوث تعارض في معدل نقل البيانات لموارد الصفحة ذات المستوى الأعلى. على سبيل المثال، يؤدي التحميل الكسول لتضمين فيديو YouTube إلى توفير أكثر من 500 كيلوبايت أثناء التحميل الأولي للصفحة، بينما يؤدي التحميل الكسول لمكوّن زر الإعجاب الإضافي على Facebook إلى توفير أكثر من 200 كيلوبايت، معظمها من JavaScript.

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

السمة loading لعناصر <iframe>

تتوفّر السمة loading في عناصر <iframe> أيضًا في جميع المتصفحات الرئيسية. قيم السمة loading وسلوكها هي نفسها كما هو الحال مع عناصر <img> التي تستخدم السمة loading:

• "eager" هي القيمة التلقائية. يُعلم هذا الرابط المتصفّح بأنّه يجب تحميل رمز HTML الخاص بالعنصر <iframe> وموارده الفرعية على الفور.
• يؤجّل "lazy" تحميل HTML الخاص بالعنصر <iframe> والموارد الفرعية إلى أن يصبح على مسافة محدّدة مسبقًا من إطار العرض.

عرض توضيحي لإطارات iframe التي يتم تحميلها بأسلوب "التحميل الكسول"

واجهات مبانٍ

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

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

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

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

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

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

مع أنّه من الممكن بالتأكيد إنشاء واجهات خاصة بك، تتوفّر خيارات مفتوحة المصدر للجهات الخارجية الأكثر شيوعًا، مثل lite-youtube-embed لفيديوهات YouTube، وlite-vimeo-embed لفيديوهات Vimeo، وReact Live Chat Loader لأدوات الدردشة.

مكتبات التحميل الكسول في JavaScript

إذا كنت بحاجة إلى تحميل العناصر <video> بشكل كسول، أو صور العنصر <video> poster، أو الصور التي يتم تحميلها بواسطة خاصية CSS background-image، أو العناصر الأخرى غير المتوافقة، يمكنك إجراء ذلك باستخدام حل تحميل كسول يستند إلى JavaScript، مثل lazysizes أو yall.js، لأنّ التحميل الكسول لهذه الأنواع من الموارد ليس ميزة على مستوى المتصفّح.

على وجه الخصوص، يُعدّ التشغيل التلقائي وتكرار عناصر <video> بدون مقطع صوتي بديلاً أكثر فعالية بكثير من استخدام صور GIF المتحركة، والتي يمكن أن يكون حجمها أكبر عدة مرات من حجم مصدر فيديو بجودة مرئية مماثلة. ومع ذلك، يمكن أن تكون هذه الفيديوهات مهمة من حيث معدل نقل البيانات، لذا فإنّ تحميلها عند الطلب هو تحسين إضافي يمكن أن يساهم بشكل كبير في تقليل معدل نقل البيانات غير المستخدَم.

تعمل معظم هذه المكتبات باستخدام Intersection Observer API، بالإضافة إلى Mutation Observer API إذا تغيّر رمز HTML الخاص بالصفحة بعد التحميل الأوّلي، وذلك للتعرّف على الوقت الذي يظهر فيه أحد العناصر في إطار العرض الخاص بالمستخدم. إذا كانت الصورة مرئية أو على وشك الظهور في إطار العرض، سيستبدل مكتبة JavaScript السمة غير المتوافقة مع المعايير (غالبًا data-src أو سمة مشابهة) بالسمة الصحيحة، مثل src.

لنفترض أنّ لديك فيديو يحلّ محلّ صورة GIF متحركة، ولكنّك تريد تحميله بشكل كسول باستخدام حلّ JavaScript. يمكن إجراء ذلك باستخدام yall.js مع نمط الترميز التالي:

<!-- The autoplay, loop, muted, and playsinline attributes are to
     ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
  <source data-src="video.webm" type="video/webm">
  <source data-src="video.mp4" type="video/mp4">
</video>

تتتبّع yall.js تلقائيًا جميع عناصر HTML المؤهّلة التي تحمل الفئة "lazy". بعد تحميل وتنفيذ yall.js على الصفحة، لن يتم تحميل الفيديو إلا عندما يمرّره المستخدم إلى إطار العرض. في هذه المرحلة، يتم استبدال سمات data-src في عناصر <source> الثانوية الخاصة بالعنصر <video> بسمات src، ما يؤدي إلى إرسال طلب لتنزيل الفيديو وبدء تشغيله تلقائيًا.

اختبِر معلوماتك

الموضوع التالي: الجلب المُسبَق والعرض المُسبَق

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