Lazy loading (טעינה עצלה) היא טכניקה שבה הדפדפן לא מוריד תמונה או מסגרת מוטמעת (iframe) כשהעמוד נפתח, אלא רק כשהגולש מתקרב אליה בגלילה. בעמוד ארוך עם עשרות תמונות זה חוסך הורדות מיותרות ומקצר את זמן הטעינה הראשונית. אבל יש לזה צד הפוך שרוב האתרים מפספסים: טעינה עצלה של התמונה הראשית בראש העמוד דווקא מאטה את האתר.
איך זה עובד היום: מאפיין אחד ב-HTML
פעם טעינה עצלה דרשה ספריית JavaScript. היום זה מאפיין רגיל של HTML:
<img src="photo.webp" alt="..." width="800" height="450" loading="lazy"> <iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>
לפי המדריך של web.dev, טעינה עצלה של תמונות נתמכת ב-Chrome מגרסה 77, ב-Firefox מגרסה 75 וב-Safari מגרסה 15.4, וטעינה עצלה של iframe נתמכת ב-Firefox מגרסה 121 וב-Safari מגרסה 16.4. דפדפן שלא מכיר את המאפיין פשוט מתעלם ממנו וטוען כרגיל — כך שאין סיכון בשימוש בו.
הערך השני, loading="eager", הוא ברירת המחדל: טעינה מיידית, בלי קשר למיקום התמונה בעמוד.
הטעות הנפוצה: lazy על התמונה הראשית
התמונה הגדולה בראש העמוד — תמונת הכותרת, התמונה הראשית של המאמר או של המוצר — היא בדרך כלל האלמנט שנמדד במדד LCP. אם היא מסומנת כ-lazy, הדפדפן מחכה עד שהוא מחשב את הפריסה ומבין שהיא בתוך המסך, ורק אז מתחיל להוריד אותה. התוצאה: התמונה החשובה ביותר בעמוד מגיעה מאוחר יותר.
web.dev כותבת את זה במפורש: אל תטענו בטעינה עצלה תמונות שסביר שיופיעו במסך כשהעמוד נטען, ובמיוחד לא את תמונת ה-LCP. לתמונה הראשית מתאים ההפך — fetchpriority="high", שאומר לדפדפן להוריד אותה לפני משאבים אחרים.
| מיקום התמונה | מה לסמן | למה |
|---|---|---|
| תמונה ראשית בראש העמוד | fetchpriority="high", בלי lazy | היא קובעת את LCP |
| לוגו ואייקונים בכותרת | בלי lazy | קטנים ונראים מיד |
| תמונות בהמשך המאמר | loading="lazy" | הגולש אולי לא יגיע אליהן |
| גלריה, כרטיסים, תמונות בתחתית | loading="lazy" | החיסכון הגדול ביותר |
| סרטון יוטיוב או מפה מוטמעים | loading="lazy" או חזית סטטית | כבדים במיוחד |
רוחב וגובה: חובה, לא המלצה
web.dev ממליצה להוסיף width ו-height לכל תמונה. בלי מידות, הדפדפן לא יודע כמה מקום לשמור לתמונה שעוד לא ירדה, והתוכן קופץ כשהיא מגיעה — פגיעה במדד היציבות CLS. יש גם בעיה הפוכה: בלי מידות, תמונה עצלה נחשבת בגודל 0×0, ובגלריה זה עלול לגרום לדפדפן להוריד את כל התמונות בבת אחת, כלומר לבטל את כל היתרון.
כמה מוקדם הדפדפן מוריד תמונה עצלה?
"עצלה" לא אומר "ברגע האחרון". דפדפני Chromium מתחילים להוריד תמונה עצלה כשהיא עדיין במרחק מסוים מהמסך, כדי שתהיה מוכנה כשהגולש יגיע אליה. המרחק תלוי בסוג המשאב ובמהירות החיבור, ולפי web.dev הוא קבוע בדפדפן ואי אפשר לשנות אותו. בפועל זה אומר שגולש שגולל מהר עלול לראות לרגע מקום ריק — ולכן כדאי לשים צבע רקע או תמונה מוקטנת במקום התמונה, ולא להשאיר חור לבן.
טעינה עצלה בוורדפרס
וורדפרס מוסיפה loading="lazy" לתמונות בתוכן באופן אוטומטי, ובשנים האחרונות למדה גם לדלג על התמונות הראשונות בעמוד. לפי הודעת הפיתוח של וורדפרס 6.3, המערכת מוסיפה אוטומטית fetchpriority="high" לתמונה שהכי סביר שתהיה תמונת ה-LCP, ומדגישה שחשוב לא לטעון בעצלות תמונות שבתוך המסך.
הבעיה מתחילה כשמוסיפים עוד שכבה: תוספי מהירות רבים, ובהם WP Rocket, מציעים טעינה עצלה משלהם באמצעות JavaScript. אם התבנית, וורדפרס והתוסף מטפלים כולם בתמונות, קל לקבל תמונה ראשית שמסומנת lazy פעמיים, או תמונות שתלויות בסקריפט כדי להופיע בכלל. לכן אחרי כל שינוי בהגדרות כדאי לפתוח את קוד העמוד ולבדוק מה בפועל מסומן על התמונה הראשית.
באתר הזה, לדוגמה, תמונת המאמר בראש כל פוסט נטענת עם loading="eager" ו-fetchpriority="high" ישירות מהתבנית. תמונות הכרטיסים ברשימות המאמרים, לעומת זאת, נטענות בעצלות דרך הסקריפט של WP Rocket: בקוד העמוד מופיעה במקומן תמונת SVG ריקה במידות הנכונות, והתמונה האמיתית נטענת כשמגיעים אליה.
איך בודקים שזה נכון
- פותחים את העמוד במובייל ובודקים ב-בדיקת מהירות מהו אלמנט ה-LCP.
- בכלי המפתחים של הדפדפן מאתרים את התמונה הזו ובודקים שאין עליה
loading="lazy". - בלשונית הרשת גוללים לאט ומוודאים שתמונות בתחתית העמוד יורדות רק כשמתקרבים אליהן.
- בודקים שלכל תמונה יש רוחב וגובה, ושאין קפיצות תוכן בזמן הגלילה.
שאלות נפוצות
האם טעינה עצלה פוגעת באינדוקס בגוגל?
טעינה עצלה עם המאפיין המובנה של HTML לא מסתירה את התמונה — היא נמצאת בקוד העמוד עם הכתובת שלה. הסיכון קיים בעיקר בפתרונות JavaScript ישנים, שבהם כתובת התמונה האמיתית מופיעה רק אחרי שסקריפט רץ.
כדאי לטעון בעצלות גם תמונות רקע ב-CSS?
המאפיין loading עובד רק על img ו-iframe. תמונות רקע ב-CSS דורשות פתרון אחר, ולכן תמונה חשובה עדיף לשים כתגית img רגילה.
מה עם סרטונים?
סרטון מוטמע הוא לרוב המשאב הכבד ביותר בעמוד. על הדרכים לטעון אותו בלי להאט את האתר כתבתי במאמר וידאו באתר.
טעינה עצלה היא רק חלק אחד מטיפול נכון בתמונות — הבסיס הוא דחיסה וגדלים נכונים. אם אתם רוצים שמישהו יבדוק מה קורה בפועל באתר שלכם, ראו שיפור מהירות אתר או שלחו לי את הכתובת.
אהבתם את המאמר?
