این مقاله در خصوص؛ لود تنبل یا Lazy Loading چیست؟ میباشد. برای اطلاعات بیشتر با وبوآپ همراه باشید.
“برای آگاهی بیشتر و همچنین؛ خرید خط تلفن ویپ با وبوآپ در ارتباط باشید.
”
سرعت لود شدن سایت از مهمترین موارد در جلب رضایت یا عدم رضایت کاربران میباشد. سرعت لود شدن سایت، اصولا بستگی به منابعی دارد. که از طریق آن صفحات سایت چگونه بارگذاری می شود.
اهمیت لود تنبل یا Lazy Loading در چیست؟
صفحات سایت از محتواهایی بصورت متن، تصویر و ویدئو تشکیل شده است. بطور کلی حجم کل صفحات به طور میانگین 3376 کیلو بایت میباشد. این حجم از صفحات حدودا 70 درصد از کدهای HTTP Archive را تشکیل می دهد. مرورگرها هم، برای باز کردن این حجم صفحات احتیاج به قدرت بالایی برای دانلود دارد. حجم صفحات با اضافه کردن تصاویر، مقالات و ویدئوهای جدید افزایش یافته. پس؛ باعث کاهش سرعت لود شدن سایت و کاهش رتبه سایت خواهد شد.
Lazy loading تکنیک خاصی برای بهینه سازی صفحات میباشد. که با کمک آن صفحاتی که مشخص می کنید، سرعت آن ها بهینه می شود. در واقع زمانی که کاربر وارد سایت شده. اول؛ اطلاعات قابل مشاهده بارگذاری می شود. و بعد با اسکرول کردن، بقیه اطلاعات لود شده و نمایش داده می شود. تایم بارگذاری بقیه اطلاعاتی که بعد از اسکرول کردن دیده می شود. را می توان در مقایسه با چشم انداز اولیه بیشتر کرد. تا منابع اولیه سریع تر بارگذاری و دیده شود. همین تاخیر کمک می کند. تا مخاطبان بیشتری در سایت نگه داشته شوند. و نرخ پرش سایت تا حد زیادی کاهش پیدا کند.
تصاویر و حجم آن ها
تصاویر سایت تا حدود 65 درصد از حجم کل سایت را به خود اختصاص می دهند. کاهش سرعت سایت در صورتی که تصاویر را بهینه و فشرده کرده باشید. هم می تواند تا میزان قابل توجهی سرعت سایت را کاهش دهد. به مرور، این کاهش زمان بارگذاری از دست دادن کاربران و کاهش رشد و حتی توقف رشد سایت و احتمالا کاهش فروش سایت را به همراه دارد.
برای “ خرید اسکای روم ” به این صفحه مراجعه کنید.
آیا باید از تکنیک Lazy Loading استفاده کرد؟
استفاده ازین تکنیک شامل مزیت هایی است. از جمله:
- کاهش پهنای باند
- کاهش زمان بارگذاری سایت
- به تعویق انداختن جاوا اسکریپت ها
روش های پیاده سازی تکنیک Lazy loading
می توانید با توجه به نوع سایت و کاربرد مورد نظرتان تکنیک لود تنبل را پیاده سازی کنید.
+روش Robin Ozborne
- اگر جاوا اسکریپت از کار بیافتد. و یا خطایی داشته باشد. بازهم کاربران دسترسی به محتوای سایت دارند.
- تصاویر سایت فقط در صورتی که کاربران اسکرول کنند، نشان داده می شود.
- مخاطبان به کل محتوای صفحات سایت دسترسی دارند.
- به نصب پلاگین ها احتیاجی ندارید.
+David Walsh
بجای استفاده از scr در کدنویسی HTML از ویژگی data- scr استفاده کنید.
|
1
|
<img data–src=“image.jpg” alt=“test image”>
|
این ویژگی در ابتدا برای کدنویسی های CSS مخفی است. ولی زمانی که کد زیر اضافه شود. در انتقال نرم CSS نشان داده می شود.
|
1
2
3
4
5
6
7
8
9
|
img {
1; opacity:
Transition: opacity 0.3s ;
}
img[data-src] {
opacity: ;
}
|
+نصب و استفاده از افزونه js
این پلاگین برای لود تصاویر تقریبا سبک است. و برای مستقل شدن جاوا اسکریپت از آن استفاده می شود.
|
1
|
<img class=“b-lazy” src=“placeholder.gif” data–src=“image.jpg” alt=“test image”>
|
استفاده از این روش نیاز به تغییر تگ img دارد.
- افزونه js را نصب و لود کنید.
- کلاس lazy را اضافه کرده.
- عکس دلخواه انتخاب کنید. و به عنوان place holder به جای ویژگی scr استفاده کنید.
- در جاوا اسکریپت افزونه blazy را فراخوانی کرده. و تغییرات را به صورت زیر اعمال کنید:
|
1
2
3
|
Var blazy= new blazy ( {
//options here
}) ;
|
+نصب افزونه lazy load xt
این تکنیک بسیار ساده و سریع بوده.
|
1
2
|
<script src=“jquery.js”></script>
<script src=“jquery.lazyloadxt.js”></script>
|
پس از نصب این افزونه می تواند به صورت اتومات کار خودش را شروع کند. به صورت دستی هم میشود که شامل:
|
1
|
$(elements).lazyLoadXT();
|
+تکنیک بلوری در lazy loading
مزیت استفاده از این روش:
- در حالت minify فقط 463 بایت از CSS و 1007 بایت از جاوا اسکریپت را اشغال می کند.
- صفحات Retina که رزولوشن بسیار بالایی دارد، را پشتیبانی می کند.
- بر اساس تکنیک پیشرفت تدریجی رابین آزبورن پیاده سازی شده.
- برای اجرا به پلاگین خاصی نیاز ندارد.