التحميل الكسول للصور وعناصر <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" هي القيمة التلقائية. تطلب هذه السياسة من المتصفِّح تحميل <iframe>. HTML للعنصر وموارده الفرعية على الفور.
• تؤدي "lazy" إلى تأجيل تحميل ملف HTML للعنصر <iframe> وموارده الفرعية. إلى أن تكون على مسافة محدّدة مسبقًا من إطار العرض.

الإصدار التجريبي من إطارات iframe التي يتم تحميلها باستخدام طريقة "التحميل الكسول"

واجهات مبانٍ

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

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

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

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

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

أما بالنسبة إلى الواجهة، فمن الممكن استبدال الطرف الثالث "Start" Chat" مع زر وهمي. بمجرد أن يتفاعل المستخدم بشكل هادف مع — مثل وضع مؤشر الماوس فوقها لفترة زمنية معقولة أو بنقرة واحدة، يتم تثبيت أداة الدردشة الفعلية والفعالة في مكانها عند المستخدم في حاجة إليها.

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

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

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