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 می تواند یکی از اقدامات مناسب برای بهینه سازی عملکرد باشد؛ البته در کنار فشرده سازی تصاویر، انتخاب فرمت مناسب، بهینه سازی کدها و سایر تکنیک های افزایش سرعت سایت.

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