Lazy Loading، که به معنای «بارگذاری تنبل» است، به تأخیر انداختن بارگذاری برخی منابع برای بهبود سرعت یک وب سایت اشاره دارد. با بهینهسازی عملکرد سایت به این روش، توسعهدهنده هم تجربه کاربری را بهبود میبخشد و هم رتبه سایت در سئو را ارتقا میدهد. فراتر از این مزایای نسبتاً عملی، Lazy Loading استفادهها و مصرفها را نیز منطقیتر میکند.
تعریف Lazy Loading
بارگذاری تنبل تکنیک بارگذاری تأخیری است که در توسعه وب برای سرعت بخشیدن به نمایش یک صفحه استفاده میشود. این تکنیک شامل بارگذاری منابع فقط در زمانی است که واقعاً مورد نیاز باشند. منابع سنگین، مانند ویدیوها و آیفریمها، عمدتاً تحت این روش قرار میگیرند.
مثالهایی از بارگذاری تنبل در یک صفحه محصول سایت تجارت الکترونیک:
- مرورگر ماژول جاوااسکریپت مربوط به نمایش سهبعدی را تنها زمانی بارگذاری میکند که کاربر از قابلیت سهبعدی استفاده کند یا بخواهد از آن استفاده کند.
- تصاویر محصول تنها زمانی بارگذاری میشوند که کاربر صفحه را به سمت آن تصاویر اسکرول کند.
- تمام عناصر ثابت و قابل مشاهده هنگام باز شدن صفحه، در مقابل، بدون تأخیر بارگذاری میشوند.
چرا از Lazy Loading استفاده کنیم؟
به طور کلی، بارگذاری تنبل برای سرعت بخشیدن به نمایش یک صفحه وب استفاده میشود. این روش مزایای متعددی دارد که به هم مرتبط هستند.
تجربه کاربری بهتر (UX)
کاربران عادت کردهاند که وب هر روز سریعتر شود. وقتی یک صفحه با کندی بارگذاری میشود و کاربر مجبور به انتظار است، این موضوع باعث ناراحتی و عصبانیت میشود. با استفاده از Lazy Loading، توسعهدهنده زمان بارگذاری را بدون قربانی کردن کیفیت نمایش کاهش میدهد. عناصر مورد نیاز فوری ظاهر میشوند و سایر موارد در حالت انتظار قرار میگیرند. تجربه کاربری خوب است و کاربران با رضایت بیشتری سایت را مشاهده میکنند.
در سال ۲۰۲۵، گوگل اعلام کرده است که زمان بارگذاری باید کمتر از ۲.۵ ثانیه باشد تا تجربه کاربری رضایتبخش ارائه شود.
کاهش نرخ پرش (Bounce Rate)
برخی کاربران صبر نمیکنند. اگر زمان بارگذاری بیش از حد طولانی باشد، صفحه را قبل از بارگذاری کامل ترک میکنند. دادههای گوگل نشان میدادند که حتی در سال ۲۰۱۷، نیمی از بازدیدها در سایتهای موبایل پس از ۳ ثانیه بارگذاری رها میشدند.
کاهش زمان بارگذاری با استفاده از بارگذاری تنبل به کاهش نرخ پرش کمک میکند. بدین ترتیب، شرکتی که بازدیدکنندگان خود را بهتر نگه میدارد، دید بیشتری کسب کرده و فرصتهای تجاری بیشتری به دست میآورد.
سئو (SEO)
از آنجا که سرعت بارگذاری صفحه روی تجربه کاربری تأثیر میگذارد، گوگل آن را جزو معیارهای عملکردی مهم در سئو طبیعی در نظر میگیرد. یکی از این معیارهای معروف Core Web Vitals است که شامل LCP یا «بزرگترین بخش محتوای قابل مشاهده» میشود.
یک LCP خوب (کمتر از ۲.۵ ثانیه) به بهبود دیده شدن صفحات وب در نتایج جستجوی گوگل کمک میکند.
منطقیسازی استفادههای وب
بارگذاری تنبل از مصرف بیجهت جلوگیری میکند و این امر بهوضوح قابل مشاهده است.
از دید کاربران، بهویژه در استفادههای موبایل: به جای آنکه تمام منابع سنگین بهطور سیستماتیک هنگام باز شدن صفحه بارگذاری شوند (ماژولهای JS، تصاویر، ویدیوها و غیره)، مرورگر تنها آنچه را که قابل مشاهده است یا توسط کاربر فعال شده، بارگذاری میکند.
این امر مصرف دادههای موبایل را کاهش میدهد و کاربران در صورت لزوم میتوانند در بسته اینترنتی خود صرفهجویی کنند. بهطور فرعی، این کار سطح باتری را نیز حفظ میکند. همچنین، این تکنیک برای جلوگیری از بارگذاری بیش از حد حافظه مرورگر مفید است.
یک مثال عینی برای درک بهتر: یک صفحه در مجموع شامل ۵ مگابایت تصویر است، اما تنها ۱ مگابایت هنگام باز شدن صفحه بارگذاری میشود. اگر کاربر صفحه را اسکرول نکند، ۴ مگابایت داده صرفهجویی میشود.
از دید شرکتها: Lazy Loading با محدود کردن بارگذاری دادهها از هدر رفتن پهنای باند جلوگیری میکند. با توجه به اینکه برخی از ارائهدهندگان میزبانی وب، پهنای باند اضافی را به صورت هزینه محاسبه میکنند، بارگذاری تنبل یک تکنیک اقتصادی محسوب میشود.
تفاوت بین بارگذاری تنبل و بارگذاری فوری (Eager Loading) چیست؟
تکنیکهای متضاد
بارگذاری فوری، که به آن بارگذاری آنی نیز گفته میشود، نقطه مقابل Lazy Loading است. در حالی که بارگذاری تنبل بارگذاری منابع را به تعویق میاندازد، بارگذاری فوری منابع را بلافاصله بارگذاری میکند. این رفتار پیشفرض است.
زمانی که این تکنیک بر کل یک صفحه وب اعمال شود، نتایج زیر در تجربه کاربری به همراه دارد:
- زمان بارگذاری طولانیتر در صورت سنگین بودن عناصر موجود در صفحه.
- هیچ تأخیر در نمایش عناصر مختلف وجود ندارد، همه چیز بهطور همزمان قابل مشاهده است.
تکنیکهای مکمل
در عمل، سایتهای وب یکی از این دو تکنیک را برای تمام محتوای خود بهکار نمیبرند. هر منبع در یک صفحه میتواند از تکنیک بارگذاری مناسب خود استفاده کند.
مثال:
- هنگام باز شدن صفحه، مرورگر لوگو را بهصورت فوری (بارگذاری فوری) بارگذاری میکند تا به کاربر تأیید شود که در مکان درست است، عنوان صفحه را برای اطلاعرسانی درباره محتوا بارگذاری میکند و دکمههای استراتژیک برای شرکت، مانند دکمههای افزودن به سبد خرید در سایتهای تجارت الکترونیک، بارگذاری میشوند.
توسعهدهنده این عناصر حیاتی را تا حد امکان سبک میکند تا صفحه هنگام باز شدن کند نشود. - کاروسل تصاویر محصول که در پایین صفحه نمایش داده میشود، چتبات یا ویدیوهای نمایشی میتوانند بهصورت تأخیری (بارگذاری تنبل) بارگذاری شوند، زمانی که کاربر صفحه را اسکرول میکند و در صورت فعال کردن قابلیت مربوطه.
چه زمانی از بارگذاری تنبل استفاده کنیم؟
بارگذاری تنبل زمانی ایدهآل است که یک وب سایت شامل منابع سنگین زیادی باشد، مانند تصاویر، ویدیوها، گیفها یا عناصر جاسازی شده توسط سرویسهای ثالث (Iframes). این وضعیت در بیشتر سایتهای فروش آنلاین دیده میشود. از آنجایی که بارگذاری همزمان تمام این منابع زمان زیادی میبرد و سرعت باز شدن صفحه را کاهش میدهد، Lazy Loading برای بهبود تجربه مرور سایت مناسب است.
بهینهسازی سرعت بارگذاری صفحات، تجربه کاربری و سئو را بهبود میبخشد. گوگل نیز سرعت بارگذاری را در تعیین رتبه صفحات در نتایج جستجو در نظر میگیرد. بنابراین، استفاده از بارگذاری تنبل زمانی مناسب است که سئو ضعیف باشد.
به طور دقیقتر، Lazy Loading باید برای موارد زیر استفاده شود:
- محتوای صفحه که در زیر «خط مشاهده اولیه» قرار دارد و هنگام باز شدن صفحه قابل مشاهده نیست.
- عناصر تعاملی، مانند ویدیوها، ماژولهای نظرات و فرمها، که ممکن است توسط کاربر فعال نشوند.
- کاروسل تصاویر، در صورتی که تصاویر سنگین و زیاد باشند.
چگونه بارگذاری تنبل را پیادهسازی کنیم؟
چند روش برای پیادهسازی Lazy Loading وجود دارد:
- استفاده از افزونهای مانند a3 Lazy Load در وردپرس
- استفاده از بارگذاری تنبل بومی با صفت loading=lazy
پیادهسازی بارگذاری تنبل با افزونه
افزونههای زیادی برای بارگذاری تنبل وجود دارند. دو مثال برای CMS وردپرس:
- a3 Lazy Load: افزونهای ساده و قدرتمند که میتواند تصاویر، ویدیوها و Iframes را بهصورت «تنبل» بارگذاری کند. این افزونه دارای امکانات متعدد است و با افزونههای محبوب دیگر مانند WP Super Cache، WooCommerce، Imagify و Advanced Custom Fields سازگار است.
- Smush: این افزونه چندمنظوره مجموعهای گسترده از ابزارها برای بهینهسازی تصاویر و افزایش سرعت سایت وردپرس ارائه میدهد. بارگذاری تأخیری با Lazy Loading جزو امکانات آن است. این افزونه بسیار محبوب بیش از یک میلیون نصب فعال دارد و در سال ۲۰۲۵ با امتیاز ۴.۸ از ۵ توسط کاربران ارزیابی شده است.
پیادهسازی بارگذاری تنبل بومی
صفت loading=lazy امکان بارگذاری تنبل تصاویر و Iframes را فراهم میکند و توسط اکثر مرورگرهای محبوب پشتیبانی میشود.
برای اعمال بارگذاری تنبل روی یک ویدیو، میتوان ویدیو را از طریق یک Iframe وارد کرد و صفت loading=lazy را به آن اضافه نمود. روش دیگر این است که نمایش ویدیو تنها با کلیک روی یک دکمه فعال شود.
معایب بارگذاری تنبل
اختلاف دیداری
Lazy Loadingبارگذاری برخی منابع غیر حیاتی را به تأخیر میاندازد. این امر میتواند موجب ایجاد اختلاف دیداری در نمایش صفحه شود که کمی گیجکننده است، اگرچه بهندرت قابل توجه است. برای مثال، زمانی که کاربر صفحهای را با سرعت زیاد اسکرول میکند و تصاویر پایین صفحه به صورت Lazy Loading هستند، این تصاویر با تأخیر ظاهر میشوند.
برای جلوگیری از ایجاد اختلال در تجربه کاربری، بهتر است یک عنصر دیداری کوچک، مانند یک آیکون کوچک، در مدت زمان بارگذاری عنصر نمایش داده شود. در عمل، این اختلاف بسیار کم است و تجربه کاربری را مختل نمیکند. آزمایشهای انجام شده در مرورگر کروم نشان میدهد که در شبکه 4G، ۹۷.۵٪ تصاویر تأخیری در عرض ۱۰ میلیثانیه پس از زمانی که باید قابل مشاهده باشند، کامل بارگذاری میشوند.
تأثیر بر LCP
اگر بارگذاری تنبل بر منابع حیاتی اعمال شود، بر LCP سایت تأثیر منفی میگذارد و عملکرد وبسایت از نظر Core Web Vitals گوگل کاهش مییابد. برای اطمینان از استفاده صحیح از Lazy Loading، پیگیری LCP مهم است.
ابزارهایی مانند پیج اسپید اینسایتس (Google PageSpeed Insights) امکان محاسبه و پیگیری LCP را بهصورت رایگان فراهم میکنند.
مشکل نمایهسازی (Indexing)
بارگذاری تأخیری ممکن است مانع از نمایهسازی محتوا توسط گوگل شود. اگر کاربر صفحه را اسکرول نکند یا بر روی یک عنصر تعاملی کلیک نکند، گوگل ممکن است به محتوا دسترسی نداشته باشد.
استفاده از بارگذاری تنبل بومی این ریسک را کاهش میدهد. به هر حال، لازم است بررسی شود که محتوای حیاتی برای سئو به درستی توسط گوگل نمایه شده باشد، و میتوان از ابزارهایی مانند Google Search Console برای این کار استفاده کرد.
چگونه عملکرد Lazy Loading را بررسی کنیم؟
آزمون میدانی
سادهترین روش، مشاهده نحوه نمایش تصاویر هنگام اسکرول کردن صفحه توسط کاربر است. اگر تصاویر به تدریج ظاهر شوند، به معنای عملکرد صحیح بارگذاری تأخیری است.
بررسی کد HTML
روش فنیتر برای بررسی اثربخشی بارگذاری تنبل، بررسی کد است:
- روی عنصر مورد نظر با دکمه راست موس کلیک کنید.
- گزینه «Inspect» یا «بازرسی» را انتخاب کنید.
- بررسی کنید که صفت loading=lazy وجود داشته باشد.
