حان الوقت للتحميل الكسول لإطارات iframe خارج الشاشة

Addy Osmani

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

كما هي الحال في التحميل الكسول للصور، استخدِم السمة loading لإعلام المتصفّح بأنّك تريد استخدام التحميل الكسول لإطار iframe.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

يعرض هذا العرض التوضيحي لـ <iframe loading=lazy> فيديوهات مضمّنة بالتحميل الكسول:

ما هي أهمية إطارات iframe ذات التحميل الكسول؟

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

استنادًا إلى الأبحاث التي أجرتها Chrome حول إطارات iframe التلقائية التحميل الكسول خارج الشاشة لمستخدمي ميزة "توفير البيانات"، يمكن أن تؤدي إطارات iframe التي يتم تحميلها ببطء إلى توفير متوسط البيانات بنسبة تتراوح بين 2% و3% وانخفاض بنسبة 1% إلى %2 وتخفيض نسبة سرعة عرض أول محتوى مرئي بنسبة 2% وتحسينات مهلة الاستجابة الأولى (FID) عند نسبة 95%.

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

كيف تعمل ميزة التحميل الكسول المضمَّنة في إطارات iframe؟

تسمح السمة loading للمتصفّح بتأجيل تحميل إطارات iframe والصور خارج الشاشة إلى أن يمرّر المستخدمون بالقرب منها. تتيح القيمة loading استخدام قيمتَين:

• lazy: مناسبة للتحميل الكسول
• eager: ليست مرشحة بشكل جيد للتحميل الكسول. تحميل في الحال.

يعمل استخدام السمة loading على إطارات iframe على النحو التالي:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

عدم تحديد السمة له نفس تأثير تحميل المورد بشكل صريح.

إذا كنت بحاجة إلى إنشاء إطارات iframe بشكل ديناميكي باستخدام JavaScript، سيكون الإعداد iframe.loading = 'lazy' على العنصر متوافقًا أيضًا:

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

كيف تؤثر تضمينات iframe الشائعة التحميل الكسول في تجربة المستخدم؟

سيؤدي جعل إطارات iframe ذات التحميل الكسول هي الإعدادات التلقائية إلى زيادة استجابة المواقع الإلكترونية. توضح الأمثلة التالية التحسينات في وقت التفاعل وتوفير البيانات للإطارات المضمَّنة في الوسائط، إلا أنّ إطارات iframe الإعلانية ذات التحميل الكسول يمكن أن توفّر مزايا مماثلة.

YouTube

توفّر الفيديوهات المضمَّنة على YouTube والتي يتم تحميلها ببطء حوالى 500 كيلوبايت عند التحميل الأوليّ للصفحة:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

Instagram

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

Spotify

يمكن أن توفر تضمينات Spotify التحميل الكسول 514 كيلوبايت عند التحميل الأولي.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

مكوّنات Facebook الإضافية المخصّصة للتواصل الاجتماعي

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

بفضل المهندس "ستويان ستيفانوف"، أصبحت جميع المكوّنات الإضافية الاجتماعية على Facebook تتوافق الآن مع معيار iframe للتحميل الكسول. أصبح الآن بإمكان المطوّرين الذين فعّلوا ميزة التحميل الكسول من خلال إعدادات data-lazy الخاصة بالمكوّنات الإضافية منع تحميل هذه المكوّنات الإضافية إلى أن يمرّر المستخدم المحتوى في مكان قريب. ويسمح هذا الإجراء بمواصلة عمل التضمين للمستخدمين الذين يحتاجون إليه، مع توفير البيانات للمستخدمين الذين لا ينتقلون إلى أسفل الصفحة. نأمل أن تكون هذه الميزة هي الأولى من بين العديد من التضمينات التي تستكشف ميزة التحميل الكسول لإطار iframe الموحّد في الإنتاج.

التحميل الكسول لإطار iframe على جميع المتصفّحات

يمكنك تطبيق التحميل الكسول لإطار iframe على موقعك الإلكتروني كتحسين تدريجي. المتصفّحات التي تتوافق مع loading=lazy على إطارات iframe باستخدام التحميل الكسول لإطار iframe والمتصفّحات التي لا تتيح السمة loading تتجاهله بأمان.

يمكنك أيضًا استخدام التحميل الكسول لإطارات iframe خارج الشاشة باستخدام مكتبة JavaScript lazysizes. وقد تحتاج إلى إجراء ذلك في الحالات التالية:

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

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

استخدِم النمط التالي لرصد التحميل الكسول وجلب الحجم الكسول عندما لا يكون متاحًا:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

هل هناك استثناءات لاستخدام طريقة \"التحميل الكسول\" في إطار iframe خارج الشاشة؟

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

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

المراجِع

للاطّلاع على مزيد من الأفكار التي تستخدم طريقة التحميل الكسول للمحتوى، اطّلِع على مجموعة التحميل الكسول للصور والفيديوهات على موقع web.dev.

شكرًا لـ "دوم فارولينو" و"سكوت ليتل" و"حسين دجيرده" و"سايمون بيترز" و"كايس باسك" و"جو ميدلي" و"ستويان ستيفانوف" على مراجعاتهم.