زمان آن فرا رسیده است که iframe های خارج از صفحه را با تنبلی بارگذاری کنید!

آدی عثمانی

بارگذاری تنبل عناصر <iframe> بارگذاری iframe های خارج از صفحه را تا زمانی که کاربر در نزدیکی آنها حرکت کند به تعویق می اندازد. این باعث صرفه جویی در داده ها، افزایش سرعت بارگذاری سایر قسمت های صفحه و کاهش مصرف حافظه می شود.

شما به مرورگر نشان می‌دهید که می‌خواهید یک iframe را با ویژگی loading لود کنید، به همان روشی که بارگذاری تنبل را برای تصاویر نشان می‌دهید.

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

این نسخه نمایشی <iframe loading=lazy> جاسازی‌های ویدیویی با بارگذاری تنبل را نشان می‌دهد:

چرا iframes با بار تنبلی؟

تعبیه‌های شخص ثالث طیف گسترده‌ای از موارد استفاده، از پخش‌کننده‌های ویدیو، پست‌های رسانه‌های اجتماعی و تبلیغات را پوشش می‌دهند. اغلب این محتوا بلافاصله در نمای کاربر قابل مشاهده نیست. در عوض، فقط زمانی که صفحه را به سمت پایین تر حرکت می کنند، دیده می شود. با وجود این، کاربران هزینه بارگیری داده ها و جاوا اسکریپت پرهزینه را برای هر فریم پرداخت می کنند، حتی اگر به آن پیمایش نکنند.

بر اساس تحقیقات کروم در مورد بارگیری خودکار iframe های خارج از صفحه با تنبلی برای کاربران «بهینه ساز داده» ، iframes با بارگذاری تنبل می تواند منجر به 2-3٪ صرفه جویی متوسط ​​داده، 1-2٪ کاهش اولین رنگ محتوای محتوا در میانه و 2٪ تاخیر در ورودی اول شود ( FID) بهبود در صدک 95.

بعلاوه، iframe های خارج از صفحه با بارگذاری تنبل می توانند مزایایی را به بزرگترین رنگ محتوایی (LCP) منتقل کنند. نامزدهای LCP ، مانند تصاویر یا متن وابسته به فونت های وب به منظور ارائه. از آنجایی که iframe ها اغلب می توانند به پهنای باند قابل توجهی برای بارگیری همه منابع فرعی خود نیاز داشته باشند، iframe های خارج از صفحه با بارگذاری تنبل می توانند به طور قابل توجهی کشمکش پهنای باند را در دستگاه های دارای محدودیت شبکه کاهش دهند و پهنای باند بیشتری را برای بارگیری منابعی که به LCP صفحه کمک می کنند باقی بگذارند.

بارگذاری تنبل داخلی برای iframe چگونه کار می کند؟

ویژگی loading به مرورگر اجازه می‌دهد تا بارگذاری iframe‌ها و تصاویر خارج از صفحه را تا زمانی که کاربران در نزدیکی آنها حرکت کنند به تعویق بیاندازد. loading از دو مقدار پشتیبانی می کند:

• lazy : کاندیدای خوبی برای بارگذاری تنبل است.
• eager : کاندیدای خوبی برای بارگذاری تنبل نیست. بلافاصله بارگیری کنید.

استفاده از ویژگی loading در iframes به صورت زیر عمل می کند:

<!-- 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 به صورت پویا از طریق جاوا اسکریپت دارید، تنظیم 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>

حکایت: وقتی به جاسازی‌های یوتیوب با بارگیری تنبل برای Chrome.com روی آوردیم، 10 ثانیه از زمان تعامل صفحات ما در دستگاه‌های تلفن همراه صرفه‌جویی کردیم. من یک باگ داخلی با یوتیوب باز کرده ام تا درباره اضافه کردن loading=lazy به کد جاسازی آن بحث کنم.

جاسازی های اینستاگرام با بارگذاری تنبل (حدود 100 کیلوبایت گیگزیپ در بارگذاری اولیه صرفه جویی می کند):

