lazysizes : کتابخانه جاوااسکریپت بارگذاری تنبل تصاویر

lazysizes محبوب‌ترین کتابخانه برای بارگذاری تنبل تصاویر است. این کتابخانه جاوااسکریپت به طور هوشمندانه تصاویر را در حین حرکت کاربر در صفحه بارگذاری می‌کند و تصاویری را که کاربر به زودی با آنها روبرو می شود اولویت بندی می کند.

lazysizes : کتابخانه جاوااسکریپت بارگذاری تنبل تصاویر

مقدمه

بارگذاری تنبل یک استراتژی برای بارگذاری منابع در صورت نیاز است و در کنار آن به تعویق انداختن بارگذاری منابعی که فعلا نیازی به آنها نیست. این رویکرد باعث می‌شود بارگذاری اولیه سریعتر اتفاق بیفتد و از بارگذاری دارایی هایی که هرگز استفاده نمی شوند جلوگیری می کند.

تصاویری که در طول بارگذاری اولیه صفحه خارج از viewport و دید کاربر هستند، کاندیدای ایده آل برای این تکنیک هستند. lazysizes یکی از بهترین روش‌ها برای پیاده سازی بارگذاری تنبل است.

lazysizes چیست؟

lazysizes یک کتابخانه جاوااسکریپت سریع، سازگار با سئو و خودکار است که به صورت هوشمندانه با اسکرول کاربر در صفحه تصاویر مورد نیاز برای نمایش به کاربر را بارگذاری می‌کند. lazysizes قابلیت‌های کاربردی دیگری نیز دارد که از حوصله این مقاله خارج است.

اضافه کردن lazysizes به صفحه

برای بارگذاری تنبل تصاویر با استفاده از کتابخانه lazysizes در صفحات وب مراحل زیر را دنبال کنید.

  • اضافه کردن کتابخانه lazysizes به صفحه
  • تعیین تصاویری که باید به صورت تنبل لود شوند
  • به روز رسانی خصوصیات تگ‌های <img> و <picture>

اضافه کردن کتابخانه 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 : کتابخانه جاوااسکریپت بارگذاری تنبل تصاویر - می‌توانید از Lighthouse برای بررسی بارگذاری تنبل تمام تصاویر خارج از viewport استفاده کنید.

پلاگین وردپرس lazysizes برای سایت‌های وردپرسی

اگر وب‌سایت شما وردپرسی است و قصد دارید بجای کدنویسی مستقیم از پلاگین برای بارگذاری تنبل استفاده کنید، Lazy Loader یکی از بهترین گزینه‌هاست. این پلاگین wordpress از کتابخانه سبک lazysizes برای بارگذاری انواع تصاویر، فیلم‌ها و iFrame ها استفاده می‌کند. صفحه رسمی پلاگین Lazy Loader در وب سایت وردپرس و همچنین صفحه پلاگین در گیت هاب

پلاگین وردپرس lazysizes برای سایت‌های وردپرسی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.