lazy loading چیست؟ برای پاسخ به این سوال باید کمی از وقت خودتان را به ما بدهید. قطعا در حال حاضر و در دنیای امروز همه به دنبال سرعت هستند. در لودینگ سایتها نیز همینطور است. بسیاری از افراد به دنبال این هستند که وبسایت خودشان را تا حد ممکن سریعتر کنند. در ادامه این مقاله به طور کلی به lazy loading خواهیم پرداخت تا بتوانیم با استفاده از آن سرعت لود وبسایت خودمان را بهتر کنیم پس با ما همراه باشید.
لود تنبل یا lazy loading چیست
طبق آمارهای گرفته شده در این حوزه در صورتی که لود شدن وبسایت شما بیشتر از 3 ثانیه طول بکشد، کاربران وبسایت شما را ترک میکنند. در این حالت معمولا 53 درصد از کاربران خسته میشوند و تصمیم میگیرند که وبسایت شما را ترک کنند وبه سراغ وبسایت دیگری بروند. برای انجام این کار شما باید سرعت لودینگ وبسایت خودتان را بررسی کنید که با استفاده از ابزار Gtmetrix کاملا این کار امکانپذیر است. در صورتی که تا به حال با GTmetrix کار نکردهاید میتوانید از طریق لینک زیر بیشتر با آن آشنا شوید:
تکنیک Lazy Loading یا همان بارگزاری غیر همگام اساسا به روشی گفته میشود که در آن ابتدا یک چشمانداز از وبسایت شما لود میشود و سپس تصاویر به صورت غیر همگام و جدای از محتوا لود خواهند شد. یعنی دقیقا بعد از این که محتوا به کاربران نشان داده شد، تصاویر به کاربران نشان داده میشود. استفاده از این روش برای لود کردن صفحات وب بسیار مرسوم است.
چرا باید از تکنیک لود تنبل یا Lazy Loading استفاده کنیم؟
همانطور که گفته شد تکنیک Lazy Loading بسیار مرسوم است و می تواند به شما برای افزایش سرعت وب سایتتان کمک کند. استفاده از این تکنیک می تواند مزایا مختلفی را به دنبال داشته باشد که مهمترین آنها عبارتاند از:
1.کاهش استفاده از پهنای باند
با توجه به قیمت پهنای باند در ایران کاربران مختلف اهمیت بسیار زیادی را به آن میدهند. بسیاری از کاربران زمانی که وارد وبسایت شما میشوند معمولا تا پایان صفحه اسکرول نمیکنند. اگر از این تکنیک استفاده نکنید تمامی تصاویر صفحه برای کاربران شما لود میشود در چنین حالتی زمان بیشتری هم برای لود صفحات از کاربران گرفته میشود.
کمتر اشغال شدن سرور شما باعث افزایش سرعت سایت و همچنین کاهش هزینههای مربوط به پهنای باند میشود. در چنین حالتی هزینههای مربوط به نگهداری سرور نیز کاهش پیدا میکند.
2. بارگذاری DOM
اگر برای نمایش محتوا به کاربران خودتان از جاوا اسکریپت استفاده میکنید باید بدانید که بارگذاری DOM اهمیت بسیار زیادی را دارد. از آنجایی که کدهای جاوااسکریپت در آخرین مرحله از لود شدن وبسایت نمایش داده میشوند و بعد از لود شدن عکسها فعال میشوند پس قطعا زمان بسیار زیادی را از شما میگیرند تا صفحه کاملا لود شود.
اگر تصاویر زیادی را در صفحه خودتان دارید پس حتما زمان لود شدن وبسایت تا حد بسیار زیادی به تعویق میافتد که با استفاده از Lazyloading این مشکل به طور کلی برطرف میشود.
3. کاهش زمان بارگذاری
اصلیترین علت استفاده از Lazyloading کاهش زمان بارگذاری وبسایت است. با استفاده از این تکنیک شما میتوانید به راحتی سرعت لود صفحات وبسایت خودتان را افزایش دهید. همچنین افزایش سرعت لود در سئو و مسائل دیگر نیز تاثیرگذار است.
فعالسازی Lazyloading در وردپرس
همانطور که تا این بخش از مقاله lazy loading چیست گفته شد این تکنیک میتواند به خوبی موجب افزایش سرعت وبسایت شما شود. در ادامه این مقاله در ادمین سایت به معرفی یکی از بهترین افزونههایی که میتوانید در این حوزه از آن استفاده کنید میپردازیم.
قطعا افزونه معرفی شده یکی از بهترین انتخابهایی است که هر کاربر وردپرسی میتواند داشته باشد. برای نصب این افزونه کافی است که مراحل زیر را دنبال کنید.
پلاگین bLazy.js از جمله سبکترین پلاگینهای موجود در بازار است که استفاده از آن خالی از لطف نیست. این پلاگین کاملا مستقل برای جاوااسکریپت نوشته شده است. اگر بخواهیم به اصلیترین ویژگیهای این پلاگین اشاره کنیم میتوان موارد زیر را نام برد:
لود کردن تصاویر مختلف بر اساس اندازه صفحه نمایش کاربران مختلف
اجرا کردن تکنیک لود تنبل بر روی تمامی تصاویر موجود در صفحه
همچنین اجرا کردن تکنیک لود تنبل بر روی تمامی عناصری که ویژگی src دارند
افزونه Lazy Loading XT نیز یکی دیگر از افزونههای محبوب مورد استفاده در سایتهای وردپرسی است.
بعد از فعالسازی این افزونه یک زیر منو با نام Lazy Load XT ایجاد میشود که تنظیمات افزونه در آن قرار دارد. از جمله دیگر امکانات جذاب این افزونه امکان minify کردن فایلهای css و جاوا اسکریپت است که سرعت لود سایت را چند برابر میکند. همچنین اسکریپتهای مختلف را از طریق CDN لود کرده و یا اسکریپتها را در فوتر سایت اجرا کنید.
با استفاده از این افزونه میتوانید به راحتی تصاویر موجود در وبسایت خودتان را بهینهسازی کنید. همچنین میتوانید لود تنبل را در سایت خودتان فراهم کنید تصاویر به صورت بهینهای برای کاربران شما لود شود. این افزونه صددرصد رایگان است و استفاده از آن احتیاج به پرداخت هیچگونه هزینهای ندارد. افزونه Smush تصاویر را بدون افت کیفیت کاملا فشرده میکند و حجم آن را کاهش میدهد.
به جرعت میتوان گفت که بهینهسازی از طریق این افزونه سادهترین راهحل برای افزایش سرعت سایت شما است.
a3 Lazy Load یک افزونه با رویکرد موبایلی است که سرعت لود شدن سایت را تا حد ممکن افزایش میدهد. این افزونه نسبت به محتوای سایت شما بهتر عمل میکند به عبارتی هر چقدر محتوای سایت شما بیشتر باشد این افزونه عملکرد بهتری را از خود نشان میدهد.
این افزونه کاملا با آخرین نسخه وردپرس سازگار است و میتوان با خیال راحت آن را نصب کرد. گزینههای مختلفی در آن ارائه شده است که استفاده از این گزینهها خالی از لطف نیست. به جرعت میتوان گفت که اگر یک بار این افزونه را تست کنید حتما از آن در سایت وردپرسی خودتان استفاده خواهید کرد.
قدم بعدی چیست؟
همانطور که با هم دیدیم در این مقاله به طور کامل به پاسخ سوال lazy loading چیست و چطور میتوان آن را فعال کرد پرداخته شد. اما افزایش سرعت سایت تنها به اجرا کردن این تکنیک ختم نمیشود و باید به خوبی به آن پرداخته شود. برای افزایش سرعت وبسایت خودتان باید به تکنیکهای مختلفی تسلط داشته باشید. برای مسلط شدن به این تکنیکها ما در ادمین سایت یک دورهآموزشی را تهیه کردهایم که از طریق لینک زیر میتوانید به آن دسترسی داشته باشید.
در این مقاله به طور کامل به سوال lazy loading چیست پاسخ داده شد. همچنین طریقه استفاده از آن نیز کاملا شرح داده شده است. اگر در استفاده از افزونههای معرفی شده مشکلی داشتید میتوانید در بخش نظرات با ما در میان بگذارید. شاد موفق و پیروز باشید.
سلام بر پایهی آنچه نوشتید این تکنیک یا افزونه فقط دربارهی عکس کار میکند. درحالیکه من در سایتهای زیادی دیدم که خود نوشتهها هم گام به گام لود میشوند و گاهی نوشتهها کمرنگ هستند و وقتی اسکرول میکنیم پررنگ میشوند.
سلام
ممنون استفاده کردم ، عالی بود
سلام
بر پایهی آنچه نوشتید این تکنیک یا افزونه فقط دربارهی عکس کار میکند. درحالیکه من در سایتهای زیادی دیدم که خود نوشتهها هم گام به گام لود میشوند و گاهی نوشتهها کمرنگ هستند و وقتی اسکرول میکنیم پررنگ میشوند.
لیزی لود برای تمام المانهای صفحه قابل اجراست. این موردی که میگید معمولا بخاظر افکتهایی هست که با جاوا اسکریپت به صفحه داده میشه