תמונות בלי width ו-height: השפעה על Core Web Vitals ו-CLS

תמונות ללא אטריביוט width ו-height גורמות לדפדפן לא לדעת כמה מקום לשריין לתמונה לפני שהיא נטענת. כשהתמונה סופסוף נטענת, התוכן שמתחתיה "קופץ" - תופעה הנקראת CLS, אחד משלושת המדדים המרכזיים של Core Web Vitals.

למה זה משנה

Core Web Vitals הוא קבוצה של שלושה מדדי ביצועים שגוגל הפך לסיגנל ranking ב-2021. אחד מהם הוא Cumulative Layout Shift (CLS) - מודד עד כמה אלמנטים בדף קופצים בזמן הטעינה. ציון CLS תקין הוא מתחת ל-0.1, גרוע הוא מעל 0.25. תמונות בלי ממדים הן הסיבה הנפוצה ביותר ל-CLS גרוע.

ההשפעה הישירה: דפים עם CLS גרוע מקבלים דירוג נמוך יותר במובייל בעיקר. מאז עדכון Page Experience של גוגל, אתרים שפישלו ב-Core Web Vitals איבדו 5-30% מהתנועה האורגנית. בנוסף, חוויית משתמש נפגעת - מבקרים שלוחצים על קישור ופתאום הקישור "זוז" כי תמונה נטענה מעליו, נוטשים תוך שניות.

השפעה נוספת: ה-FCP (First Contentful Paint) ו-LCP (Largest Contentful Paint) גם מושפעים. הדפדפן צריך לחשב מחדש את ה-layout כל פעם שתמונה נטענת בלי ממדים, מה שמאט את ה-rendering הראשוני.

איך לזהות

הדרך המהירה ביותר: PageSpeed Insights (https://pagespeed.web.dev/). הזן את כתובת האתר ובדוק את הציון של CLS. בקטע "Diagnostics" חפש את האזהרה "Image elements do not have explicit width and height" - הוא מציג רשימה של התמונות הבעייתיות.

בדיקה משלימה: ב-DevTools (F12) > Performance, הקלט טעינה של דף. בקטע "Layout Shift" תראה גרף של ה-shifts - לרוב התמונות הראשיות הן הגורם.

בדיקה שלישית: ב-Google Search Console > Core Web Vitals report, יש דוח של URLs עם CLS גרוע. אם הדוח מציג עליה, יש בעיית CLS באתר.

איך לתקן

וורדפרס מאז גרסה 5.5 (2020) מוסיף width ו-height אוטומטית לכל תמונה שמועלית דרך Media Library ומוצגת באמצעות פונקציות הליבה (the_post_thumbnail(), wp_get_attachment_image(), בלוק Image). אם הבעיה קיימת, אחת משלוש סיבות:

סיבה ראשונה: תבנית מותאמת שמדפיסה <img> ידנית. פתח את קבצי ה-PHP של התבנית הפעילה (Appearance > Theme File Editor) וחפש <img. החלף ב-wp_get_attachment_image() או the_post_thumbnail().

סיבה שנייה: תוסף Lazy Loading שמסיר את הממדים. תוספים כמו a3 Lazy Load, WP Rocket Lazy Load, או LiteSpeed Cache Lazy Load מסירים width/height במקרים מסוימים. עבור להגדרות התוסף וודא שהוא לא מסיר ממדים. ב-WP Rocket: Media > LazyLoad > וודא שאופציה "Replace YouTube iframe with preview image" לא משבשת תמונות.

סיבה שלישית: HTML גולמי ב-content. אם הוספת <img src="..."> ידנית בעורך הבלוקים (במצב HTML), הוא לא יכלול ממדים. החלף בבלוק Image של ליבת WP.

תיקון משלים ב-CSS: השתמש ב-aspect-ratio כדי לוודא יציבות layout גם אם הממדים לא הוגדרו.

img {
  height: auto;
  max-width: 100%;
}
.featured-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

טעויות נפוצות

הטעות הראשונה: הוספת width ו-height ב-CSS במקום ב-HTML. CSS לא נטען מיד כמו HTML, ולכן הדפדפן לא יודע את הממדים בזמן ה-rendering הראשוני. ה-attributes חייבים להיות ב-HTML המקורי.

הטעות השנייה: שימוש בערכים ב-CSS כמו width: 100% בלבד בלי aspect-ratio. הדפדפן לא יודע מה הגובה היחסי - יחזור CLS ברגע שהתמונה תיטען.

הטעות השלישית: ערכים שגויים. width="100%" או height="auto" כ-attributes של HTML הם לא תקניים - הם צריכים להיות מספרים שלמים בפיקסלים (width="800" height="600"). השתמש ב-CSS להתאמה רספונסיבית.

הטעות הרביעית: התעלמות מ-iframes. גם <iframe> של YouTube, Google Maps, או embedded content צריך ממדים מפורשים. בדוק גם אותם.

בדיקה לאחר תיקון

הרץ שוב PageSpeed Insights וודא שהאזהרה נעלמה והציון של CLS השתפר (מתחת ל-0.1). ב-Search Console > Core Web Vitals, אחרי 28 יום של איסוף נתונים מ-CrUX (Chrome User Experience Report), הדוח אמור להציג שיפור. הרץ Lighthouse Audit בדפדפן וודא שהציון של Performance עלה.