lazysizes : کتابخانه جاوااسکریپت بارگذاری تنبل تصاویر
lazysizes محبوب‌ترین کتابخانه برای بارگذاری تنبل تصاویر است. این کتابخانه جاوااسکریپت به طور هوشمندانه تصاویر را در حین حرکت کاربر در صفحه بارگذاری می‌کند و تصاویری را که کاربر به زودی با آنها روبرو می شود اولویت بندی می کند.
در حال حاضر بارگذاری تنبل در سطح مرورگر دسترس است! برای یادگیری نحوه استفاده از ویژگی
loadingبه مقاله بارگذاری تنبل تصاویر در سطح مرورگر مراجعه کنید. این شیوه بارگذاری با قراردادن خاصیتloading="lazy"در المان تصاویر به سادگی قابل پیاده سازی است و نیاز به استفاده از کتابخانه و یا کد نویسی جاوااسکریپت ندارد.
مقدمه
بارگذاری تنبل یک استراتژی برای بارگذاری منابع در صورت نیاز است و در کنار آن به تعویق انداختن بارگذاری منابعی که فعلا نیازی به آنها نیست. این رویکرد باعث می‌شود بارگذاری اولیه سریعتر اتفاق بیفتد و از بارگذاری دارایی هایی که هرگز استفاده نمی شوند جلوگیری می کند.
تصاویری که در طول بارگذاری اولیه صفحه خارج از viewport و دید کاربر هستند، کاندیدای ایده آل برای این تکنیک هستند. lazysizes یکی از بهترین روش‌ها برای پیاده سازی بارگذاری تنبل است.
آنچه در این مقاله می‌خوانیم
lazysizes چیست؟
lazysizes یک کتابخانه جاوااسکریپت سریع، سازگار با سئو و خودکار است که به صورت هوشمندانه با اسکرول کاربر در صفحه تصاویر مورد نیاز برای نمایش به کاربر را بارگذاری می‌کند. lazysizes قابلیت‌های کاربردی دیگری نیز دارد که از حوصله این مقاله خارج است.
اضافه کردن lazysizes به صفحه
برای بارگذاری تنبل تصاویر با استفاده از کتابخانه lazysizes در صفحات وب مراحل زیر را دنبال کنید.
اضافه کردن کتابخانه lazysizes به صفحه
اسکریپت lazysizes را دانلود و در صفحه خود با دستور <script> به شکل زیر اضافه کنید
<script src="lazysizes.min.js" async></script>
البته می‌توانید از نسخه‌های آنلاین و موجود در cdn های مختلف نیز استفاده کنید
تعیین تصاویری که باید به صورت تنبل لود شوند
البته که شما به خوبی می‌دانید چه تصاویری از صفحه نیاز به بارگذاری تنبل دارد، فقط به این نکته دقت کنید که بهتر است تصاویر ابتدای صفحه که به محض ورود کاربر به او نمایش داده می‌شوند به صورت عادی بارگذاری شوند بنابراین فقط تصاویری را انتخاب کنید که پایین تر از viewport قرار خواهند گرفت.
به روز رسانی خصوصیات تگ‌های <img> و <picture>
برای تگ‌های <img>
قبل
<img src="flower.jpg" alt="">
بعد
<img data-src="flower.jpg" class="lazyload" alt="">
در تگ <img> دو تغییر اساسی باید انجام شود:
- اول: اضافه کردن
lazyloadبه خاصیت کلاس تصویر، با این کار به اسکریپت می‌گویید که این تصویر را به صورت تنبل بارگذاری کند. - دوم: تغییر خاصیت
srcبهdata-srcبرای جلوگیری از بارگذاری اولیه تصویر، اسکریپت بعدا و با اسکرول کاربر این تغییر را برای بارگذاری تصویر معکوس می‌کند.
برای تگ‌های <picture>
قبل
<picture> <source type="image/webp" srcset="flower.webp"> <source type="image/jpeg" srcset="flower.jpg"> <img src="flower.jpg" alt=""> </picture>
بعد
<picture> <source type="image/webp" data-srcset="flower.webp"> <source type="image/jpeg" data-srcset="flower.jpg"> <img data-src="flower.jpg" class="lazyload" alt=""> </picture>
در تگ <picture> دو تغییر اساسی باید انجام شود:
- اول: اضافه کردن
lazyloadبه خاصیت کلاس<img>با این کار به اسکریپت می‌گویید که این تصویر را به صورت تنبل بارگذاری کند. - دوم: تغییر خاصیت
srcsetبهdata-srcsetکلیه المان های<source>.
بازبینی
DevTools را باز کنید و به قسمت network بروید، صفحه را به پایین اسکرول کنید تا این تغییرات را در عمل ببینید. همانطور که اسکرول می کنید، خواهید دید که درخواست های شبکه جدید ایجاد می‌شود و ویژگی کلاس تگ‌های <img> از lazyload به lazyloaded تغییر می کنند.
علاوه بر این، می‌توانید از Lighthouse برای بررسی بارگذاری تنبل تمام تصاویر خارج از viewport استفاده کنید. Lighthouse را اجرا کنید ( Lighthouse > Options > Performance ) و به دنبال نتایج Defer images offscreen audit باشید.
پلاگین وردپرس lazysizes برای سایت‌های وردپرسی
اگر وب‌سایت شما وردپرسی است و قصد دارید بجای کدنویسی مستقیم از پلاگین برای بارگذاری تنبل استفاده کنید، Lazy Loader یکی از بهترین گزینه‌هاست. این پلاگین wordpress از کتابخانه سبک lazysizes برای بارگذاری انواع تصاویر، فیلم‌ها و iFrame ها استفاده می‌کند. صفحه رسمی پلاگین Lazy Loader در وب سایت وردپرس و همچنین صفحه پلاگین در گیت هاب
