lazy loading چیست؟ + مزایا و عملکرد بارگذاری تنبل

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

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

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

برای مثال اگه در یک صفحه مقاله، ۲۰ تصویر وجود داشته باشه و کاربر در ابتدا فقط ۲ تصویر اول رو ببیند، لازم نیست مرورگر همه ۲۰ تصویر رو همان لحظه دانلود کنه.

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

lazy loading چیست؟

lazy loading یک تکنیک بهینه سازی عملکرد سایته که در اون بارگذاری منابع غیر ضروری تا زمان نیاز به آنها به تعویق می افتد.

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

این تکنیک بیشتر برای تصاویر و iframe ها شناخته شده، اما مفهوم اون می تواند برای منابع مختلف دیگری هم استفاده بشه.

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

برای مثال یک صفحه فروشگاهی رو تصور کنید که در اون ۵۰ محصول نمایش داده شده و هر محصول یک تصویر داره. اگه تمام تصاویر همزمان با باز شدن صفحه دانلود بشن، حجم زیادی از اطلاعات باید در همان ابتدای ورود کاربر منتقل بشه.

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

بارگذاری تنبل چطور کار می کنه؟

عملکرد lazy loading در ظاهر ساده هست، اما پشت اون مرورگر و سایت با هم همکاری می کنند تا منابع در زمان مناسب دریافت بشن. در مورد تصاویر، می توان از ویژگی loading=”lazy” استفاده کرد تا مرورگر بداند تصویر مورد نظر لازم نیست بلافاصله دانلود بشه.

برای نمونه، ساختار یک تصویر می تواند به شکل زیر باشه:

<img src=”image.jpg” alt=”تصویر نمونه” loading=”lazy”>

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

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

مهم ترین کاربردهای lazy loading

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

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

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

مزایای lazy loading

یکی از مهم ترین مزایای lazy loading کاهش منابعی هست که در ابتدای ورود کاربر باید دانلود بشن. وقتی همه تصاویر و منابع غیر ضروری همزمان درخواست نمی شن، فشار اولیه روی شبکه و مرورگر کمتر خواهد شد.

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

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

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

تاثیر lazy loading بر سئو

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

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

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

تفاوت lazy loading و بارگذاری معمولی

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

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

به همین دلیل تفاوت اصلی این دو روش در زمان شروع بارگذاری منابع هست. lazy loading نمی گوید یک فایل نباید بارگذاری بشه؛ بلکه می گوید لازم نیست اون فایل همین الان بارگذاری بشه.

چه چیزهایی را نباید lazy load کنیم؟

یکی از نکات مهم در استفاده از lazy loading اینه که نباید همه چیز رو تنبل بارگذاری کنیم. منابعی که کاربر در همان ابتدای ورود به صفحه به آنها نیاز داره، بهتره سریع در دسترس قرار بگیرند.

برای مثال اگه تصویر اصلی یک مقاله یا تصویر اصلی صفحه محصول در همان قسمت بالای صفحه نمایش داده می شه، lazy کردن اون ممکنه باعث بشه این تصویر دیرتر ظاهر بشه. چنین موضوعی می تواند روی سرعت درک شده صفحه و معیارهایی مثل LCP اثر منفی بذاره. توصیه های فنی وب نیز تاکید می کنند که تصاویر قابل مشاهده در اولین viewport، به ویژه تصویر LCP، نباید بی دلیل lazy بشن.

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

آیا lazy loading فقط برای تصاویره؟

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

در مورد ویدیو، مثلا می توان با تنظیمات مناسب preload مشخص کرد که اطلاعات ویدیو تا زمان نیاز کاربر به صورت کامل دریافت نشه. این موضوع برای صفحاتی که چندین محتوای ویدیویی دارن می تواند اهمیت زیادی داشته باشه.

در پروژه های بزرگ تر حتی می توان کدهای جاوا اسکریپت رو نیز به بخش های کوچک تر تقسیم کرد و قسمت هایی رو فقط زمانی بارگذاری کرد که واقعا به آنها نیازه. این رویکرد از نظر مفهومی همان ایده اصلی lazy loading رو دنبال می کنه: منابع غیر ضروری رو برای زمان مناسب نگه داریم.

بیشتر بدانید: راهکار حل مشکل ارور 502 Bad Gateway چیه؟

بهترین روش استفاده از lazy loading

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

در مورد تصاویر نیز بهتره ابعاد تصویر مشخص باشن. تعیین width و height به مرورگر کمک می کنه فضای مورد نیاز تصویر رو از قبل بداند و در نتیجه احتمال جابه جایی ناگهانی عناصر صفحه کاهش پیدا کنه. این موضوع مخصوصا در صفحاتی که تعداد زیادی تصویر دارن اهمیت داره.

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

جمع بندی

lazy loading یا بارگذاری تنبل یکی از روش های کاربردی برای مدیریت بهتر منابع صفحات وب هست. به جای اینکه تمام تصاویر، iframe ها و منابع غیر ضروری از همان لحظه ورود کاربر بارگذاری بشن، می توان دریافت آنها رو تا زمان نیاز به تعویق انداخت.

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

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

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