بارگذاری تنبل تصاویر و <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 تمام CSS در صفحه، درخواست می‌شود - نه اینکه به محض کشف آن واکشی شود. توسط اسکنر پیش بارگذاری در نشانه گذاری خام .

از آنجایی که ویژگی loading در عنصر <img> در تمام مرورگرهای اصلی پشتیبانی می‌شود، نیازی به استفاده از جاوا اسکریپت برای بارگذاری تنبل تصاویر نیست، زیرا افزودن جاوا اسکریپت اضافی به صفحه برای ارائه قابلیت‌هایی که مرورگر از قبل ارائه می‌دهد، بر جنبه‌های دیگر عملکرد صفحه تأثیر می‌گذارد، مانند به عنوان INP.

دموی بارگذاری تنبل تصویر

بار تنبل عناصر <iframe>

بارگیری تنبل عناصر <iframe> تا زمانی که در نمای نمای قابل مشاهده باشند، می تواند داده های قابل توجهی را ذخیره کند و بارگیری منابع مهمی را که برای بارگیری صفحه سطح بالا لازم است، بهبود بخشد. علاوه بر این، از آنجایی که عناصر <iframe> اساساً کل اسناد HTML هستند که در یک سند سطح بالا بارگذاری می‌شوند، می‌توانند شامل تعداد قابل توجهی از منابع فرعی – به‌ویژه جاوا اسکریپت – باشند که اگر وظایف درون آن فریم‌ها به زمان پردازش قابل‌توجهی نیاز داشته باشند، می‌توانند به طور قابل توجهی بر INP صفحه تأثیر بگذارند.

تعبیه‌های شخص ثالث یک مورد رایج برای عناصر <iframe> است. به عنوان مثال، پخش‌کننده‌های ویدئویی جاسازی‌شده یا پست‌های رسانه‌های اجتماعی معمولاً از عناصر <iframe> استفاده می‌کنند و اغلب به تعداد قابل توجهی از منابع فرعی نیاز دارند که می‌تواند منجر به مناقشه در پهنای باند برای منابع صفحه سطح بالا شود. به عنوان مثال، بارگذاری تنبل یک ویدیوی یوتیوب باعث صرفه جویی بیش از 500 کیلو بایت در طول بارگذاری صفحه اولیه می شود، در حالی که بارگذاری تنبل افزونه دکمه لایک فیس بوک بیش از 200 کیلوبایت ذخیره می کند که بیشتر آن جاوا اسکریپت است.

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

ویژگی loading برای عناصر <iframe>

ویژگی loading در عناصر <iframe> نیز در همه مرورگرهای اصلی پشتیبانی می‌شود. مقادیر مشخصه loading و رفتارهای آنها مانند عناصر <img> است که از ویژگی loading استفاده می کنند:

• "eager" مقدار پیش فرض است. به مرورگر اطلاع می دهد که HTML عنصر <iframe> و منابع فرعی آن را فوراً بارگیری کند.
• "lazy" بارگذاری HTML عنصر <iframe> و منابع فرعی آن را تا زمانی که در فاصله از پیش تعریف شده ای از viewport قرار گیرد به تعویق می اندازد.

بارگذاری تنبل نسخه ی نمایشی iframes

نماها

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

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

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

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

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

از طرف دیگر، با یک نما، می توان دکمه شخص ثالث "شروع چت" را با یک دکمه جعلی جایگزین کرد. هنگامی که کاربر به طور معناداری با آن تعامل کرد - مانند نگه داشتن نشانگر روی آن برای مدت زمان معقولی یا با یک کلیک - ویجت واقعی و کاربردی چت در زمانی که کاربر به آن نیاز دارد در جای خود قرار می گیرد.

در حالی که مطمئناً می‌توانید نماهای خود را بسازید، گزینه‌های منبع باز برای اشخاص ثالث محبوب‌تر در دسترس هستند، مانند lite-youtube-embed برای ویدیوهای YouTube، lite-vimeo-embed برای ویدیوهای Vimeo، و React Live Chat Loader برای ویجت‌های چت. .

کتابخانه های بارگذاری تنبل جاوا اسکریپت

اگر نیاز دارید که عناصر <video> ، تصاویر poster عنصر <video> ، تصاویر بارگیری شده توسط ویژگی background-image CSS یا سایر عناصر پشتیبانی نشده را بارگذاری کنید، می‌توانید این کار را با یک راه‌حل بارگذاری تنبل مبتنی بر جاوا اسکریپت انجام دهید، مانند lazysizes یا yall.js ، زیرا بارگیری تنبل این نوع منابع یک ویژگی در سطح مرورگر نیست.

به طور خاص، پخش خودکار و حلقه کردن عناصر <video> بدون تراک صوتی، جایگزین بسیار کارآمدتری نسبت به استفاده از GIF های متحرک است، که اغلب می تواند چندین برابر بزرگتر از یک منبع ویدیویی با کیفیت بصری معادل باشد. با این وجود، این ویدیوها همچنان می توانند از نظر پهنای باند قابل توجه باشند، بنابراین بارگذاری تنبل آنها یک بهینه سازی اضافی است که می تواند تا حد زیادی به کاهش پهنای باند تلف شده کمک کند.

اکثر این کتابخانه‌ها با استفاده از Intersection Observer API کار می‌کنند - و همچنین اگر HTML صفحه بعد از بارگذاری اولیه تغییر کند، از Mutation Observer API استفاده می‌کنند تا تشخیص دهند که چه زمانی یک عنصر وارد نمای کاربر می‌شود. اگر تصویر قابل مشاهده است – یا به نمای درگاه نزدیک می شود – کتابخانه جاوا اسکریپت ویژگی غیر استاندارد (اغلب data-src یا ویژگی مشابه) را با ویژگی صحیح، مانند src جایگزین می کند.

فرض کنید ویدیویی دارید که جایگزین یک GIF متحرک می شود، اما می خواهید آن را با یک راه حل جاوا اسکریپت بارگذاری کنید. این با 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> را دارید، در موقعیت خوبی هستید تا مطمئن شوید که صفحات می‌توانند سریع‌تر بارگیری شوند و در عین حال به نیازهای کاربران خود احترام بگذارید. با این حال، مواردی وجود دارد که در آنها بارگذاری سوداگرانه منابع می تواند مطلوب باشد. در ماژول بعدی ، در مورد واکشی و اجرای پیش‌پرداخت، و اینکه چگونه این تکنیک‌ها - وقتی با دقت استفاده می‌شوند - می‌توانند به طور قابل ملاحظه‌ای سرعت پیمایش به صفحات بعدی را با بارگیری زودتر از موعد آنها افزایش دهند، بیاموزید.