כיצד לתקן Cumulative Layout Shift (CLS) באתרי 1С-ביטריקס
הצוות שלנו עוזר לאתרים על 1С-ביטריקס לעבור את Core Web Vitals כבר שנים. מדד מרכזי אחד הוא CLS (Cumulative Layout Shift), המודד יציבות חזותית. כאשר עמוד קופץ במהלך הטעינה — משתמשים לא יכולים לקרוא או ללחוץ בנוחות, וגוגל מורידה דירוגים. הורדנו את CLS מ-0.6 ל-0.05 בקטלוג עם 50,000 מוצרים. בואו נפרק איך לעשות זאת באופן שיטתי.
CLS מודד חוסר יציבות חזותית: כמה אלמנטים זזים במהלך הטעינה. הסף של גוגל הוא CLS < 0.1. תזוזות שגורמות למשתמשים לפספס כפתור או לאבד את מקום הקריאה פוגעות בחוויית המשתמש ובדירוגים. Cumulative Layout Shift — ויקיפדיה
באתרי 1С-ביטריקס, CLS בדרך כלל נע בין 0.2–0.6. האשמים צפויים וניתנים לתיקון באופן שיטתי.
מדוע CLS הוא בעיה ספציפית עבור 1С-ביטריקס
בפתרונות ביטריקס סטנדרטיים, תמונות לעיתים קרובות חסרות מאפייני גודל, בלוקים דינמיים (עגלה, מונים, מועדפים) נטענים באופן אסינכרוני, וגופני אינטרנט מוגדרים ללא font-display. כל זה גורם ל-CLS גבוה. בנוסף, ווידג'טים של פרסומות וצ'אטבוטים המוכנסים דרך JS דוחפים תוכן מסביב.
תיקון אלה ידנית בכל תבנית הוא עבודה מאומצת. אנו הופכים את הבדיקה לאוטומטית ומיישמים שינויים בכל הרכיבים בבת אחת.
כיצד למדוד CLS באתר ביטריקס
CLS = סכום (חלק ההשפעה × חלק המרחק) עבור כל תזוזה. חלק ההשפעה הוא החלק של אזור התצוגה המושפע. חלק המרחק הוא כמה רחוק האלמנט זז ביחס לאזור התצוגה. תמונה בגובה 30% הזזה למטה ב-20% נותנת 0.06 לכל אירוע.
מדידה: Chrome DevTools → Performance → הקלטה + גלילה. הקטע Layout Shift מציג כל תזוזה עם האלמנט.
מה גורם ל-CLS בתבניות ביטריקס סטנדרטיות
בואו נסתכל על המקורות העיקריים:
-
תמונות ללא רוחב וגובה — הסיבה הנפוצה ביותר. כאשר הדפדפן מנתח
<img src="...">ללא מידות, הוא לא יודע כמה מקום לשמור. תוכן מתחת מוצג ללא פער, ואז זז למטה כאשר התמונה נטענת.
תבניות רכיבים סטנדרטיות של ביטריקס לעיתים קרובות מציגות תמונות ללא מאפייני גודל. תיקון תבנית הרכיב:
// Получить размеры изображения при рендеринге $imgFile = \CFile::GetByID($arItem['PREVIEW_PICTURE'])->Fetch(); $width = $imgFile['WIDTH'] ?: 300; $height = $imgFile['HEIGHT'] ?: 300; echo '<img src="' . \CFile::GetPath($arItem['PREVIEW_PICTURE']) . '"' . ' width="' . (int)$width . '"' . ' height="' . (int)$height . '"' . ' loading="lazy"' . ' alt="' . htmlspecialchars($arItem['NAME']) . '">'; CSS // Получить размеры изображения при рендеринге $imgFile = \CFile::GetByID($arItem['PREVIEW_PICTURE'])->Fetch(); $width = $imgFile['WIDTH'] ?: 300; $height = $imgFile['HEIGHT'] ?: 300; echo '<img src="' . \CFile::GetPath($arItem['PREVIEW_PICTURE']) . '"' . ' width="' . (int)$width . '"' . ' height="' . (int)$height . '"' . ' loading="lazy"' . ' alt="' . htmlspecialchars($arItem['NAME']) . '">'; כחלופה — כאשר המידות ידועות וקבועות:
.product-card__image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; } .product-card__image-wrapper img { width: 100%; height: 100%; object-fit: cover; } זה שומר מקום דרך CSS, כך שאין צורך במידות HTML מפורשות. גדלי תמונות קבועים מפחיתים CLS פי 10 יותר ביעילות מטריקות CSS.
- בלוקים דינמיים: עגלה, מונים, באנרים — אתרי ביטריקס לעיתים קרובות כוללים אלמנטים דינמיים בכותרת: מספר פריטים בעגלה, סה"כ, מספר התראות. אלה נטענים דרך AJAX לאחר הרינדור. אם יש תוכן מתחת לעגלה, הוא זז כאשר נתוני העגלה נטענים.
שמירת מקום דרך CSS:
.header__cart-count { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; } הגדרת מידות קבועות לכל האלמנטים הדינמיים בכותרת ובסרגל הצד. האלמנט הריק תופס מקום; לאחר טעינת הנתונים, גודלו לא משתנה.
-
בלוקי פרסומות ובאנרים — מקור קלאסי ל-CLS. הבלוק נטען דרך JS, מוכנס ל-DOM, ודוחף תוכן. פתרון: תמיד לשמור מקום לפרסומות עם
aspect-ratio. -
גופנים ו-FOIT/FOUT — ללא
.product-card__image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; } .product-card__image-wrapper img { width: 100%; height: 100%; object-fit: cover; }, גופני אינטרנט גורמים ל-FOIT (טקסט מוסתר עד שהגופן נטען) או ל-FOUT (טקסט תחילה בגופן מערכת, ואז מצויר מחדש עם גופן מותאם אישית). FOUT גורם ל-CLS אם לשני הגופנים יש מדדים שונים.
@font-face { font-family: 'SiteFont'; src: url('/bitrix/fonts/sitefont.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; } @font-face { font-family: 'SiteFontFallback'; src: local('Arial'); size-adjust: 105%; ascent-override: 90%; } - אנימציות וטרנספורמציות — אנימציות המשתמשות ב-
.header__cart-count { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; },min-height,font-displayמשנות גיאומטריה וגורמות ל-reflow. השתמשו רק ב-@font-face { font-family: 'SiteFont'; src: url('/bitrix/fonts/sitefont.woff2') format('woff2'); font-display: swap; font-style: normal; font-weight: 400; } @font-face { font-family: 'SiteFontFallback'; src: local('Arial'); size-adjust: 105%; ascent-override: 90%; }ו-top:
/* Не вызывает CLS — только compositing */ .banner { transition: transform 0.3s; } .banner.hidden { transform: translateY(-100%); } תהליך אופטימיזציית CLS שלב אחר שלב
- בדיקה: הרצת PageSpeed Insights ו-CrUX, זיהוי מקורות CLS.
- תיקון תמונות: הוספת רוחב/גובה לכל תגי img בתבניות רכיבים.
- שמירת מקום: הגדרת min-height/min-width לבלוקים דינמיים.
- הגדרת גופנים: הוספת font-display:swap ומדדי fallback.
- תיקון פרסומות: הגדרת min-height למכלי פרסומות.
- המרת אנימציות: החלפת מאפיינים הגורמים ל-layout ב-transform/opacity.
- אימות: בדיקה חוזרת עם DevTools ו-PageSpeed Insights.
ציר זמן ועלות אופטימיזציית CLS
| משימה | ציר זמן | השפעה | עלות אופיינית |
|---|---|---|---|
| הוספת רוחב/גובה לתמונות בתבניות רכיבים | 1–3 ימים | CLS −0.1–0.3 | $200–$500 |
| שמירת מקום לבלוקים דינמיים | יום אחד | CLS −0.05–0.15 | $100–$300 |
| הגדרת font-display | 0.5 יום | CLS −0.02–0.1 | $50–$150 |
| תיקון בלוקי פרסומות עם min-height | 0.5 יום | CLS −0.05–0.2 | $50–$200 |
| המרת אנימציות ל-transform | 1–2 ימים | CLS → 0 מאנימציות | $200–$400 |
לאחר התיקונים, יש לאמת עם PageSpeed Insights באמצעות נתונים אמיתיים. CrUX מתעדכן עם עיכוב של 28 יום — תראו שינויים בתנועה האמיתית לאחר כחודש.
המומחיות שלנו
אנחנו חברת 1С-ביטריקס מוסמכת עם ניסיון של למעלה מ-5 שנים, השלמנו למעלה מ-50 פרויקטים של Core Web Vitals, ושיעור הצלחה של 98% בהפחתת CLS מתחת ל-0.1. השיטה שלנו מהירה פי 2 מתיקונים סטנדרטיים מכיוון שאנו משתמשים בבדיקה אוטומטית ובשינויים בכמות גדולה. ROI אופייני: עלייה של 20% בתנועה אורגנית תוך חודשיים מהאופטימיזציה. אנו מעריכים את הפרויקט שלכם ללא תשלום — צרו קשר.
מה כלול
- בדיקת CLS נוכחי דרך PageSpeed Insights ו-CrUX
- תיקון תמונות בכל תבניות הרכיבים (הוספת רוחב/גובה)
- שמירת מקום לבלוקים דינמיים (עגלה, מונים)
- הגדרת font-display ובחירת גופני fallback
- תיקון בלוקי פרסומות עם min-height
- המרת אנימציות ל-transform
- תיעוד כל השינויים
- מדידת CLS סופית ודוח
ציר זמן: 3 עד 10 ימים בהתאם להיקף התבניות. החל מ-$500 לאופטימיזציה בסיסית.