Lazy Loading چیست؟ + چگونگی عملکرد آن

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

Lazy Loading چیست؟

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

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

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

بارگذاری تنبل تصاویر چگونه کار می‌کند؟

بارگذاری تنبل تصاویر توسط اقدامات کاربر انجام می‌شود، معمولاً زمانی که کاربر به پایین صفحه وب اسکرول یا پیمایش می‌کند این عمل انجام می‌گیرد. هنگامی که یک صفحه بارگذاری می‌شود، بخش قابل مشاهده به عنوان بخش بالای صفحه (above the fold) شناخته می‌شود، در حالی که بخش غیرقابل مشاهده، بخش پایین صفحه (below the fold) نامیده می‌شود. تصاویری که در بالای صفحه ظاهر می‌شوند باید فوراً بارگذاری شوند، در حالی که تصاویر پایین صفحه می‌توانند از بارگذاری تنبل استفاده کنند.

مفهوم above the fold و below the fold از نحوه چیدمان روزنامه‌ها ایده گرفته است. روزنامه‌ها به صورت افقی از وسط تا می‌شوند و قسمتی از صفحه اول که در بالای صفحه ظاهر می‌شود همان چیزی است که خوانندگان ابتدا می‌بینند. به طور مشابه، در طراحی وب، fold به پایین صفحه‌نمایش کاربر اشاره دارد؛ بنابراین، هنگامی که کاربر به پایین اسکرول می‌کند، مرورگر تصاویری را که در بخش قابل مشاهده صفحه ظاهر می‌شوند بارگیری می‌کند و منتظر می‌ماند تا تصاویری که در زیر صفحه ظاهر می‌شوند بارگذاری شود تا زمانی که کاربر به آن بخش پایین بیاید. به این ترتیب صفحه سریع‌تر بارگذاری می‌شود و کاربر می‌تواند با سرعت بیشتری با محتوا ارتباط برقرار کند.

نحوه اجرای lazy load برای تصاویر

برای پیاده‌سازی بارگذاری تنبل برای تصاویر، می‌توان از ویژگی HTML “loading” در تگ تصویر استفاده کرد. با افزودن “loading=’lazy'” به تگ مدنظر، مرورگر برای بارگیری تصویر صبر می‌کند تا کاربر به آن اسکرول کند. تگ زیر نشان دهنده نوعی لیزی لودینگ است:

برای بارگذاری تنبل پیشرفته‌تر، توسعه‌دهندگان وب می‌توانند از فریمورک‌های برنامه‌نویسی مانند انگولار (Angular) یا کتابخانه‌های جاوا اسکریپت مانند ری اکت (React) استفاده کنند. این ابزارها ویژگی‌های اضافی را برای بهینه‌سازی بارگذاری تصویر و بهبود عملکرد صفحه وب ارائه می‌دهند.

چه منابع صفحه دیگری می‌توانند از lazy loading استفاده کنند؟

علاوه بر تصاویر، سایر منابع صفحه (Page resources) که می‌توانند از بارگذاری تنبل استفاده کنند عبارت‌اند از جاوا اسکریپت، CSS و iframes. جاوا اسکریپت و CSS هر دو منابع مسدود کننده رندر هستند، به این معنی که مرورگر نمی‌تواند صفحه را تا زمانی که بارگیری کرده،رندر کند. با تقسیم فایل‌های جاوا اسکریپت و CSS به ماژول‌های کوچک‌تر یا فایل‌های جداگانه‌ای که فقط در صورت لزوم بارگیری می‌شوند، زمان بارگذاری صفحاتی که نیاز به اجرای جاوا اسکریپت یا CSS دارند می‌تواند کاهش یابد.

به طور مشابه، iframe ها برای جاسازی محتوای خارجی در یک صفحه وب استفاده می‌شوند و بارگیری آن‌ها نیز می‌تواند تا زمانی که نیاز باشد به تعویق بیفتد؛ مانند تصاویر، iframe ها می‌توانند دارای ویژگی بارگذاری HTML باشند تا به مرورگر دستور دهند تا برای بارگیری محتوا صبر کند تا کاربر به آن اسکرول کند. lazy loading این منابع صفحه می‌تواند سرعت صفحه وب را بهبود بخشد و تجربه کاربر را بهینه کند.

مزایای لود تنبل

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

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

معایب لود تنبل

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

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

Eager loading چیست؟

Eager loading یا بارگذاری مشتاق تکنیکی است که در آن تمام منابع یک صفحه وب به طور هم‌زمان و بدون هیچ تأخیری بارگذاری می‌شوند. بارگذاری مشتاق معمولاً در برنامه‌های کاربردی وب با کد سنگین مانند بازی‌های آنلاین استفاده می‌شود.

تفاوت Lazy loading و Eager loading چیست؟

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

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

روش های دیگر کاهش زمان بارگذاری صفحات

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

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

نتیجه‌ گیری

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

سؤالات متداول