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

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

في حال استخدام \"التحميل الكسول\"، يمكن أن يساعد تأجيل تحميل الصور التي تقع خارج إطار العرض الأولي في تقليل تزايد الطلب على معدل نقل البيانات للموارد الأكثر أهمية ضمن إطار العرض الأولي. ويساهم ذلك في تحسين سرعة عرض أكبر محتوى مرئي (LCP) للصفحة في بعض الحالات التي تكون فيها اتصالات الشبكة ضعيفة، كما يمكن أن يساعد إعادة تخصيص معدل نقل البيانات في تحميل المرشّحين لسرعة 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> أو صور poster أو الصور التي يتم تحميلها باستخدام السمة background-image في CSS أو غيرها من العناصر غير المتوافقة، يمكنك استخدام أحد حلول التحميل الكسول المستند إلى JavaScript، مثل التحميل الكسول أو yall.js، لأنّ طريقة التحميل الكسول لهذه الأنواع من الموارد ليست ميزة على مستوى المتصفّح.<video>

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

تعمل معظم هذه المكتبات باستخدام واجهة برمجة تطبيقات Intersection Monitorer بالإضافة إلى Mutation Monitorer 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>، أصبحت في وضع جيد لضمان إمكانية تحميل الصفحات بسرعة أكبر مع احترام احتياجات المستخدمين. ومع ذلك، هناك حالات قد يكون فيها التحميل المبني على توقُّع للموارد أمرًا مرغوبًا فيه. في الوحدة التالية، تعرَّف على الجلب المسبق والعرض المُسبَق، وكيف يمكن لهذه الأساليب، عند استخدامها بعناية، تسريع عمليات الانتقال إلى الصفحات اللاحقة بشكلٍ كبير عن طريق تحميلها مُسبقًا.