لود تنبل تصاویر (Lazy Load) چیست؟

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

لود تنبل تصاویر چیست؟

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

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

زمان استفاده از بارگذاری تنبل

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

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

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

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

دلیل بارگذاری تنبل به سایت

با پیشرفت وب و تکامل آن، شاهد افزایش چشمگیری در حجم و تعداد منابعی که به کاربران ارسال می شود، شده ایم. از سال 2011 تا 2019، میانگین حجم منابع برای دسکتاپ از 100 کیلوبایت به 400 کیلوبایت و برای موبایل از 50 کیلوبایت به 350 کیلوبایت افزایش یافته است. همچنین، اندازه تصاویر نیز از 250 کیلوبایت به حدود 900 کیلوبایت در دسکتاپ و از 100 کیلوبایت به 850 کیلوبایت در موبایل افزایش یافته است.

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

اجرای لود تنبل تصاویر

یکی از راه های جلوگیری از بارگذاری تصویر از جلو، مرتبط با تغییرات در ویژگی های img است. برای تصاویری که با استفاده از img بارگذاری می شوند، مرورگر از ویژگی src برای راه اندازی بارگذاری تصویر استفاده می کند. حالا، به جای قرار دادن URL تصویر در ویژگی src، می توانیم از ویژگی data-src برای مشخص کردن URL تصویر استفاده کنیم. وقتی src خالی است، مرورگر بارگذاری تصویر را فعال نمی کند.

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

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

توجه به این نکته مهم است که بارگذاری تنبل (Lazy Loading) نه تنها برای تصاویر بلکه برای بسیاری از منابع صفحه دیگر نیز قابل اعمال است. این روش بهینه سازی از جمله CSS، جاوا اسکریپت، فونت ها و حتی بخش های HTML، به بهبود عملکرد صفحه و کاهش زمان بارگذاری کمک می کند.

جاوا اسکریپت

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

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

CSS

به طور پیش فرض، CSS به عنوان منبع مسدودکننده رندر در نظر گرفته می شود. به عبارت دیگر، تا زمانی که ساختار داخلی CSS یا همان CSSOM (CSS Object Model) ایجاد نشود، مرورگر هیچ محتوای پردازش شده ای را به کاربر ارائه نمی دهد. برای بهبود عملکرد و زمان بارگذاری صفحات وب، استفاده از تکنیک هایی برای بهینه سازی و یادگیری css توصیه می شود.

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

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

آی فریم

Inline Frame یا  iframes عنصری از HTML است که به وسیله آن می توان صفحه یا منبع دیگری را درون یک صفحه وب بارگیری کرد. این عنصر معمولاً برای نمایش محتوایی از منبع خارجی، مثل یک صفحه یا ویدئو، استفاده می شود. اما اگر بخواهیم از تکنیک لود تنبل (lazy loading) در iframes نیز بهره مند شویم، می توانیم ویژگی loading را با مقدار lazy برای این اجزاء استفاده کنیم.

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

فونت ها

به طور پیش فرض، درخواست های فونت تا زمانی که رندر ساخته شود به تأخیر می افتد که ممکن است منجر به تأخیر در رندر متن شود. با این حال، می توانیم این رفتار پیش فرض را نادیده گرفته و منابع فونت وب را با استفاده از تگ link rel=preload، CSS font-display و Font Loading API از قبل بارگیری کنیم.

استفاده از تگ link با ویژگی rel=preload می تواند به مرورگر بگوید که منابع فونت را از قبل بارگیری کند. همچنین، با استفاده از ویژگی font-display در CSS می توانیم تأثیر نمایش فونت ها را کنترل کنیم. Font Loading API نیز امکان اطلاع از وضعیت بارگیری فونت را فراهم می کند. این اقدامات باعث بهبود کارایی بارگذاری فونت و نمایش متن در صفحه می شود.

بهترین شیوه های بارگذاری تنبل

استفاده از بارگذاری تنبل به کمک Intersection Observer API می تواند به بهبود عملکرد و سرعت بارگذاری صفحات وب کمک کند. در زیر چند روش برای اجرای این فناوری آورده شده است:

