بارگذاری تنبل رویکرد انتظار برای بارگیری منابع تا زمانی است که به آنها نیاز است، به جای بارگیری آنها از قبل. این می تواند با کاهش میزان منابعی که باید در بارگذاری صفحه اولیه بارگذاری و تجزیه شوند، عملکرد را بهبود بخشد.
تصاویری که در طول بارگذاری اولیه صفحه خارج از صفحه هستند، کاندیدای ایده آل برای این تکنیک هستند. بهتر از همه، lazysizes این را به یک استراتژی بسیار ساده برای پیاده سازی تبدیل می کند.
اسکریپت lazysizes را به صفحه اضافه کنید
- روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
lazysizes.min.js قبلا دانلود شده و به این مشکل اضافه شده است. برای قرار دادن آن در صفحه:
- تگ
<script>زیر را بهindex.htmlاضافه کنید:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
lazysizes به طور هوشمندانه تصاویر را هنگام حرکت کاربر در صفحه بارگذاری می کند و تصاویری را که کاربر به زودی با آنها روبرو می شود اولویت بندی می کند.
نشان دادن تصاویر به بار تنبل
- کلاس
lazyloadبه تصاویری که باید لود شوند اضافه کنید. علاوه بر این، ویژگیsrcرا بهdata-srcتغییر دهید.
به عنوان مثال، تغییرات برای flower3.png به این صورت است:
<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">
برای این مثال، بارگذاری تنبلی flower3.png ، flower4.jpg ، و flower5.jpg را امتحان کنید.
آن را در عمل ببینید
خودشه! برای مشاهده عملکرد این تغییرات، مراحل زیر را دنبال کنید:
برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید
.کنسول را باز کنید و تصاویری که به تازگی اضافه شده اند را پیدا کنید. با اسکرول کردن صفحه به پایین، کلاس های آنها باید از
lazyloadبهlazyloadedتغییر کند.
- پانل شبکه را تماشا کنید تا وقتی صفحه را پایین می‌روید، فایل‌های تصویری را به صورت جداگانه بارگیری کنید.
با استفاده از Lighthouse تأیید کنید
در نهایت، ایده خوبی است که از Lighthouse برای تأیید این تغییرات استفاده کنید. ممیزی عملکرد "به تعویق انداختن تصاویر خارج از صفحه" Lighthouse نشان می دهد که آیا فراموش کرده اید بارگذاری تنبل را به هر تصویر خارج از صفحه اضافه کنید.
- برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .
- «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
- روی تب Lighthouse کلیک کنید.
- مطمئن شوید که چک باکس Performance در لیست دسته بندی ها انتخاب شده است.
- روی دکمه Generate report کلیک کنید.
- بررسی کنید که بازرسی تصاویر خارج از صفحه به تعویق افتاده است.
موفقیت! شما از lazysizes برای بارگذاری تنبلی تصاویر در صفحه خود استفاده کرده اید.