تعبیه‌های اینستاگرام بلوکی از نشانه‌گذاری و یک اسکریپت را ارائه می‌کنند که یک 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‌های با بارگذاری تنبل را برای محتوای رسانه نشان می‌دهند، این پتانسیل برای مشاهده این مزایا برای تبلیغات نیز وجود دارد.

مطالعه موردی: بارگذاری تنبل پلاگین های اجتماعی فیس بوک

افزونه های اجتماعی فیس بوک به توسعه دهندگان اجازه می دهد تا محتوای فیس بوک را در صفحات وب خود جاسازی کنند. تعدادی از این افزونه‌ها ارائه می‌شوند، مانند پست‌های جاسازی شده، عکس‌ها، ویدیوها، نظرات... محبوب‌ترین آنها افزونه لایک است - دکمه‌ای که تعداد افرادی که صفحه را «پسندیده‌اند» نشان می‌دهد. به طور پیش فرض، تعبیه افزونه Like در یک صفحه وب (با استفاده از JSSDK فیس بوک) حدود 215 کیلوبایت منابع را جذب می کند که 197 کیلوبایت آن جاوا اسکریپت است. در بسیاری از موارد، افزونه ممکن است در انتهای یک مقاله یا نزدیک به انتهای یک صفحه ظاهر شود، بنابراین بارگیری آن با اشتیاق زمانی که خارج از صفحه است ممکن است بهینه نباشد.

به لطف مهندس Stoyan Stefanov، همه افزونه های اجتماعی فیس بوک اکنون از بارگذاری تنبلی استاندارد iframe پشتیبانی می کنند . توسعه‌دهندگانی که از طریق پیکربندی data-lazy بارگذاری تنبل را انتخاب می‌کنند، اکنون می‌توانند تا زمانی که کاربر در نزدیکی آن حرکت کند، از بارگیری آن جلوگیری کنند. این امکان را فراهم می کند تا جاسازی همچنان برای کاربرانی که به آن نیاز دارند به طور کامل کار کند، در حالی که صرفه جویی در داده را برای کسانی که تمام مسیر را به پایین صفحه پیمایش نمی کنند ارائه می دهد. امیدواریم این اولین مورد از تعبیه‌هایی باشد که بارگذاری تنبل استاندارد شده iframe در تولید را بررسی می‌کند.

آیا می توانم با مرورگر متقابل iframes بارگذاری تنبلی انجام دهم؟ آره

iframe lazy-loading را می توان به عنوان یک بهبود پیشرونده اعمال کرد. مرورگرهایی که از loading=lazy در iframe پشتیبانی می‌کنند، iframe را با تنبلی بارگذاری می‌کنند، در حالی که ویژگی loading در مرورگرهایی که هنوز آن را پشتیبانی نمی‌کنند نادیده گرفته می‌شود.

همچنین با استفاده از کتابخانه جاوا اسکریپت 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>

آیا مواردی وجود دارد که آیفریم های خارج از صفحه با loading=lazy همچنان بارگذاری شوند؟

یک آزمایش اولیه با بارگیری خودکار iframes با تنبلی برای کاربران Data Saver در Chrome استثنایی برای iframe های پنهان داشت که اغلب برای ارتباطات یا تجزیه و تحلیل استفاده می شد. اینها از بارگذاری تنبلی جلوگیری می کردند و همیشه برای جلوگیری از شکستن این قابلیت ها بارگذاری می شدند.

با مشخصه loading ، انتخاب دوباره به توسعه‌دهنده بازمی‌گردد، بنابراین چنین اکتشافی اعمال نمی‌شود و ویژگی loading باید همیشه رعایت شود، مشروط به محدودیت‌های فاصله و سایر انتخاب‌های مرورگر (مثلاً چاپ).

نتیجه

برای ایده‌های بیشتر در مورد بارگذاری تنبل ، مجموعه بارگذاری تنبلی تصویر و ویدیو web.dev را بررسی کنید.

با تشکر از Dom Farolino، Scott Little، Houssein Djirdeh، Simon Pieters، Kayce Basques، Joe Medley و Stoyan Stefanov برای نقدهایشان.