1. شناسایی عناصر برای بارگذاری تنبل: تعیین کنید کدام منابع مانند تصاویر خارج از صفحه یا محتوای پایین، برای نمایش اولیه صفحه ضروری نیستند و می توانند به تعویق بیفتند و در زمان نیاز به مشاهده کاربر بارگذاری شوند.
2. تنظیمIntersection Observer: با استفاده از Intersection Observer، می توانید مشخص کنید که آیا یک عنصر در دید کاربر قرار دارد یا خیر و بنابراین تصمیم گیری کنید که آیا باید بارگذاری تنبل را اجرا کنید یا خیر.
3. تکنیک لود تنبل را پیاده سازی کنید: در تابع فراخوانی Intersection Observer، بارگیری منابع را تا هنگامی که قابل مشاهده می شوند، مدیریت کنید. این امر معمولاً شامل جایگزینی placeholder یا ویژگی های عناصر با URL واقعی منبع، راه اندازی درخواست شبکه و بارگیری محتوا است.
4. از ویژگی های بارگذاری مناسب استفاده کنید: برای بهبود بارگذاری تصاویر تنبل، از ویژگی loading استفاده کنید. اگر تصویری به بارگیری سریع نیاز دارد، loading را بر روی eager تنظیم کنید. در غیر این صورت، از lazy برای تصاویری که می توانند به تدریج بارگیری شوند، استفاده کنید.
5. ارائه محتوای بازگشتی: در حالی که بارگذاری تنبل عملکرد را بهبود می بخشد، اطمینان از یک UX خوب ضروری است. برای ارتقاء UX، محتوای بازگشتی ارائه دهید. این امر می تواند شامل متغیرهایی با وضوح پایین یا نسخه های دیگری از منابع باشد که کاربران بتوانند زمانی که منتظر بارگذاری محتوای کامل هستند، به محتوای اصلی نگاه کنند. همچنین، به کاربرانی که جاوا اسکریپت را در مرورگرهای خود غیرفعال کرده اند، نسخه بازگشتی noscript ارائه دهید. این نسخه، برای کاربرانی که نمی توانند منابع بارگذاری شده را مشاهده کنند، مهم است.

تاثیر لود تنبل تصویر در سئو

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

حقیقت این است که باید را دو عامل در نظر داشت:

• برخی از موتورهای جستجو مانند Google می توانند جاوا اسکریپت را هنگام بررسی صفحه فعال کنند. این موارد با بار تنبل مبتنی بر جاوا اسکریپت و بارگذاری تنبل به خوبی کار خواهند کرد.
• از سوی دیگر، برخی از موتورهای جستجو هنگام بررسی صفحات، جاوا اسکریپت را فعال نمی کنند. برای پوشش این موارد، باید تصویر معمولی را با تگ src پر شده در داخل یک تگ noscript اضافه کنید (این تگ تا زمانی که مرورگرها جاوا اسکریپت را غیرفعال کرده باشند، قابل خواندن است).

در مورد اجرای لود تنبل فرمت سازگار با SEO است، زیرا ویژگی src را برای بررسی موتورهای جستجو قابل مشاهده نگه می دارد. در واقع، ویژگی src برای اطمینان از اینکه موتورهای جستجو قادر به بررسی و فهرست بندی تصاویر هستند، ضروری است.

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

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

موارد اجتناب از بارگذاری تنبل

• منابع مهم: از بارگذاری تنبل منابعی که برای رندر صفحه اولیه یا UX مهم هستند اجتناب کنید. این امر شامل محتوای بالای صفحه، اسکریپت های مهم یا عناصر تعاملی لازم برای عملکرد اصلی صفحه می شود.
• منابع کم حجم با بارگیری سریع: اگر منابع مورد نظر، مانند تصاویر یا فایل هایی که به سرعت بارگذاری می شوند، از ابتدا کم حجم باشند، مزایای بارگذاری تنبل ممکن است ناچیز باشد. در این حالت، بارگذاری فوری این منابع به عنوان راه حلی کارآمد مطرح می شود و ممکن است هزینه اجرای بارگذاری تنبل در مقایسه با سرعت بارگذاری اولیه اجزای صفحه معقول تر باشد.
• استراتژی سئو: برای مدیریت اثرات جاوا اسکریپت و بارگذاری تنبل در استراتژی سئو، می توانید از روش های جایگزین مانند بارگذاری اولیه یا رندر سمت سرور استفاده کنید. این روش ها کمک می کنند تا محتوای شما برای موتورهای جستجو قابل فهم تر باشد و از نظر سئو بهترین عملکرد را ارائه دهد.

مزایای بارگذاری تنبل

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

معایب بارگذاری تنبل

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

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

بررسی عملکرد لود تنبل تصاویر

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

Chrome DevTools را باز کنید، به تب Network و فیلتر Img بروید. در این مرحله، صفحه را دوباره بارگیری کنید. شما فقط باید تصاویر بالای موجود در لیست تصاویر را ببینید. همانطور که شروع به پیمایش صفحه می کنید، باید تصاویری را ببینید که یکی پس از دیگری در لیست ظاهر می شوند. همچنین داده های lazyload را در زیر ستون Initiator پیدا خواهید کرد. این بدان معناست که تصاویر تنها پس از اسکرول کاربر بارگذاری شده اند و بارگذاری تنبل به درستی کار می کند.

سخن آخر

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