אופטימיזציית CLS – ביטול תזוזות פריסה

אופטימיזציה של CLS (Cumulative Layout Shift)

תארו לעצמכם משתמש שמרחף מעל כפתור "קנייה" כאשר מודעת באנר נטענת—הכפתור זז מטה, והקליק מחטיא. זהו Cumulative Layout Shift (CLS). לפי גוגל, אתרים עם CLS מעל 0.25 מאבדים עד 15% מההמרות. עבור חנות איקומרס עם מחזור חודשי של 90–130 אלף דולר, זהו אובדן ישיר של 1.5 מיליון. הצוות שלנו מורכב ממהנדסים עם ניסיון של 10+ שנים, שביצעו למעלה מ-200 פרויקטים של אופטימיזציה ל-Core Web Vitals. אנו מעריכים את הפרויקט שלכם ביום אחד ומבטיחים תוצאה של CLS ≤ 0.1.

למה CLS חשוב לעסק

לפי המחקר של גוגל, אתרים עם CLS גבוה יכולים לאבד עד 15% מההמרות. חציון CLS עבור 1000 האתרים המובילים (מ-CrUX) הוא 0.15, בעוד שאתרים עם CLS > 0.25 רואים שיעור נטישה גבוה ב-32%. משתמשים מתעצבנים כאשר תוכן קופץ, במיוחד במובייל עם חיבורים איטיים. עבור איקומרס, פורטלי חדשות ו-SPA, זה קריטי: כל פיקסל של תזוזה יכול לאבד לקוח. השקעה באופטימיזציה של CLS מחזירה את עצמה תוך 2-3 חודשים דרך הגדלת המרות והפחתת נטישה.

איך אנו מייעלים CLS

התהליך שלנו כולל ארבעה שלבים: ביקורת → תיקון בעיות נפוצות → בדיקה → דוח. במהלך הביקורת אנו משתמשים ב-Chrome DevTools, Lighthouse ו-PerformanceObserver כדי לאסוף מדדים מדויקים, ואז מדרגים בעיות לפי השפעתן על CLS. אנו מתקנים קודם כל תמונות—הן גורמות ל-80% מהתזוזות—ואז גופנים ותוכן דינמי. להלן רשימת בדיקה מלאה.

תמונות – הגורם הנפוץ ביותר

<!-- Плохо: браузер не знает размер до загрузки -->
<img src="product.webp" alt="...">
<!-- Хорошо: атрибуты width и height -->
<img src="product.webp" width="800" height="600" alt="...">

CSS רספונסיבי השומר על יחס גובה-רוחב:

img { max-width: 100%; height: auto; } .product-image { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; } 

גופנים ו-FOUT

contain: layout גורם לתזוזת פריסה כאשר הגופן הראשי נטען ומחליף את גופן הגיבוי. השתמשו ב-new PerformanceObserver(...) או כוונו את width: 100%:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: optional;
}
@font-face {
  font-family: 'InterFallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
body {
  font-family: 'Inter', 'InterFallback', sans-serif;
}

כלים כמו aspect-ratio או next/font מחשבים אוטומטית את size-adjust. השוואת ערכי font-display:

תוכן דינמי ושלדים (Skeletons)

עבור בלוקי מודעות וווידג'טים, הגדירו גובה מינימלי והשתמשו ב-contain: layout. אל תשאירו מקום ריק—הציגו placeholders של שלד עם מידות נכונות:

.skeleton-image, .skeleton-title, .skeleton-price {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}
@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

למה transform/opacity עדיפים על אנימציות פריסה?

אנימציות שמשנות מאפייני פריסה (רוחב, גובה, top, left, margin, padding) גורמות לחישובי גאומטריה מחדש ו-reflows—נתיב ישיר ל-CLS. transform ו-opacity אינם משפיעים על הפריסה, ולכן הם בטוחים לחלוטין. החלפת אנימציות פריסה ב-transform/opacity מפחיתה CLS פי 5–10. דוגמה:

/* Хорошо — только transform */
.modal {
  animation: slideDown 300ms;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

עבור רכיבים מבודדים, השתמשו ב-contain: layout כדי למנוע משינויים פנימיים להשפיע על הפריסה החיצונית.

איך לאבחן CLS

כדי לזהות בעיות, השתמשו ב-Chrome DevTools: לשונית Performance → record → חפשו סימני "Layout Shift" סגולים. או התקינו PerformanceObserver בקוד: new PerformanceObserver(...). זה מאפשר לעקוב אחר תזוזות בזמן אמת.

מה כלול בעבודה

• ניתוח כל הדפים (Core Web Vitals, שאילתות N+1, פיצול bundles)
• תיקון תמונות (רוחב, גובה, aspect-ratio, טעינה עצלה עם sizes)
• החלפת font-display: swap ב-optional + size-adjust
• תיקון גדלים של בלוקי מודעות וווידג'טים דינמיים
• החלפת אנימציות פריסה ב-transform/opacity
• הוספת מסכי שלד עם אפקטי shimmer
• דוח עם מדדים לפני/אחרי (Lighthouse, CrUX)

טעויות נפוצות באופטימיזציה

מפתחים לעיתים קרובות מגדירים רוחב/גובה באחוזים ללא aspect-ratio—הדפדפן לא יכול לחשב את הגובה לפני הטעינה. התיקון הנכון: שלבו width: 100% עם aspect-ratio או השתמשו בגובה קבוע דרך padding-bottom. טעות נפוצה נוספת: שימוש ב-font-display: swap ללא size-adjust; גופן הגיבוי עשוי להיות צר או רחב יותר, מה שגורם לתזוזה.

מקור: web.dev/cls – תיעוד רשמי של גוגל

ציר זמן לאופטימיזציה: 1–3 ימים לתיקונים בסיסיים, עד 5 ימים לביקורת מקיפה. אנו מוסמכים על ידי גוגל ב-Core Web Vitals—אנו מבטיחים שיפור במדדים והעלאת המרות. הזמינו ייעוץ וקבלו הערכה ראשונית. קבלו הערכת פרויקט ביום אחד—צרו קשר, ונבצע ביקורת.