lazy loading זה לטעון תמונות (או פריטים אחרים) רק כשהקורא רואה אותם. במקום שכל 50 התמונות בדף יורדו מיד, רק 5-10 הראשונות יורדים, והשאר מחכות.
למה זה חשוב
1. מהירות
פחות download = הדף נטען מהר יותר.
2. Core Web Vitals
LCP משתפר. גוגל אוהב.
3. צריכת רוחב פס
הקורא במובייל לא מבזבז data על תמונות שלא יראה.
איך עושים
Native lazy loading
<img src="image.jpg" loading="lazy" alt="...">
זה הכי קל. נתמך בכל הדפדפנים המודרניים. אין צורך ב-JavaScript.
JavaScript לשליטה מתקדמת
אם רוצים יותר שליטה (animation, custom thresholds), Intersection Observer.
טעויות נפוצות
1. lazy על הכל
הלוגו, ה-hero image, התמונות above-the-fold. אלה לא צריכים lazy. הם החלק הראשון שהקורא רואה.
2. אין width/height
תמיד תוסיפו width ו-height ל-img. אחרת ה-layout קופץ כשהתמונה נטענת. זה CLS גרוע.
3. lazy ל-LCP element
אם התמונה הגדולה ב-above-the-fold (LCP) היא lazy, ה-LCP מתעכב.
הכלל הנכון
- תמונות above-the-fold, ללא lazy.
- תמונות below-the-fold, lazy.
- תמיד עם width ו-height.
WordPress
מ-WordPress 5.5, lazy loading native. כל תמונה אוטומטית lazy. אם אתם רוצים לבטל לתמונה ספציפית, תוסיפו loading="eager".
תמונות LCP
אם התמונה הראשונה היא LCP, השתמשו ב-fetchpriority="high":
<img src="hero.jpg" fetchpriority="high" alt="...">
סיכום
lazy loading פשוט אבל דורש מחשבה. תוסיפו לתמונות מתחת ל-fold, לא מעל.
רוצה עזרה ממוקדת ל-SEO באתר שלך?
אני שמוליק דורינבאום — יועץ SEO ב-20+ שנות ניסיון. אם המאמר הזה נתן לך כיוון ואתה רוצה ליישם על האתר שלך, יש לי קורס קידום אתרים חינמי מלא, או שאפשר לקפוץ לשיחת ייעוץ אישית.