החל מ-WordPress 5.5 (2020), הליבה מוסיפה אוטומטית את האטריביוט loading="lazy" לכל תמונה בתוכן הפוסטים. הדפדפן משתמש בו כדי לדחות הורדת תמונות שלא נראות עדיין במסך - חיסכון דרמטי במשקל הראשוני של הדף. אבל לא מעט תוספים, תבניות, ופייג'-בילדרים שוברים את ההתנהגות הזו: או שהם משתמשים ב-the_post_thumbnail() בלי לעבור דרך פונקציות הליבה, או שהם כופים loading="eager" לכל התמונות, או שהם מציגים את ה-HTML של התמונה כ-string מותאם.
למה זה משנה
בעמוד עם 30 תמונות שמופיעות לאורך כל הדף, רק 3-5 נראות עם טעינה ראשונית (above the fold). אם 30 כולן נטענות מיד = 5MB+ לטעינה ראשונה. עם lazy = 500KB ראשונים, ושאר התמונות נטענות תוך כדי גלילה. זה מתורגם ישירות ל-LCP מהיר יותר ב-30-50%, להפחתת זמן TBT (Total Blocking Time), ולציון Lighthouse גבוה יותר.
חשוב: התמונה הראשונה שב-viewport ("LCP candidate") צריכה להיות eager, לא lazy - אם מסמנים אותה lazy, הדפדפן מחכה לזיהוי שהיא ב-viewport לפני התחלת ההורדה, וזה מוסיף 100-300ms ל-LCP. WordPress 5.9+ מנסה לזהות אוטומטית את ה-LCP candidate ולסמן אותו fetchpriority="high", אבל לא תמיד מצליח.
איך לזהות
הדרך הפשוטה: View Source על דף הבית, חפש <img וספור כמה מהם כוללים loading="lazy" וכמה לא. אם פחות מ-70% lazy - יש בעיה.
בדיקה מקצועית יותר: F12 > Console, הרץ:
const imgs = document.querySelectorAll('img');
const lazy = [...imgs].filter(i => i.loading === 'lazy').length;
console.log(`${lazy}/${imgs.length} (${Math.round(lazy/imgs.length*100)}%)`);בדיקת LCP candidate: F12 > Lighthouse > Performance > Run audit. תחת "Largest Contentful Paint element" תראה את התמונה - בדוק שהיא לא lazy.
איך לתקן
אם תוסף page builder (Elementor, Divi, Bricks) משמש: בדוק בהגדרות שלו אם יש "Lazy Load Images" או "Image Optimization" - הפעל. ב-Elementor: Settings > Performance > Lazy Load Images = ON. ב-Divi: Theme Options > General > Performance.
בדוק שאין שורה ב-functions.php שמכבה lazy globally:
// אסור! ודא שזה לא קיים
add_filter('wp_lazy_loading_enabled', '__return_false');אם יש, הסר אותה.
למקרים שהקוד שלך מציג תמונה ידנית בתבנית, השתמש בפונקציות הליבה:
// טוב - עובר דרך פילטרים, מקבל lazy אוטומטי
echo get_the_post_thumbnail($post_id, 'large');
// או:
echo wp_get_attachment_image($attachment_id, 'large');אל תרכיב <img src="..." /> ידנית בלי lazy.
עבור ה-LCP candidate (התמונה הראשונה ב-viewport), הוסף ידנית:
<img src="hero.jpg" loading="eager" fetchpriority="high" alt="..." />אם רוצים lazy גם ל-iframes ולתמונות רקע ב-CSS - הליבה לא מטפלת בהם. התקן a3 Lazy Load או FlyingPress.
טעויות נפוצות
הטעות הראשונה: לסמן את התמונה הראשונה ב-viewport כ-lazy - LCP נדחה. תמיד eager + fetchpriority=high עבור hero/cover. הטעות השנייה: להוסיף תוסף lazy loading בנוסף ל-lazy של הליבה - שני המנגנונים מתערבבים ולפעמים אחד מבטל את השני. השאר רק אחד. הטעות השלישית: לסמוך על Cloudflare Mirage / Polish לבד - הם עובדים ברמת הרשת, לא ברמת הדפדפן, ולא תמיד מטפלים נכון בכל התמונות.
בדיקה לאחר תיקון
הרץ שוב את הקוד ב-Console - 90%+ מהתמונות צריכות להיות lazy (חוץ מ-1-2 ראשונות שצריכות להיות eager). ב-PageSpeed Insights, ה-LCP צריך לרדת ב-200-500ms. ב-DevTools Network, רענן את הדף ותראה שתמונות בתחתית הדף לא מופיעות בבקשות הראשונות - רק כשגוללים אליהן. בדוק WebPageTest Visual Progress - האזור העליון של הדף צריך להופיע מהר יותר.