Lazy Loading چیست؛ روشی برای بهبود سرعت بارگذاری صفحات وب!

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

Lazy Loading چیست؟

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

از این نوع بارگذاری به عنوان «تنبل» یاد می‌شود، زیرا مرورگر را تشویق می‌کند تا در بارگذاری برخی منابع، به اصطلاح، تنبلی به خرج دهد. هنگام نمایش صفحه‌ای با بارگذاری تنبل، مرورگر اساسا می‌گوید: «تا زمانی که واقعاً نیازی به این تصاویر نباشد، صبر می‌کنم تا آن‌ها را بارگذاری کنم.» در مقابل، در بارگذاری مشتاق (Eager Loading)، مرورگر رویکردی کاملاً متفاوت دارد: «همه چیز را همین حالا بارگزاری می‌کنم!» در حالی که تنبلی در دنیای واقعی گاهی با معانی منفی همراه است، در این مورد، روشی کارآمدتر محسوب می‌شود.

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

تصاویر چگونه با Lazy Loading بارگذاری می‌شوند؟

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

هنگام بارگذاری یک صفحه وب، بخشی که کاربر در ابتدا مشاهده می‌کند، «بالای تاخورد» (above the fold) و بخشی که هنوز قابل مشاهده نیست، «پایین تاخورد» (below the fold) نامیده می‌شود. *

تصاویر «below the fold» به محض ورود کاربر به صفحه باید بارگذاری شوند، در غیر این صورت، بر تجربه کاربری تأثیر منفی خواهد گذاشت. با این حال، کاربر تصاویر «below the fold» را تا زمانی که اسکرول نکند، مشاهده نمی‌کند. بنابراین، تصاویر «below the fold» گزینه مناسبی برای استفاده از بارگذاری تنبل هستند.

منظور از «fold» یا تاخورد چیست در Lazy Loading چیست؟ اصطلاحات «بالای تاخورد» و «پایین تاخورد» از چیدمان روزنامه‌ها نشأت می‌گیرد. روزنامه‌ها معمولاً به صورت افقی از وسط تا می‌خوردند و نیمه جلویی آن، یعنی ناحیه «بالای تاخورد»، اولین بخشی است که خواننده مشاهده می‌کند. هنگامی که این اصطلاح در چیدمان وب به کار می‌رود، «تا خورده» یا «Fold» به لبه پایین صفحه نمایش کاربر اشاره دارد.

روش پیاده‌سازی Lazy Loading چیست؟

یکی از روش‌های پیاده‌سازی بارگذاری تنبل، استفاده از ویژگی (attribute) loading در تگ تصویر (img) HTML است. اضافه کردن loading=”lazy” همانطور که در مثال زیر می‌بینید، به مرورگر می‌گوید تا زمانی که کاربر به تصویر نزدیک نشود، منتظر بماند تا آن را بارگذاری کند:

<img src="example.com/image" alt="تصویر نمونه" width="100" height="100" loading="lazy">

توسعه‌دهندگان وب همچنین می‌توانند برای پیاده‌سازی بارگذاری تنبل پیچیده‌تر، از فریم‌ورک‌های برنامه‌نویسی استفاده کنند. انگولار (Angular) به طور معمول برای این منظور به کار می‌رود. کتابخانه جاوا اسکریپت React نیز از بارگذاری تنبل پشتیبانی می‌کند.

Cloudflare Mirage روش دیگری برای پیاده‌سازی بارگذاری تنبل است. Mirage علاوه بر تغییر خودکار اندازه تصاویر، به عنوان یک بارگذاری تنبل عمل می‌کند و تصاویر را تنها در صورت نیاز بارگذاری می‌کند. ویژگی Cloudflare Mirage برای مشتریان Cloudflare در برنامه‌های خودسرویس Pro و Business و همچنین مشتریان سازمانی در دسترس است.

سایر منابعی که می‌توان از بارگذاری تنبل برای آن‌ها استفاده کرد

بارگذاری تنبل تنها به تصاویر محدود نمی‌شود. سایر منابعی که می‌توان آن‌ها را با تاخیر و بر حسب نیاز بارگذاری کرد، عبارتند از:

• جاوا اسکریپت (JavaScript): جاوا اسکریپت به عنوان یک منبع render-blocking شناخته می‌شود، به این معنی که مرورگر نمی‌تواند صفحه را رندر کند تا زمانی که کد جاوا اسکریپت بارگذاری شود. کد جاوا اسکریپت را می‌توان به بخش‌های کوچک‌تری تقسیم کرد که در صورت نیاز بارگذاری می‌شوند و در نتیجه زمان بارگذاری صفحاتی که نیاز به اجرای جاوا اسکریپت دارند، کاهش می‌یابد.

• CSS: CSS نیز یک منبع مسدودکننده رندر است. تقسیم یک فایل CSS به چندین فایل که تنها در صورت نیاز بارگذاری می‌شوند، می‌تواند به کاهش مدت زمانی که مرورگر از رندر کردن بقیه صفحه مسدود می‌شود، کمک کند. فایل‌های CSS غیرمسدودکننده باید لینک مخصوص به خود را داشته باشند که با اضافه کردن ویژگی media به مرورگر اعلام شود که چه زمانی آن‌ها را بارگذاری نماید.

