طريقة "التحميل الكسول" هي طريقة الانتظار لتحميل الموارد إلى أن تكون هناك حاجة إليها، بدلاً من تحميلها مسبقًا. ويمكن أن يؤدي ذلك إلى تحسين الأداء من خلال تقليل مقدار الموارد التي يجب تحميلها وتحليلها عند التحميل الأولي للصفحة.
تُعد الصور التي تكون خارج الشاشة أثناء التحميل الأولي للصفحة مرشحة بشكل مثالي لهذه التقنية. وأفضل ما في الأمر هو أن الأحجام الكسولة تجعل هذه الاستراتيجية بسيطة للغاية للتنفيذ.
إضافة النص البرمجي للتشغيل الكسول إلى الصفحة
- انقر على إنشاء ريمكس لتعديل لجعل المشروع قابلاً للتعديل.
سبق أن تم تنزيل "lazysizes.min.js
" وإضافته إلى هذا الخطأ. لتضمينه في الصفحة:
- أضِف العلامة
<script>
التالية إلىindex.html
:
<script src="lazysizes.min.js" async></script>
<!-- Images End -->
</body>
سيقوم الأشخاص الكسولون بتحميل الصور بذكاء أثناء تمرير المستخدم عبر الصفحة وإعطاء الأولوية للصور التي ستظهر للمستخدم قريبًا.
تحديد الصور باستخدام طريقة "التحميل الكسول"
- أضِف الفئة
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
.
أمثلة واقعية
أكملت هذه الخطوة. للاطلاع على هذه التغييرات بشكل عملي، يُرجى اتباع الخطوات التالية:
لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
افتح وحدة التحكم وابحث عن الصور التي تمت إضافتها للتو. ومن المفترض أن تتغيّر صفوفهم من
lazyload
إلىlazyloaded
أثناء الانتقال إلى أسفل الصفحة.
- راقب لوحة الشبكة لمشاهدة تحميل ملفات الصور بشكل فردي أثناء التمرير لأسفل الصفحة.
إثبات الملكية باستخدام Lighthouse
أخيرًا، من الأفضل استخدام Lighthouse للتحقّق من هذه التغييرات. سيشير تدقيق الأداء "تأجيل الصور خارج الشاشة" من أداة Lighthouse إلى ما إذا كنت قد نسيت إضافة طريقة"التحميل الكسول" إلى أي صور خارج الشاشة.
- لمعاينة الموقع الإلكتروني، اضغط على عرض التطبيق، ثم اضغط على ملء الشاشة .
- اضغط على "Control+Shift+J" (أو "Command+Option+J" على أجهزة Mac) لفتح "أدوات مطوري البرامج".
- انقر على علامة التبويب Lighthouse.
- تأكّد من وضع علامة في مربّع الاختيار الأداء في قائمة الفئات.
- انقر على زر إنشاء تقرير.
- تحقَّق من اجتياز تدقيق تأجيل الصور خارج الشاشة.
اكتمال عملية النقل بنجاح لقد استخدمت الحجم الكسول لتحميل الصور على صفحتك باستخدام طريقة "التحميل الكسول".