Lazy Loading — טעינה עצלה לשיפור מהירות האתר

דמיינו שאתם נכנסים לאתר חנות עם 200 תמונות מוצרים. אם הדפדפן היה מנסה לטעון את כל 200 התמונות בו זמנית — הדף היה נפתח לאט מאוד. Lazy Loading פותרת בדיוק את הבעיה הזו: הדפדפן טוען רק את התמונות שנמצאות באזור הגלוי כרגע, ומחכה עם השאר.

האזור הגלוי של הדף — החלק שרואים על המסך בלי צורך לגלול — נקרא "ה-Viewport". כל תמונה שנמצאת מחוץ לאזור הזה כרגע לא נטענת, עד שהמשתמש גולל לכיוונה.

למה גוגל אוהבת את זה? כי גוגל מודדת כמה מהר נפתח האתר שלכם ומשתמשת בזה כגורם דירוג. אתר שנפתח מהר = דירוג טוב יותר.

מדובר בהוספת מילה אחת לקוד HTML של כל תמונה. אם הקוד הרגיל נראה כך:

<img src="photo.webp" alt="תיאור">

אז עם Lazy Loading מוסיפים loading="lazy":

<img src="photo.webp" loading="lazy" alt="תיאור">

זה הכל. הדפדפן יודע לבד מתי לטעון את התמונה בהתאם למהירות הרשת ולמרחק שנותר עד שהמשתמש יגיע אליה. כל הדפדפנים המודרניים — Chrome, Firefox, Safari ו-Edge — תומכים בזה.

יש חריג אחד חשוב מאוד: התמונה הגדולה שנמצאת בראש כל דף (לרוב תמונת הבאנר או הלוגו הגדול) חייבת להיטען מיידית, לא בעצלתיים.

גוגל מודדת מדד שנקרא LCP — הזמן שלוקח לתמונה הגדולה ביותר בדף להופיע על המסך. אם תמונה זו מסומנת כ-Lazy Loading, הדפדפן יחכה עם הטעינה שלה — ומדד ה-LCP ייפגע קשות.

הכלל הפשוט: תמונת הראש (Hero Image) = טעינה מיידית. כל שאר התמונות בדף = Lazy Loading.

אם האתר שלכם בנוי על Next.js (מסגרת פיתוח נפוצה), רכיב ה-Image המובנה מפעיל Lazy Loading אוטומטית. אין צורך לעשות כלום — ברירת המחדל היא Lazy.

<Image src="/photo.jpg" width={800} height={600} alt="תיאור" />

לתמונת הראש של הדף, מוסיפים את המאפיין priority כדי לאמר ל-Next.js לטעון אותה מיידית:

<Image src="/hero.jpg" width={800} height={600} alt="Hero" priority={true} />

Next.js גם מאפשר לטעון קומפוננטים כבדים רק כשצריך — למשל מפה אינטראקטיבית שמופיעה רק בחלק התחתון של הדף.

לא רק תמונות — גם Iframes, שהן מסגרות מוטמעות כמו סרטוני YouTube, תומכות ב-Lazy Loading.

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" title="Video"></iframe>

מוסיפים loading="lazy" וזהו — YouTube לא ייטען עד שהמשתמש יגלול לאזור הסרטון.

טיפ נוסף: Lite YouTube Embed היא חלופה שמציגה רק את תמונת הסרטון בהתחלה, ומשמיעה את הסרטון עצמו רק לאחר לחיצה. זה גם מקצר זמן טעינה וגם נראה נקי יותר.

שאלה נפוצה: אם תמונה לא נטענת מיד — האם גוגל בכלל רואה אותה? התשובה היא כן. Googlebot מדמה גלילה בדף ורואה את כל התמונות שנטענות בגלילה, כולל התיאורים שלהן (Alt Text) ושמות הקבצים.

הדבר היחיד שיכול לגרום לגוגל לא לראות תמונות הוא אם הן נטענות רק דרך JavaScript מורכב (ולא דרך Lazy Loading הסטנדרטי). בדיקה פשוטה: ב-Google Search Console, בדקו כל דף תחת "בדיקת כתובת URL" — גוגל מראה בדיוק מה היא ראתה.

ב-2026, Lazy Loading על תמונות הוא פרקטיקה סטנדרטית — כמעט כל פלטפורמה ניהול תוכן (WordPress, Wix, Shopify) מפעילה אותו אוטומטית.

מה שחדש הוא fetchpriority — דרך לשלוט בדיוק על סדר העדיפויות של הטעינה. ניתן לסמן תמונות ספציפיות כבעדיפות גבוהה או נמוכה:

<img src="hero.webp" fetchpriority="high">
<img src="below-fold.webp" fetchpriority="low">

בנוסף, תכונה בשם content-visibility: auto מאחרת את עיבוד החזותי של תוכן מחוץ למסך ויכולה לשפר את מהירות הטעינה הראשונית של דפים ארוכים ב-50% ויותר.