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

غالبًا ما تستهلك الصور وعناصر <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> التابع لجهة خارجية وموارده الفرعية.

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

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

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

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

مكتبات التحميل البطيء لبرامج JavaScript

إذا كنت بحاجة إلى تحميل عناصر <video> أو صور poster <video> أو صور تحمّلها خاصية background-image في CSS أو عناصر أخرى غير متوافقة بشكل بطيء، يمكنك إجراء ذلك باستخدام حلّ تحميل بطيء يستند إلى 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> بشكل بطيء، أصبحت في وضع جيد لضمان تحميل الصفحات بشكل أسرع مع مراعاة احتياجات المستخدمين. ومع ذلك، هناك حالات يمكن فيها أن يكون loading speculative of resourcesمرغوبًا فيه. في الوحدة التالية، تعرَّف على ميزة "التحميل المُسبَق" وميزة "العرض المُسبَق"، وكيفية مساعدة هاتين الطريقتَين في تسريع الانتقال إلى الصفحات اللاحقة بشكل كبير من خلال تحميلها مسبقًا، وذلك عند استخدامهما بعناية.