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

آدي عثمانية

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

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

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

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

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

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

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

بالإضافة إلى ذلك، يمكن لإطارات iframe ذات التحميل الكسول خارج الشاشة منح مزايا سرعة عرض أكبر محتوى مرئي (LCP). المرشّحون لسرعة 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 ذات التحميل الكسول خارج الشاشة الخيار التلقائي، ستبدو على النحو التالي:

تضمينات فيديوهات 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>

حكاية: عندما تحوّلنا إلى تضمينات YouTube الكسولة التحميل على Chrome.com، وفّرنا 10 ثوانٍ من الوقت الذي يمكن أن تصبح فيه صفحاتنا تفاعلية على الأجهزة الجوّالة. لقد فتحتُ خطأً داخليًا في YouTube لمناقشة إضافة loading=lazy إلى رمز التضمين.

عمليات التحميل الكسول في Instagram (يتم حفظ 100 كيلوبايت تقريبًا من خلال ضغطها عند التحميل الأولي):

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

عمليات التحميل الكسول في 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>

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

دراسة حالة: التحميل الكسول للمكوّنات الإضافية الاجتماعية على Facebook

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

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

هل يمكنني التحميل الكسول لإطارات iframe في جميع المتصفِّحات؟ نعم

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

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

• تتطلّب هذه الطريقة مزيدًا من حدود التحميل الكسول المخصّصة مقارنةً بما يوفّره حاليًا التحميل الكسول الموحّد
• توفير تجربة التحميل الكسول لـ iframe في إطار 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 خارج الشاشة باستخدام loading=lazy؟

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

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

الخلاصة

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

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