טעינה עצלה היא הגישה של המתנה לטעינה של משאבים עד שהם נחוצים, במקום לטעון אותם מראש. כך תוכלו לשפר את הביצועים, כי כמות המשאבים שצריך לטעון ולנתח אותם בטעינה הראשונית של הדף.
תמונות שלא מופיעות במסך במהלך הטעינה הראשונית של הדף הן מועמדים אידיאליות לשימוש בשיטה הזו. והכי חשוב, lazysizes הופך את השיטה הזו לפשוטה מאוד ליישום.
הוספת הסקריפט של עצלנים לדף
- לוחצים על רמיקס לעריכה כדי שיהיה אפשר לערוך את הפרויקט.
כבר בוצעה הורדה של 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.
ראו הדגמה
זהו! כדי לראות את השינויים האלו בפעולה, בצע את השלבים הבאים:
כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על Fullscreen
.פותחים את המסוף ומחפשים את התמונות שנוספו. הכיתות שלהם אמורות להשתנות מ-
lazyloadל-lazyloadedכשגוללים למטה בדף.
- צופים בחלונית הרשת כדי לראות את קובצי התמונות נטענים בנפרד בזמן שגוללים למטה בדף.
אימות באמצעות Lighthouse
לסיום, כדאי להשתמש ב-Lighthouse כדי לאמת את השינויים האלה. בדיקת הביצועים 'דחייה של תמונות שלא מופיעות במסך' של Lighthouse תציין אם שכחתם להוסיף טעינה מדורגת לתמונות שלא מופיעות במסך.
- כדי לראות תצוגה מקדימה של האתר, מקישים על View App ואז על
Fullscreen
.
- לוחצים על 'Control+Shift+J' (או 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מוודאים שתיבת הסימון ביצועים מסומנת ברשימה קטגוריות.
- לוחצים על הלחצן יצירת דוח.
- מוודאים שבדיקת הדחייה של תמונות שלא מופיעות במסך עברה.
זהו! השתמשת בהגדרות עצלנות כדי לטעון את התמונות בדף שלך באופן מדורג.