Lazy Loading
בכל הנוגע לשימוש בפלטפורמות אונליין כמו אתרים, מהירות טעינה ואופטימיזציה הופכות חיוניות, כשמשתמשים דורשים יותר ויותר מהירות ותגובתיות.
מסיבה זו, דפוס עיצוב הדף הידוע כ-lazy loading צובר יותר ויותר חשיבות. אבל מהו בדיוק lazy loading (טעינה דחויה)?
זה מה שנטפל בו בהמשך.
מהו Lazy Loading?
באופן ספציפי, lazy loading היא טכניקה, דפוס עיצוב תכנותי שמיושם על אתרים, שבו אלמנטים ומשאבים אינם נטענים במלואם, אלא מבוצעים תוך כדי תנועה או לפי דרישה בהתאם לשימוש המשתמש, מייצר "טעינה דחויה" של התכנים.
בדרך זו, משאבים מאופטמים ותוכן כמו טקסט, סרטונים, תמונות וחומרים אחרים נטענים רק כשנדרשים, משפר מהירות, שימוש בזיכרון ועיבוד, תגובתיות וזמני טעינה. זה בניגוד ל-טעינה מלאה, שבה אתר או דף נטענים במלואם, אפילו אם המשתמש לא משתמש בכל אלמנט.
יתרונות כלליים של lazy loading
מאחר שהמטרה העיקרית של lazy loading היא לבצע אופטימיזציה לטעינת אלמנטים רק כשהם בשימוש, יש יתרונות מרובים שניתן לסכם כ:
- מהירות בהצגת האלמנטים הראשיים של אתר.
- שיפור משמעותי בחוויית המשתמש באתר (UX).
- שיפור ביצועים במכשירי mobile, במיוחד כשיש להם משאבי חיבור רשת מוגבלים; לקיים Lazy Loading פעיל יאפשר גלישה בדפים ש, בתנאי כיסוי לקויים כאלה, אחרת היו לא ברי ביצוע.
- אופטימיזציה כוללת ומלאה של משאבים כמו CPU, RAM וסוללה במכשירי mobile.
- הגידול בזמן השהייה בדפים שלנו, על ידי אי-הימצאות בעיות טעינה, מתורגם בעקיפין לשיפורי דירוג.
- ירידה ב-bounce rate.
באותו אופן, גישת התכנות של lazy loading יש לה יתרונות וחידושים מנקודת מבט יותר טכנית, כמו:
- Lazy loading תואם במלואו ל-frameworks של JS כמו React ו-Angular, וגם לפלטפורמות CMS כמו WordPress. למעשה, לאחרונה דווח ש-lazy loading לתמונות ייכלל כברירת מחדל בגרסת WordPress 5.5.
- הודות ל-API IntersectionObserver, זה לא מסתיר תמונות ממנועי חיפוש.
- תמיכה במספר סוגי תוכן כמו תמונות ומשאבים מסוג responsive.
- זה מאפשר לתמונות האתר להיות מאונדקסות, מה שחיוני ל-SEO.
- זה משאב 100% ידידותי ל-SEO, מאחר שזה משפר ישירות ובעקיפין הרבה נקודות מפתח ב-SEO.
איך ליישם lazy loading ב-WordPress?
אם יש לנו את האתר שלנו ב-WordPress, עלינו לדעת שיש לנו יתרון גדול מאחר שיש פתרונות רבים ליישום lazy loading בדפים שלנו כך שהם ייטענו הרבה יותר מהר. צילום מסך זה למטה מראה כמה מהפתרונות האפשריים שיש לנו ברפוזיטורי התוספים:
תצוגה של תוספי WordPress הבולטים ביותר ליישום lazy loading.
כדי לבצע יישום זה, יש לנו מספר אפשרויות:
- בחר תוסף lazy loading ספציפי כמו "Lazy loader", "a3 lazy load"...
- בחר תוסף אופטימיזציית web כמו "WP Rocket", שכבר יש לו את האפשרות הזו כלולה כברירת מחדל יחד עם שיפורים אחרים.
היבטי SEO הקשורים ל-Lazy Loading
אנחנו כבר יודעים את המשימה העיקרית של טעינה דחויה ואת היתרונות המרכזיים שלה, ואיך זה משפיע על שיפור ביצועי הדף שלנו, ה-UX וה-SEO.
עכשיו, צריך לעשות שימוש חכם בטעינה דחויה כדי להפיק ממנה את המקסימום, מאחר שאם משתמשים בה לא כראוי זה עלול לגרום לאפקט ההפוך.
לדוגמה, lazy loading עושה שימוש ב-cache לשיפור המהירות, אז אם יותר מדי תוכן מאוחסן שם, האטות או שגיאות עשויות להתרחש אם לא מיושם נכון, אפילו מונע מ-Google לאנדקס דפים ואלמנטים, מה שיכול להיות לו אפקט חמור על דירוג האתר. כמה טיפים הם:
- בצע אופטימיזציה ל-cache ועשה בו שימוש חכם.
- השתמש ב-Google Search Console כדי לאמת את התוכן ש-Google סורקת באתר.
- הוסף טקסט ALT כדי להפוך כל תמונה לניתנת לאינדקס על ידי Google.
- תמיד עשה שימוש ב-API IntersectionObserver.
- הוסף את התכונה loading ל-iframe או לתוכן משובץ מדפים או מקורות אחרים, הודות לפונקציה Blink LazyLoad של דפדפן Chrome. חל על תמונות, צילומים, סרטונים, טקסט ותוכן אחר.
Lazy loading ו-UX
בכל הנוגע לאתר, גם אופטימיזציה טכנית וגם כללית כדי להציע חוויית משתמש טובה (UX) חיוניות, ביחס לזמני טעינה, תגובתיות, שימוש במשאבים והתנהגות כללית. אם אתר אינו תגובתי במיוחד, שיעור הנטישה שלו יהיה גבוה ואם הוא מציע חוויית משתמש לקויה, זה ישפיע על התנועה, הנראות ואפילו ה-SEO שלו.
עם טעינה דחויה, המטרה היא לשפר את ה-UX של אתר באופן דרמטי בצעד אחד, על ידי טעינת התוכן שלו בהדרגה וכשהמשתמש דורש אותו כשהוא גולל את הדף, בין אם זה תמונות או טקסט, מה שמאפטם את השימוש במשאבים בהשוואה לטעינת כל הפלטפורמה, סביר מציג אלמנטים שאינם חשובים למשתמש.
Lazy loading מובנה (HTML) ב-Chrome
מדגים את החשיבות ש-Google נותנת ל-UX, מאז 2020 והחל מגרסה 75 של דפדפן Chrome שלה, ניתן להוסיף lazy loading מובנה לתגי דף HTML ולתוכן המולטימדיה שלהם כמו צילומים, סרטונים, בין השאר.
בדרך זו, על ידי הוספת תכונת lazy loading של HTML אוטומטית, דפדפן Chrome מבין שתוכן הדף ייטען בהתאם לניווט המשתמש ולא הכל בבת אחת, משפר מהירות ותגובתיות. כדי להשתמש בזה, התכונה loading עם הערך lazy מתווספת לכל תג של המשאבים הוויזואליים והמולטימדיה, וכן ל-iframes:
<img src="image.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe> משאב זה ניתן לשימוש גם בתמונות, שמייצגות חלק גדול מהמידע שהדפדפן צריך להוריד, וגם ב-iframes; זכור שאנחנו משתמשים בהם להטמעת משאבים חיצוניים באתר שלנו.
חשוב להדגיש את השימוש ב-iframes, מאחר שאלה יכולים לייצג נקודות טעינה קריטיות באתר שלנו.
בצד הפחות טוב, lazy loading מובנה תואם רק ל-Chrome, אם כי השימוש בו יכול להיות מיושם בדפדפנים אחרים דרך ספריות תואמות, במקרה שאין תמיכה כפי שקורה ב-Mozilla Firefox.
שימושים של Lazy loading
כפי שכבר העירונו, lazy loading מתמקד בעיכוב טעינת אלמנטים בדף כדי לבצע אופטימיזציה לתגובה שלו. במובן זה, השימוש שניתן לכלי מתמקד בכל המשאבים הוויזואליים, אם כי הדגש מושם על תמונות, סרטונים ו- iframes שיכולים לכלול מסמכים וקבצים אחרים, הכל דרך שינוי תגים והכללת התכונה loading עם הערך lazy, מאפטם את המהירות הכללית של האתר אפילו אם יש לו אלמנטים כבדים או תוכן מולטימדיה גדול.
יש לך שאלות על lazy loading או רוצה ליישם אותו בפרויקט שלך? אנחנו לרשותך!
תיעוד והפניות:
מאת: David Kaufmann
במהלך 10+ השנים האחרונות הייתי מרותק לחלוטין ל-SEO — ולמען האמת, לא הייתי רוצה את זה אחרת.
הקריירה שלי עלתה לרמה חדשה כשעבדתי כמומחה SEO בכיר ב-Chess.com — אחד מ-100 האתרים המבוקרים ביותר באינטרנט. עבודה בקנה מידה כזה לימדה אותי מה ששום קורס או תעודה לא יכלו ללמד.
מהניסיון הזה הקמתי את SEO Alive — סוכנות למותגים שרציניים לגבי צמיחה אורגנית. ומכיוון שלא מצאתי כלי שמטפל גם בעולם הקלאסי וגם בעידן ה-AI כראוי, בניתי את SEOcrawl. אם אתה מחפש שותף SEO מנוסה שאוהב את התחום — אשמח לשמוע ממך!
גלה תוכן נוסף של מחבר זה
