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

اطلاعات بیشتر:  ارائه خدمات طراحی سایت مشهد

لیزی لودینگ چیست؟

لیزی لودینگ یا بارگذاری تنبل تکنیکی است که بارگذاری منابع غیر بحرانی را در زمان بارگذاری صفحه به تعویق می اندازد. در عوض، این منابع غیر بحرانی در لحظه نیاز بارگذاری می شوند. به عنوان مثال، اگر یک کاربر لوگو Etude web را از یک موتور جستجو درخواست کند کل صفحه وب، از محتوای درخواستی، بارگیری می شود. حال اگر کاربر اولین تصویر را باز کند و از آن راضی باشد، احتمالاً صفحه وب را می بندد، بنابراین بقیه تصاویر بارگذاری شده دیده نمی شوند. این منجر به هدر رفتن منابعی می شود که در بارگذاری انبوه آن صفحه مصرف می شود. بنابراین راه حل این مشکل Lazy Loading است.
یکی از شکل های بارگذاری تنبل، اسکرول بی نهایت است که در آن، محتوای صفحه وب در زمانی که کاربر صفحه را به پایین اسکرول می کند، بارگذاری می شود. این یک تکنیک محبوب است که توسط وب سایت های مختلف استفاده می شود.

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

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

مزایای لیزی لودینگ

۱. زمان بارگذاری اولیه را کاهش می دهد:

لیزی لودینگ موجب کاهش زمان بارگذاری می شود. به این علت که هنگام لود کردن ترتیبی محتواهای سایت، حجم کلی آن را کاهش می دهد در نتیجه مطالب سریع‌تر بارگذاری می‌شود و از لود شدن دیگر مطالب که در معرض دید کاربر قرار ندارند نیز جلوگیری می شود.

۲. حفظ پهنای باند:

پهنای باند سایت به میزان ترافیک سایت اشاره دارد که از آن برای نمایش و بارگذاری اطلاعات و محتواهای موجود بر روی وب سایت استفاده می شود که باید به صورت ماهانه و با پرداخت هزینه شارژ شود.
زمانی که تکنیک لیزی لودینگ در سایت فعال شود اینکار از بارگذاری بیهوده مطالب جلوگیری کرده و تنها با درخواست کاربران محتوا به آنان ارائه خواهد شد. به این صورت پهنای باند حفظ می شود.

۳. حفاظت از منابع سیستم:

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

۴. بهبود سئو وب سایت:

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

اطلاعات بیشتر: ارائه خدمات سئو سایت در مشهد

معایب لیزی لودینگ

۱. کاربران ممکن است منابع را سریعتر از حد انتظار درخواست کنند:

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

۲. ارتباط اضافی با سرور:

از آنجایی که کاربر با صفحه تعامل دارد، ممکن است مرورگر به جای یک درخواست برای تمام محتوای صفحه، نیاز به درخواست های متعدد از سرورهای وب سایت داشته باشد. استفاده از شبکه تحویل محتوا (CDN) این اشکال احتمالی را به حداقل می‌رساند، زیرا تصاویر توسط CDN ذخیره می‌شوند و مرورگر مجبور نیست برای واکشی آن‌ها درخواستی را به سرور اصلی ارسال کند.

۳. کد اضافی برای پردازش مرورگر:

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

چه صفحات دیگری می توانند از لیزی لودینگ استفاده کنند؟

۱. جاوا اسکریپت: جاوا اسکریپت چیزی است که به عنوان یک منبع مسدود کننده رندر شناخته می شود. به این معنی که یک مرورگر نمی تواند صفحه را تا زمانی که کد جاوا اسکریپت بارگیری شود، رندر کند. کد جاوا اسکریپت را می توان به ماژول های کوچکتر تقسیم کرد که در صورت نیاز بارگذاری شوند و زمان بارگذاری صفحاتی را که نیاز به اجرای جاوا اسکریپت دارند کاهش می دهد.
۲. CSS: CSS همچنین یک منبع مسدود کننده رندر است. تقسیم یک فایل CSS به چندین فایل که فقط در صورت لزوم بارگیری شود، می تواند به کاهش مدت زمانی که مرورگر از نمایش بقیه صفحه مسدود می شود کمک کند. فایل‌های CSS غیرمسدود باید پیوند خاص خود را با ویژگی رسانه اضافه کنند تا به مرورگر بگوید چه زمانی آن ها را بارگیری کند.
۳. Iframes: iframes برای درج محتوای میزبان خارجی در وب سایت ها استفاده می شود. تگ‌های iframe می‌توانند شامل همان ویژگی بارگیری HTML باشند.

توسعه دهندگان چگونه می توانند سرعت صفحه وب را افزایش دهند؟

تعدادی از عوامل بر عملکرد وب تأثیر می‌گذارند، اما این سه مرحله نقطه شروع خوبی برای سریع‌تر کردن وب‌سایت هستند:

۱. از CDN استفاده کنید

وقتی محتوای وب در یک CDN ذخیره می شود، ارتباط با سرور مبدا چه از لیزی لودینگ استفاده شود یا نه به حداقل ممکن می رسد. CDN ها همچنین محتوا را سریع تر به کاربران تحویل می دهند. به این علت که معمولاً نسبت به سرور اصلی به کاربر نزدیکتر هستند.

۲. بهینه سازی تصاویر

تصاویر بیش از حد بزرگ بر عملکرد تأثیر می گذارند. حتی اگر از تکنیک لیزی لودینگ استفاده شود. کاهش اندازه فایل تصویر در صورت امکان به بارگیری سریع تصاویر کمک می کند.

۳. Minify کد:

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

نحوه اجرای بارگذاری تنبل برای تصاویر

یکی از راه‌های پیاده‌سازی لیزی لودینگ، استفاده از بارگذاری ویژگی HTML در تگ تصویر است. اضافه کردن loading=”lazy”، مانند مثال زیر، به مرورگر دستور می دهد که کاربر به تصویر نزدیک شود و بعد بارگیری شود.
<img src=”example.com/image” alt=”example image” width=”100″ height=”100″ loading=”lazy”>
توسعه دهندگان وب همچنین می توانند از چارچوب های برنامه نویسی برای پیاده سازی لیزی لودینگ پیچیده تر استفاده کنند. معمولا برای این منظور ازAngular استفاده می شود. کتابخانه جاوا اسکریپت React نیز از loading lazy پشتیبانی می کند.
Cloudflare Mirage راه دیگری برای اجرای لیزی لودینگ است. Mirage علاوه بر تغییر اندازه خودکار تصاویر، به عنوان یک لیزی لودینگ عمل کرده و فقط تصاویر را در صورت درخواست بارگیری می کند.

جمع بندی

همان طور که در بالا اشاره شد یکی از کاربردی ترین روش های بهینه سازی و افزایش سرعت بارگذاری محتوا تکنیک لودینگ است. فعال کردن این تکنیک موجب می شود مطالب به صورت تدریجی و فقط با اسکرول کردن برای کاربر بارگذاری شوند. به عبارتی دیگر از لود شدن ناخواسته و اتوماتیک محتواها جلوگیری می شود. از جمله مزایای پیاده سازی lazy loading می توان به کاهش زمان بارگذاری مطالب، بهبود تجربه کاربر و سئو سایت، ذخیره پهنای باند و… اشاره کرد.