بخشی از تصاویر و ویدیوها در بار معمولی یک وب سایت می تواند قابل توجه باشد. متأسفانه، ذینفعان پروژه ممکن است تمایلی به حذف منابع رسانه ای از برنامه های موجود خود نداشته باشند. چنین بن‌بست‌هایی ناامیدکننده هستند، به خصوص زمانی که همه طرف‌های درگیر می‌خواهند عملکرد سایت را بهبود بخشند، اما نمی‌توانند در مورد چگونگی رسیدن به آن توافق کنند. خوشبختانه، بارگذاری تنبل راه حلی است که بار اولیه و زمان بارگذاری صفحه را کاهش می دهد، اما در محتوا کوتاهی نمی کند.
بارگذاری تنبل چیست؟
بارگذاری تنبل تکنیکی است که بارگذاری منابع غیر بحرانی را در زمان بارگذاری صفحه به تعویق می اندازد. در عوض، این منابع غیر بحرانی در لحظه نیاز بارگذاری می شوند. در مورد تصاویر، "غیر انتقادی" اغلب مترادف با "خارج از صفحه" است. اگر از Lighthouse استفاده کرده‌اید و برخی فرصت‌ها را برای بهبود بررسی کرده‌اید، ممکن است راهنمایی‌هایی را در این حوزه به شکل Defer images offscreen مشاهده کرده باشید:
احتمالاً قبلاً بارگذاری تنبل را در عمل دیده اید، و چیزی شبیه به این است:
- به صفحه‌ای می‌رسید و با خواندن محتوا شروع به پیمایش می‌کنید.
- در برخی مواقع، شما یک تصویر نگهدارنده مکان را در پنجره نمایش اسکرول می کنید.
- تصویر جایگیر به طور ناگهانی با تصویر نهایی جایگزین می شود.
نمونه‌ای از بارگذاری تنبل تصویر را می‌توان در پلتفرم انتشار محبوب Medium پیدا کرد، که تصاویر نگهدارنده مکان سبک وزن را در بارگذاری صفحه بارگیری می‌کند، و در حین پیمایش در نمای نمایش، آنها را با تصاویر با تنبلی جایگزین می‌کند.
اگر با بارگذاری تنبل آشنا نیستید، ممکن است تعجب کنید که این تکنیک چقدر مفید است و مزایای آن چیست. بخوانید تا متوجه شوید!
چرا تصاویر یا ویدیوها به جای بارگیری با تنبلی بارگذاری می شوند؟
زیرا ممکن است چیزهایی را بارگیری کنید که کاربر هرگز نبیند. این به چند دلیل مشکل ساز است:
- داده ها را هدر می دهد. در اتصالات بدون اندازه گیری، این بدترین چیزی نیست که ممکن است اتفاق بیفتد (اگرچه می توانید از این پهنای باند گرانبها برای دانلود منابع دیگری استفاده کنید که واقعاً توسط کاربر دیده می شود). با این حال، در برنامه‌های داده محدود، بارگیری مواردی که کاربر هرگز نمی‌بیند، می‌تواند به طور موثر پول خود را هدر دهد.
- زمان پردازش، باتری و سایر منابع سیستم را هدر می دهد. پس از دانلود یک منبع رسانه ای، مرورگر باید آن را رمزگشایی کرده و محتوای آن را در viewport نمایش دهد.
بارگذاری تنبل تصاویر و ویدیو زمان بارگذاری اولیه صفحه، وزن صفحه اولیه و استفاده از منابع سیستم را کاهش می دهد که همه اینها تأثیرات مثبتی بر عملکرد دارند.
اجرای بارگذاری تنبل
چندین راه برای اجرای بارگذاری تنبل وجود دارد. انتخاب راه‌حل شما باید مرورگرهایی را که پشتیبانی می‌کنید و همچنین آنچه را که می‌خواهید لود کنید را در نظر بگیرد.
مرورگرهای مدرن بارگذاری تنبل در سطح مرورگر را پیاده‌سازی می‌کنند که می‌تواند با استفاده از ویژگی loading روی تصاویر و iframe فعال شود. برای ارائه سازگاری با مرورگرهای قدیمی یا انجام بارگذاری تنبل بر روی عناصر بدون بارگذاری تنبل داخلی، می توانید راه حلی را با جاوا اسکریپت خود پیاده سازی کنید. همچنین تعدادی کتابخانه موجود برای کمک به شما در انجام این کار وجود دارد. برای جزئیات کامل همه این رویکردها، پست های این سایت را ببینید:
همچنین، ما فهرستی از مشکلات بالقوه بارگذاری تنبل و مواردی که باید در اجرای شما مراقب آنها باشید، گردآوری کرده‌ایم.
نتیجه
اگر با دقت استفاده کنید، بارگذاری تنبل تصاویر و ویدیو می تواند به طور جدی زمان بارگذاری اولیه و بارگذاری صفحه در سایت شما، از جمله Core Web Vitals را کاهش دهد. کاربران متحمل فعالیت غیرضروری شبکه نمی‌شوند - از جمله مشاجره شبکه برای اتصالات کندتر - و هزینه‌های پردازش منابع رسانه‌ای که ممکن است هرگز نبینند، اما همچنان می‌توانند آن منابع را در صورت تمایل مشاهده کنند.
تا آنجا که تکنیک های بهبود عملکرد پیش می رود، بارگذاری تنبل به طور منطقی بحث برانگیز است. اگر تصاویر درون خطی زیادی در سایت خود دارید، این یک راه عالی برای کاهش دانلودهای غیر ضروری است. کاربران سایت شما و سهامداران پروژه از آن قدردانی خواهند کرد!