اگر قبلا از خواندن این مقاله با مسائل تکنیکال سئو و یا توسعه و بهینه سازی سایت درگیر بودید، مسلما حداقل می دانید که لود تنبل یک مفهوم مثبت به شمار می رود. اما اگر درباره این مسائل اطلاعات چندانی نداشته باشید احتمالا با خواندن عنوان به این فکر خواهید کرد که اصلا چرا باید چیزی که در آن کلمه “تنبل” هستش اجرا بشود. این مقاله برای هر دو قشر از مخاطبان مناسب است به این خاطر که ما هم می خواهیم بدانیم که لود تنبل چیست که خیالتان راحت شود که یک مفهوم مثبت است و اجرای آن ضرورت دارد، هم اینکه اگر می دانید که این یک مفهوم مثبت است، می خواهیم چند روش اجرای آن را برای شما شرح دهیم. پس با ما در این مقاله همراه باشید.
لود تنبل چیست ؟
اینکه بگوییم لود تنبل چیست کاملا سادست، موضوع اصلی ما این است که چگونه اصلا این لود تنبل اجرا می شود. لود تنبل یا Lazy Load به کاری گفته می شود که ما در آن بارگذاری منابع و المان های سایت را به تعویق می اندازیم تا زمانی که بارگذاری آن ها لازم باشد. ما این کار را برای این انجام می دهیم که عملکرد سایتمان را بهبود ببخشیم و منابع سیستم را ذخیره کنیم. اگر مفهوم این موضوع را متوجه نشدید بگذارید با یک مثال ساده آن را توضیح دهیم.
فرض کنید صفحه وب شما یک عکس پر حجم دارد که بارگذاری آن به نسبت دیگر المان های سایتتان بیشتر طول می کشد. حال این عکس ممکن است باعث شود که صفحه شما تا زمانی که خود عکس بارگذاری نشود بالا نیاید و مخاطب شما خیال کند که صفحه شما دیر لود می شود و صفحه تان را ببندد. شما با کمک لود تنبل می توانید کاری کنید که تمامی بخش های سایت شما به محض ورود مخاطب لود شود اما عکس پر حجم شما زمانی لود بشود که کاربر صفحه را اسکرول می کند به آن می رسد. اینطوری هم مخاطب وقتی زمانش باشد عکس را می بیند، هم بارگذاری عکس مزاحم بارگذاری دیگر بخش های صفحه شما نمی شود.
مزایای لود تنبل چیست ؟
قبل از اینکه به سراغ این برویم که بفهمیم مزایای “Lazy Load چیست” بگذارید اول اشاره ای داشته باشیم که معمولا چرا در سئو سایت این کار انجام می شود و چه اتفاقی افتاد که لود تنبل انقدر بین همگان محبوب شد. زمانی که در بحث موتور های جست و جو مبحثی به نام “سئو تکنیکال” بوجود آمد، خیلی از سایت ها شروع به استفاده از روش های آن کردند که یکی از موارد آن هم، بالا بردن سرعت بارگذاری سایت بود. یکی از مهمترین بخش های سئو تکنیکال این است که زمان لود یک سایت به حداقل ممکن برسد و مسلما یکی از راه های پایین آوردن این زمان هم استفاده از لود تنبل می باشد. درست است که این موضوع همیشه بوده اما آنجا بود که حتی دیجیتال مارکتر ها هم به این فکر افتادند که لود تنبل چیست و چرا باید از آن استفاده کنند.
به علاوه مبحث تکنیکال سئو، به طور کلی برای مخاطب سایت هم بدون اینکه مخاطب خودش بداند، لود تنبل مزایایی را دارد که آن ها را برای شما شرح خواهیم داد.
پایین آوردن زمان بارگذاری اولیه
اگر بپرسید یکی از مزایای لیزی لود چیست ؟ یکی از مهمترین پاسخ ها پایین آوردن زمان بارگذاری اولیه یا همان Reduce Initial Load Time است. لیزی لود وزن صفحه شما را پایین تر می آورد و همین موضوع باعث بارگذاری اولیه سریع تر صفحه شما می شود.
حفاظت از پهنای باند
لود تنبل به این خاطر که باعث می شود محتوا وقتی بارگذاری شود که درخواست بارگذاری ارسال شود، از پهنای باند شما محافظت می کند.
حفاظت از منابع سیستم
لود تنبل هم از منابع سرور و هم از منابع مخاطب محافظت می کند. به این خاطر که یک سری از کد های جاوا اسکریپت و تصاویر باید قبل از بارگذاری رندر شوند که همین موضوع می تواند به منابع سیستم آسیب بزند. لود تنبل جلوی رندر شدن بی رویه این موارد را می گیرد.
فرق لود تنبل با لود مشتاق چیست؟
در حالی که لود تنبل سعی می کند محتوا ها را زمانی که لازم باشد و کاربر بخواهد بارگذاری کند، لود مشتاق یا لود حریص (Eager Loading) تمام تلاشش را می کند که تمامی منابع سایت، بلافاصله بعد از اجرا شدن کد لود شوند. حتی لود حریص المان هایی که کاربر ممکن است اصلا به سراغشان نرود را هم به سرعت لود می کند.
اینگونه نیست که لود مشتاق یک مفهوم منفی باشد و هیچ مزایایی نداشته باشد. اتفاقا زمانی که حتما لازم باشد تمامی المان ها در پس زمینه بارگذاری شوند، لود مشتاق مسلما کارساز تر از لود تنبل است. برای مثال یک سری از سایت ها که از لود مشتاق استفاده می کنند قبل از بارگذاری کامل صفحه اشان یک صفحه لودینگ قرار می دهند که کاربر مطمئن شود صفحه وجود دارد و بالا می آید.
روش های اجرای لود تنبل
شما برای اجرای لود تنبل از خیلی از لایبرری های منبع باز می توانید استفاده کنید که شامل موارد زیر می شوند:
Blazy.js: بلیزی. جی اس یک لایبرری جاوا اسکریپت سبک وزن است که برای لیزی لود و سرو چندگانه تصاویر، ویدیو ها و منابع دیگر استفاده می شود.
Lazy Load: یک لایبرری دیگر که نامش همان لود تنبل است که یک اسکریپت است که به صورت خودکار تصاویر را زمانی که داخل ویوپورت (بخشی که کاربر از سایت می بیند) می شوند، بارگذاری می کند.
روش های اجرای لود تنبل بر روی کد های سایت
Lazy initialization: این روش تمام آبجکت های صفحه را تبدیل به null می کند. داده ها زمانی لود می شوند که مرورگر آن ها را null تشخیص بدهد.
Virtual Proxy: وقتی به یک آبجکت دسترسی پیدا می کنید، با یک آبجکت ظاهری با کارکردی مانند آبجکت واقعی رو به رو می شوید. زمانی که آبجکت ظاهری فراخوانده می شود، زمانی آبجکت واقعی لود می شود که بخواهید به آن دسترسی پیدا کنید.
Ghost: در این قسمت فقط بخشی از آبجکت لود می شود که بتوانید آن را تشخیص دهید. اگر درخواست کنید که به کل آبجکت دسترسی داشته باشید، در آن صورت است که داده به طور کامل بارگذاری می شود
Value holder: یگ آبجکت مخصوص بارگذاری می شود که رفتار لود تنبل را به عهده بگیرد. سپس در زمان لازم، آبجکت اصلی در همان جا ظاهر می شود.
روش های لود تنبل بر روی تصاویر سایت
زمانی که شما وارد صفحه می شوید، لود تنبل باعث می شود یک جایگاه مخصوص سبک برای هر تصویر لود بشود و تصویر به طور کامل بارگذاری نمی شود. وقتی شما اسکرول کنید و به تصویر برسید، در آن صورت تصویر جایش را به آن جایگاه سبک می دهد که بتوانید تصویر را مشاهده کنید.
برای اجرای این تکنیک می توانید از روش های زیر استفاده کنید:
-اینلاین کردن تگ های <img> با استفاده از جاوا اسکریپت
-استفاده از Event Handler ها مانند scroll یا resize
-استفاده از Intersection Observer API (این متن در مقاله نیاید: لینک در منبع وجود دارد)
-استفاده از تصویر پس زمینه CSS
روش لود تنبل برای ویدیو های سایت
برای لود تنبل ویدیویی که به صورت خودکار پخش نمی شود شما می توانید از اتریبیوت preload تگ ویدیوی HTML5 استفاده کنید.
برای ویدیو هایی که به صورت خودکار پخش می شوند، گوگل کروم خودش به صورت خودکار لود تنبل ارائه می دهد. اما برای مرورگرهای دیگر می توانید از کد زیر استفاده کنید:
<video autoplay muted loop playsinline width=”xx” height=”xx” poster=”placeholder-image.jpg”>
نکات اجرای لود تنبل
زمانی که می خواهید از لیزی لود استفاده کنید حتما به موارد زیر توجه داشته باشید:
-لود تنبل را فقط برای منابعی از سایت اجرا کنید که خارج از منطقه دید مخاطب هستند و در رابطه با کد ها هم فقط برای آن هایی لود تنبل را به کار گیرید که نیازی نیست در زمان ورود به سایت بارگذاری بشوند.
-وقتی از لود تنبل برای عکس ها استفاده می کنید، آن ها را با قرار دادن decode() جاوا اسکریپت در DOM دی کد کنید. اگر این کار را نکنید تصاویر بزرگ ممکن است باعث فریز شدن مرورگر مخاطب بشوند.
-ارور های مربوط به لود عکس ها و آبجکت ها را برطرف کنید.
-مورد noscript را اگر جاوا اسکریپت سایت در دسترس نیست لحاظ کنید. وگرنه اگر مخاطبان جاوا اسکریپت را در مرورگرشان غیر فعال کرده باشند، دیگر نمی توانند منابع لیزی لود شده را به طور کلی مشاهده کنند.
نتیجه گیری
احتمال زیاد با خواندن این مقاله هم دریافتید که دقیقا لود تنبل چیست و هم اینکه به یکسری از روش های اجرای آن آشنا شدید. ممکن است روش های دیگر اجرای Lazy Load وجود داشته باشند اما ما سعی کردیم مرسوم ترین روش ها را برای شما بازگو کنیم. البته این را هم باید اضافه کرد که اگر از طراحی سایت وردپرسی استفاده می کنید، افزونه های زیادی برای Lazy Load وجود دارند که بدون اینکه لازم باشد شما کاری انجام دهید، به بهترین نحو ممکن لود تنبل را برای شما به اجرا در می آورند. البته در کار با این افزونه ها هم دقت کنید و حتما از افزونه های مورد تایید استفاده کنید تا بهترین نتیجه را کسب کنید.
امیدواریم که با خواندن این مقاله، بتوانید بخشی از مشکلات سرعت سایتتان را بهبود ببخشید و هم مخاطبان خودتان را راضی تر کنید و هم در رابطه با سئو تکنیکال سایتتان هم کاری انجام داده باشید. ممنون که در این مقاله هم با ما همراه بودید.
منبع:
