لیزی لود چیست؟ چرا باید از lazy loading استفاده کنیم؟
لیزی لود (lazy load) یا لود تنبل یکی از ابزارهای مهم و حیاتی برای بهینه سازی وبسایت محسوب میشود که در صورت عدم استفاده از آن، موجب کاهش چشمگیر سرعت وبسایت شما و بهدنبال آن ایجاد تجربه منفی در کاربران و سپس عدم کسب رتبه خوب از موتورهای جستجوگر میشود.
در ادامه همراه ما باشید تا ضرورت استفاده از این ابزار را برای شما شرح دهیم.
لیزی لود (lazy load) چیست؟
در دنیای وبسایتها، سرعت بیشتر در بارگذاری صفحات حرف اول را میزند. طبق آمارها مخاطبان فقط 3 ثانیه برای باز شدن صفحه وبسایت صبر میکنند و پس از آن اگر باز نشد، صفحه را میبندند و به سراغ وبسایت دیگری میروند؛ پس باید حواسمان به سرعت بارگذاری و باز شدن وبسایت هم باشد.
بیش از نیمی از حجم صفحات وبسایتها توسط عکس و ویدئو پر میشود، همین عامل تاثیر زیادی در کاهش سرعت بارگذاری صفحات میشود؛ برا اینکه بتوانیم به افزایش سرعت وبسایت بپردازیم باید از یکی از تکنیکهای سئو به اسم لیزی لود (lazy load) استفاده کنیم تا علاوه بر حجم مصرفی کمتر از سرعت بالاتری برخوردار شویم.
اگر قابلیت لود تنبل یا لیزی لود غیرفعال باشد، زمانی که میخواهیم وبسایت را باز کنیم با سرعت بسیار پایین و بامعطلی باز میشود. چرا؟ در این حالت، زمانی که شما اقدام به باز کردن صفحه کردهاید، تمامی عکسها و ویدئوها بهصورت یکجا شروع به بارگذاری میکنند و همین باعث تجربه سرعت کمتر میشود.
اما وقتیکه این حالت فعال باشد، صفحه با بیشترین سرعت باز میشود؛ دقیقا برعکس وقتیکه lazy load غیر فعال بود زمانی که اقدام به باز کردن صفحه میکنیم صفحه سریعا باز میشود و در ابتدا محتوا نمایش داده میشود و سپس با توجه به حرکت کاربر در صفحه، اقدام به بارگذاری دیگر محتواها مثل عکس و ویدئو میشود.
لیزی لود یا لود تنبل چگونه کار میکند؟
لیزی لود یک روش برای سریعتر بارگذاری شدن وبسایت است و وقتی منابع صفحه مثل عکس یا ویدئو را برای کاربر بارگذاری میکند که کاربر به آن نیاز پیدا کند؛ بهطور مثال وقتی کاربر وارد یک صفحه میشود، عکسها تا قسمتی از صفحه که کاربر پیمایش کرده باشد باز میشود و عکسی که در آخر صفحه قرار داده شده باز نمیشود چون کاربر هنوز به آن قسمت نرسیده.
درواقع یکی از محرکهای اصلی لیزی لود، پیمایش کاربر است. وقتی کاربر وارد صفحه میشود، تصاویر قسمت اولی که قابل مشاهده است ابتدا باز میشوند ولی بخشی از صفحه که فعلا دیده نمیشود بارگذاری نمیشود؛ کاربر به محض اینکه به بخش پایینی صفحه پیمایش(اسکرول) کرد، دستور داده میشود که محتوا بارگذاری و نمایش داده شود.
5دلیل که باید از تکنیک lazy loading استفاده کنیم
در ادامه دلایلی که باید از تکنیک لیزی لود یا لود تنبل استفاده کنید را برایتان شرح دادهایم
- کاهش استفاده از پهنای باند: تصاویر و محتواهای تصویری تا جایی بارگذاری میشوند که کاربر پیمایش (اسکرول) کند و باقی تصاویر بارگذاری نمیشوند.
- بهبود عملکرد سایت: با استفاده کمتر از منابع و کاهش زمان بارگذاری، عملکرد کلی وبسایت هم بهتر میشود.
- بهبود تجربه کاربر: وقتی عناصری که کاربران نیاز دارند سریعتر بارگذاری شوند، کاربران هم سریعتر میتوانند با وبسایت تعامل داشته باشند پس در تجربه کاربران تاثیر مثبت خواهد داشت.
- افزایش سرعت بارگذاری صفحه: اگر فقط عناصری که در دید کاربر قرار دارد بارگذاری شود، از زمان بارگذاری صفحه هم کم میشود در نتیجه کاربر خسته نمیشود و تصمیم به خروج از وبسایت نمیگیرد.
- بهبود سئو: یکی از معیارهای موتورهای جستجو مثل گوگل برای رتبه بندی، سرعت بارگذاری وبسایت میباشد، بنابراین شما میتوانید با فعالسازی لیزی لود یا لود تنبل به بهبود رتبه وبسایت کمک کنید.
لود تنبل یا لیزی لود را چگونه در وبسایت پیاده کنیم؟
برای پیاده سازی لیزی لود از افزونههای گوناگونی میتوانید استفاده کنید اما در این قسمت، ما 3روش پیاده سازی را آموزش دادهایم.
استفاده از ویژگی HTML5:
یکی از ویژگیهایی که به HTML5 اضافه شده، اضافه شدن عنصر loading=Lazy به قسمت <img> است. این عنصر به مرورگر دستور میدهد تا تصاویر را به صورت لود تنبل بارگذاری کند؛ یعنی زمانی تصاویر را بارگذاری کند که کاربر نزدیک آنها پیمایش میکند.
<img src="image.jpg" loading="Lazy" alt="image">استفاده از کتابخانههای جاوا اسکریپت
در جاوا اسکریپت کتابخانههای زیادی برای ویژگی لیزی لود بهوجود آمده است که امکان پیاده سازی این ویژگی را فراهم میکند؛ مثل: LazyLoad.js و Lozad.js.
const observer = Lozad();
observer.observe();استفاده از Intersection Observer API
این API به شما اجازه میدهد تا زمانی که عنصر خاص به محدودهای که کاربر قصد مشاهده دارد رسید، یک عمل انجام دهد. از این API برای پیاده سازی لیزی لود هم استفاده میشود.
البته همانگونه که در ابتدا به شما گفتیم، افزونههای زیادی برای پیاده سازی لود تنبل بهوجود آمده است. اگر قصد دارید از این ابزارها برای وبسایت خود استفاده کنید اما نحوه کار با آنها را نمیدانید، کافیست از مشاوران اُبو سوالات خود را بپرسید تا راهنماییهای لازم را به حضور شما برسانند.
چالشهای استفاده از لیزی لود
هرچقدر هم که لیزی لود برای بهبود وبسایت مناسب باشد اما بدانید که پیچیدگیها و چالشهایی هم دارد که در ادامه میپردازیم
پیچیدگی بیشتر
برای اینکه لیزی لود نیاز به کدنویسی بیشتر و اضافی دارد، برای پیاده سازی آن ممکن است سختتر شود.
تاخیر در بارگذاری
درحالی که لیزی لود فقط منابع را موقعی که نیاز باشد بارگذاری میکند، باعث ایجاد تاخیر در بارگذاری برای بقیه عناصر صفحه هم میشود.
تاثیر در رتبهبندی موتورهای جستجو
در برخی موارد ممکن است موتورهای جستجو، محتواهای بارگذاری شده بهصورت لیزی لود را نتواند به درستی فهرست کند، همین امر موجب تاثیرگذاری منفی بر مشاهده وبسایت در نتایج جستجو میشود.
ریسک درست پیادهسازی نشدن
توجه کنید که اگر لیزی لود یا لود تنبل بهصورت صحیح پیاده سازی نشود، باعث بروز مشکلات میشود.
جمع بندی
لیزی لود (lazy load) یکی از تکنیکهای مهم برای بهینه سازی وبسایت است. استفاده نکردن از این تکنیک موجب کاهش سرعت بارگذاری وبسایت شما خواهد شد، همین امر باعث ایجاد تجربه منفی برای کاربر و پس از آن از دست دادن رتبه میشود.
اگر به فکر جلب رضایت کاربران و کسب رتبه خوب در سئو هستید، بهکار بردن این تکنیک را پشت گوش نیندازید. برای راهنماییهای بیشتر با مشاوران ما مشورت کنید و این فرصت طلایی را از دست ندهید!
آیا این نوشته برایتان مفید بود؟
