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

Addy Osmani

Barry Pollard

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

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

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

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

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

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

<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 مجموعة التحميل الكسول للصور والفيديوهات

مع "دوم فارولينو" و"سكوت ليتل" و"حسين دجيرده" و"سيمون بيترز" و"كايس باسكيس" و"جو ميدلي" و"ستويان" "ستيفانوف" عن مراجعاتهم