بخشی از تصاویر و ویدئوها در پی بارگذاری (بسته اطلاعاتی) معمول یک وب سایت ممکن است حجم زیادی داشته باشند. متاسفانه، ذینفعان یک پروژه تمایلی به کم کردن منابع رسانه‌ای از اپلیکیشن‌های خود ندارند. قرار گرفتن در چنین تنگناهایی بسیار ناامیدکننده است، خصوصا اگر همه‌ی طرفین درگیر خواستار بهبود عملکرد سایت باشند، اما در مورد چگونگی دستیابی به این هدف با هم توافق نداشته باشند. خوشبختانه، LAZY LOAD راه حلی است که payload و زمان بارگذاری اولیه صفحه را کاهش می‌دهد، اما تاثیری بر محتوا ندارد.
LAZY LOADING (بارگذاری تنبل) چیست؟
LAZY LOADING یا بارگذاری تنبل یک تکنیک است که بارگذاری منابع غیر ضروری را در زمان بارگذاری صفحه به تعویق می‌اندازد. در عوض، این منابع غیر ضروری در زمان نیاز بارگذاری می‌شوند. در مورد تصاویر غیر ضروری، در اغلب موارد مترادف با «خارج از صفحه» است. اگر تا به حال از Lighthouse استفاده کرده باشید و برخی از ویژگی‌های موجود در آن را به کار گرفته باشید، ممکن است راهنمایی‌هایی در این مورد به شکل حسابرسی به تعویق انداختن تصاویر خارج از صفحه برایتان آشنا باشد:
به احتمال زیاد، در عمل بارگذاری تنبل را دیده‌اید و عملکرد آن این گونه است:
- شما وارد یک صفحه می‌شوید و با اسکرول کردن محتوای آن را مطالعه می‌کنید
- در همین حال، شما یک تصویر پِلِیس هولدر در صفحه نمایش را اسکرول می‌کنید
- تصویر placeholder یکدفعه با تصویر نهایی جایگزین می‌شود
مثالی از بارگذاری تنبل تصویر را می‌توان در پلتفرم انتشار محبوب Medium یافت که در آن تصاویر placeholder کم حجم در زمان بارگذاری صفحه، بارگذاری می‌شوند و هنگام اسکرول صفحه نمایش آن‌ها با تصاویر نهایی جایگزین می‌شوند.
اگر با بارگذاری تنبل آشنایی ندارید، ممکن است این سوال برایتان پیش آید که این تکنیک تا چه اندازه موثر است و مزایای آن چه هستند. برای پاسخ به این سوالات ادامه مطلب را مطالعه کنید.
چرا باید از بارگذاری تنبل تصاویر و ویدئوها استفاده کرد؟
پاسخ این سوال بسیار ساده است. زیرا این امکان وجود دارد که شما مواردی را بارگذاری کنید که کاربر هیچ‌گاه نبیند. این به چند دلیل مشکل‌ساز است:
- داده هدر می‌رود. در اتصالات ارزیابی نشده، این بدترین اتفاق نیست (اگرچه شما می‌توانید از آن پهنای باند برای دانلود منابع دیگری استفاده کنید که به طور قطع توسط کاربر مشاهده خواهند شد). با این وجود، در برنامه‌های محدود داده، بارگذاری مواردی که ممکن است کاربر هیچ گاه نبیند می‌تواند هدر دادن پول باشد.
- زمان پردازش، باتری و سایر منابع سیستم را هدر می‌دهد. پس از این که یک منبع رسانه‌ای دانلود می‌شود، مرورگر باید آن را رمزگشایی کرده و محتوای آن را به نمایشگر رندر کند.
بارگذاری تنبل تصاویر و ویدئوها موجب کاهش زمان بارگذاری اولیه صفحه، وزن اولیه صفحه و میزان استفاده از منابع سیستم می‌شود که همگی اثرات مثبتی بر عملکرد دارند.
اجرای بارگذاری تنبل
روش‌های متعددی برای اجرا و پیاده‌سازی بارگذاری تنبل وجود دارد. انتخاب راه حل باید با در نظر گرفتن مرورگرهایی که استفاده می‌کنید و همچنین مواردی که مد نظر بارگذاری تنبل هستند، انجام شود.
مروگرهای مدرن بارگذاری تنبل سطح مرورگر را اجرا می‌کنند که می‌توان آن را با استفاده از اتریبیوت‌های بارگذاری بر تصاویر و iframeها فعال کرد. به منظور ایجاد سازگاری با مرورگرهای قدیمی‌تر یا اجرای بارگذاری تنبل بر روی المان‌هایی بدون ویژگی بارگذاری تنبل داخلی، شما می‌توانید روشی را با جاوا اسکریپت خود اجرا کنید. علاوه بر این، تعداد زیادی کتابخانه برای کمک به این امر در دسترس هستند. برای کسب اطلاعات کامل در مورد این رویکردها، به لینک‌های زیر مراجعه کنید:
- Lazy-loading images
- Lazy-loading video
همچنین، ما فهرستی از مشکلات احتمالی بارگذاری تنبل و مواردی که هنگام اجرای آن باید در نظر داشته باشید را تهیه کرده‌ایم.
نتیجه‌گیری
بارگذاری تنبل تصاویر و ویدئوها در صورتی که با دقت اجرا شود، می‌تواند به طور جدی موجب کاهش زمان اولیه بارگذاری و payload صفحه‌ی سایت و اثرات مثبت در سئو سایت شما شود. کاربران، هزینه‌های فعالیت‌های غیر ضروری شبکه و پردازش منابع رسانه‌ای که ممکن است هرگز نبینند را متحمل نخواهند شد، اما در صورت تمایل همچنان می‌توانند به آن منابع دسترسی داشته باشند.
تا جایی که به تکنیک‌های بهبود عملکرد مرتبط است، بارگذاری تنبل جای بحث ندارد. اگر تصاویر این‌لاین زیادی بر روی سایت خود دارید، بارگذاری تنبل یک روش بسیار خوب برای کاهش دانلود موارد غیر ضروری است. کاربران شما و ذینفعان پروژه هر دو از آن استقبال خواهند کرد!
اگر به مطالعه در این زمینه علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای دریافت مشاوره دیجیتال مارکتینگ یا برون سپاری انجام خدمات سئو، با ما در تماس باشید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.