بارگیری تنبل سطح مرورگر اکنون در دسترس است! برای یادگیری نحوه استفاده از ویژگی
loadingبه مقاله بارگذاری تنبل تصاویر در سطح مرورگر مراجعه کنید. این روش بارگذاری با تنظیم خاصیتloading="lazy"می توان آن را به راحتی در عنصر تصویر پیاده سازی کرد و نیازی به استفاده از کتابخانه یا کدنویسی جاوا اسکریپت ندارد.
معرفی
بارگذاری تنبل استراتژی بارگیری منابع در مواقع مورد نیاز است، در حالی که بارگذاری منابعی را که در حال حاضر مورد نیاز نیستند به تأخیر می اندازد. این رویکرد بار اولیه را سریعتر می کند و از بارگیری دارایی هایی که هرگز استفاده نمی شوند جلوگیری می کند.
تصاویری که خارج از viewport و دید کاربر در هنگام بارگذاری اولیه صفحه هستند، کاندیدهای ایده آل برای این تکنیک هستند. lazysizes یکی از بهترین راه ها برای اجرای بارگذاری تنبل است.
آنچه در این مقاله می خوانیم
تنبلی ها چیست؟
lazysizes یک کتابخانه جاوا اسکریپت سریع، سازگار با سئو و خودکار است که به طور هوشمندانه تصاویر مورد نیاز برای نمایش به کاربر را در حین پیمایش کاربر به پایین صفحه بارگیری می کند. lazysizes ویژگی های مفید دیگری نیز دارد که از حوصله این مقاله خارج است.
Lazysize را به صفحه اضافه کنید
مراحل زیر را دنبال کنید تا با استفاده از کتابخانه lazysizes در صفحات وب، تصاویر را با تنبلی بارگذاری کنید.
کتابخانه lazysizes را به صفحه اضافه کنید
اسکریپت lazysizes را دانلود کرده و در صفحه فرمان خود اجرا کنید <script> مطابق شکل زیر اضافه کنید
<script src=" async></script>
البته می توانید از نسخه های آنلاین موجود در CDN های مختلف نیز استفاده کنید
مشخص کنید کدام تصاویر باید لود شوند
البته شما به خوبی می دانید که چه تصاویری در صفحه نیاز به لود آهسته دارند، فقط به این نکته توجه کنید که بهتر است تصاویری که در بالای صفحه نمایش داده می شوند به محض ورود کاربر بارگذاری شوند، پس فقط تصاویر را انتخاب کنید. که در زیر ویوپورت قرار خواهند گرفت.
ویژگی های برچسب را به روز کنید <img> و <picture>
برای برچسب ها <img>
قبل از
<img src=" alt="">
بعد از
<img data-src=" class="lazyload" alt="">
در برچسب <img> دو تغییر اصلی باید ایجاد شود:
- اول: اضافه کنید
lazyloadبا استفاده از ویژگی کلاس تصویر، به اسکریپت می‌گویید بارگذاری آن تصویر را به تاخیر بیندازد. - دوم: تغییر مالکیت
srcبهdata-srcبرای جلوگیری از بارگیری اولیه تصویر، اسکریپت این تغییر را معکوس می کند تا بعداً وقتی کاربر اسکرول می کند، تصویر بارگیری شود.
برای برچسب ها <picture>
قبل از
<picture> <source type="image/webp" srcset=" <source type="image/jpeg" srcset="> <img src=" alt=""> </picture>
بعد از
<picture> <source type="image/webp" data-srcset=" <source type="image/jpeg" data-srcset="> <img data-src=" class="lazyload" alt=""> </picture>
در برچسب <picture> دو تغییر اصلی باید ایجاد شود:
- اول: اضافه کنید
lazyloadبه دارایی کلاس<img>این به اسکریپت می گوید که بارگذاری این تصویر را به تأخیر بیندازد. - دوم: تغییر مالکیت
srcsetبهdata-srcsetهمه موارد<source>.
مرور
DevTools را باز کنید و به بخش شبکه بروید، صفحه را به پایین اسکرول کنید تا این تغییرات را در عمل ببینید. همانطور که اسکرول می کنید، درخواست های شبکه جدید ایجاد شده و ویژگی کلاس label را مشاهده خواهید کرد <img> از جانب lazyload به lazyloaded آنها تغییر می کنند
همچنین می‌توانید از Lighthouse برای بررسی کندی بارگذاری همه تصاویر در خارج از ویوپورت استفاده کنید. اجرای فانوس دریایی ( فانوس دریایی > گزینه ها > عملکرد ) و نتایج را رصد کنید به تعویق انداختن تصاویر خارج از صفحه نمایش حسابرسی شود
پلاگین وردپرس lazysizes برای سایت های وردپرسی
اگر وب سایت شما وردپرس است و قصد دارید به جای کدنویسی مستقیم از افزونه لودر تنبل استفاده کنید، Lazy Loader یکی از بهترین گزینه ها است. این افزونه وردپرس از کتابخانه سبک lazysizes برای بارگذاری تصاویر، ویدیوها و iFrames مختلف استفاده می کند. صفحه رسمی پلاگین های Lazy Loader در وب سایت وردپرس و همچنین صفحه افزونه ها در GitHub