• آی‌فریم (iframes): آی‌فریم‌ها برای جاسازی محتوای خارجی در یک صفحه وب استفاده می‌شوند. تگ‌های آی‌فریم می‌توانند همانند ویژگی loading که در بخش قبل برای تصاویر شرح داده شد را داشته باشند.

مزایای Lazy Loading چیست؟

بارگذاری تنبل مزایای متعددی را برای صفحات وب به همراه دارد:

• سرعت بارگذاری بالاتر: در شرایط برابر، صفحات وبی که حجم کم‌تری دارند، سریع‌تر بارگذاری می‌شوند. بارگذاری تنبل باعث می‌شود تا یک صفحه وب با اندازه‌ای کوچک‌تر از حجم نهایی خود بارگذاری اولیه را انجام دهد و در نتیجه سرعت بارگذاری کلی افزایش یابد. عملکرد بالای وب مزایای بسیاری از جمله بهبود سئو (SEO)، نرخ تبدیل بالاتر و تجربه کاربری بهتر را به دنبال دارد.

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

معایب Lazy Loading چیست؟

در کنار مزایای قابل توجه، بارگذاری تنبل معایبی نیز دارد که باید در نظر گرفته شود:

• درخواست سریع‌تر منابع توسط کاربران: برای مثال، اگر کاربری به سرعت در صفحه اسکرول کند، ممکن است مجبور شود برای بارگذاری تصاویر کمی صبر کند. این مورد می‌تواند بر تجربه کاربری تأثیر منفی بگذارد.

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

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

بارگذاری Eager چیست؟

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

سایر روش‌های بهبود سرعت بارگذاری صفحه وب توسط توسعه دهندگان

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

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

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

• بهینه‌سازی تصاویر: تصاویر بیش از حد بزرگ بر عملکرد تاثیر می‌گذارند حتی اگر از Lazy Loading استفاده شود. با کاهش اندازه فایل تصویر می‌توانید از بارگذاری سریع تصاویر مطمئن شوید.

• کوچک‌کردن کد (Minify): کوچک‌کردن یا minification فرآیندی است که طی آن تمام کاراکترهای غیرضروری از کد CSS و جاوا اسکریپت، بدون تغییر در عملکرد آن‌ها، حذف می‌شود. این موارد شامل حذف فاصله‌ها (whitespace)، کامنت‌ها و نقطه ویرگول‌ها می‌باشد. کوچک‌سازی باعث کاهش حجم فایل کد و در نتیجه افزایش سرعت بارگذاری می‌شود.

فعال‌سازی Lazy Loading در وردپرس

مرحله دوم) انجام تنظیمات تصویر در افزونه

حالا از منوی کناری به Settings و سپس a3 Lazy Load بروید. با نگاهی به قسمت زیرین Lazy Load Activation متوجه می‌شوید که افزونه پس از نصب به‌طور پیش‌فرض روشن است.

تب Lazy Load Images را باز کنید. در قسمت اول می‌توانید انتخاب کنید کدام تصاویر در وب‌سایت با تاخیر نمایش داده شود. در قسمت دوم برای مرورگرهایی که جاوا اسکریپت را مسدود می‌کنند، قابلیت بازگشت (Fallback) را فعال کنید. همچنین در قسمت سوم می‌توانید یک کلاس CSS را برای تصاویری که نمی‌خواهید بارگذاری آن‌ها به تعویق بیفتد تنظیم کنید.

تنظیمات پیش‌فرض همه گزینه‌ها را فعال کرده است که توصیه می‌کنیم آن‌ها را به همین شکل رها کنید. با ایجاد یک کلاس CSS می‌توانید مشخص کنید که تصاویر خاص تحت چه شرایطی با تکنیک Lazy Loading بارگذاری نشوند.

مرحله سوم) انجام تنظیمات ویدیو در افزونه

در این مرحله می‌توانید به تب Lazy Load Videos and iframes بروید. درست مانند تصویر، افزونه a3 Lazy Load به شما اجازه می‌دهد تا بارگذاری با تاخیر را برای کلیپ‌های خاص انتخاب کنید.

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

مرحله چهارم) غیرفعال کردن بارگذاری تنبل

این مرحله اختیاری است و اگر می‌خواهید بارگذاری تنبل را برای انواع خاصی از صفحات غیرفعال کنید، می‌توانید این کار را در تب Exclude by URLs and Page Types انجام دهید. در این بخش می‌توانید صفحات یا انواع محتوای خاصی را وارد کنید که تمایل ندارید از بارگذاری تنبل استفاده کنند.

تغییرات را در تنظیمات افزونه ذخیره کنید. اگر می‌خواهید بارگذاری معوق را برای یک عنصر خاص غیرفعال کنید، ویرایش‌گر را باز کنید و بلوک تصویر یا ویدیویی که قصد پیکربندی آن را دارید انتخاب کنید.

منوی تنظیمات بلوک را باز کنید و به تب Advanced بروید تا فیلد کلاس‌های اضافی CSS را پیدا کنید. برای اضافه کردن کلاس حذف قابلیت Lazy Loading که هنگام پیکربندی افزونه تنظیم کرده‌اید، می‌توانید از این فیلد استفاده کنید.

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

جمع‌بندی

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