אתר על 1C-Bitrix נטען תוך 4–8 שניות? LCP >4s, CLS >0.2, INP >200ms — תמונה אופיינית לחנויות על CMS זה. Google מתחשבת ב-Core Web Vitals בדירוגים, ומשתמשים עוזבים אחרי עיכוב של יותר מ-3 שניות. אנו מבצעים ביקורת ואופטימיזציה מקיפה: מאבחון ועד בדיקות סופיות עם ערובה למעבר PageSpeed Insights. הניסיון שלנו כולל 5+ שנים ויותר מ-50 פרויקטים. בפרויקט אחד, עבדנו עם חנות חלקי רכב על Bitrix: LCP היה 6.2s, CLS 0.3, INP 250ms. לאחר האופטימיזציה — LCP 1.8s, CLS 0.05, INP 120ms. ההמרה עלתה ב-22%, שיעור הנטישה ירד ב-25%. ההשקעה באופטימיזציה מחזירה את עצמה תוך 3–6 חודשים דרך המרה גבוהה יותר ונטישה נמוכה יותר. עלות אופטימיזציה אופיינית לאתר מסחר אלקטרוני על Bitrix נעה בין $1,500 ל-$3,000, ומספקת עלייה משוערת בהכנסה חודשית של $2,000–$5,000 לחנויות עם 10,000+ מבקרים.
למה Core Web Vitals קריטיים לאתר Bitrix
Google משתמשת במדדים אלה כדי להעריך את חוויית המשתמש. Core Web Vitals ירודים מפחיתים המרה ב-20–40% ופוגעים בדירוגים. עבור אתרי Bitrix, מקורות הבעיות העיקריים:
- LCP: TTFB איטי + תמונות גדולות בבאנר הראשי
- CLS: תמונות ללא width/height, גופנים ללא font-display, בלוקים דינמיים (עגלה, באנרים)
- INP: JavaScript כבד, סקריפטים חוסמים ב-head, מאזיני אירועים מוגזמים
בפועל, כל חנות שנייה על Bitrix נכשלת בהערכה של Google. אנו פותרים בעיות אלה עם תוצאה מובטחת.
לפי ההמלצות של Google, LCP צריך להיות מתחת ל-2.5 שניות, CLS מתחת ל-0.1, ו-INP מתחת ל-200 מילישניות.
מה כוללת אופטימיזציית Core Web Vitals
אבחון
אנו משתמשים ב-Chrome DevTools Lighthouse לבדיקות סינתטיות וב-PageSpeed Insights לנתוני משתמשים אמיתיים (CrUX). אנו מעריכים TTFB, גודל JS/CSS, תמונות והגדרות מטמון. התוצאה היא דוח מפורט עם סדר עדיפויות.
LCP: נתיב רינדור קריטי
אלמנט ה-LCP בחנות Bitrix הוא בדרך כלל הבאנר הראשי או התמונה הראשונה. הבעיה: התמונה נטענת דרך JavaScript לאחר הרינדור. הפתרון — טעינה מוקדמת עם fetchpriority="high":
<link rel="preload" as="image" href="/upload/banners/main.webp" imagesizes="100vw" fetchpriority="high"> הוסף זאת ב-<link rel="preload" as="image" href="/upload/banners/main.webp" imagesizes="100vw" fetchpriority="high"> דרך <head> של הרכיב. סליידרים הם האויב העיקרי: Swiper.js מוסיף 100–300 KB של JS. אופטימיזציה: שקופית ראשונה ב-HTML סטטי, אתחול JS דרך AddHeadString() או defer.
CLS: תזוזות פריסה
CLS שאינו אפס ב-Bitrix נגרם על ידי:
-
תמונות ללא מידות. רכיבים סטנדרטיים לעיתים קרובות מוציאים
requestIdleCallbackללא width/height. אנו מוסיפים גדלים:
// В template.php компонента catalog.element
$width = $arItem['PREVIEW_PICTURE']['WIDTH'] ?? 300;
$height = $arItem['PREVIEW_PICTURE']['HEIGHT'] ?? 300;
echo '<img src="' . $arItem['PREVIEW_PICTURE']['SRC'] . '" ' .
'width="' . $width . '" height="' . $height . '" ' .
'loading="lazy" decoding="async" alt="' . htmlspecialchars($arItem['NAME']) . '">';-
עגלה ומונה. שמור מקום דרך CSS:
<img>. -
גופנים. השתמש ב-
// В template.php компонента catalog.element $width = $arItem['PREVIEW_PICTURE']['WIDTH'] ?? 300; $height = $arItem['PREVIEW_PICTURE']['HEIGHT'] ?? 300; echo '<img src="' . $arItem['PREVIEW_PICTURE']['SRC'] . '" ' . 'width="' . $width . '" height="' . $height . '" ' . 'loading="lazy" decoding="async" alt="' . htmlspecialchars($arItem['NAME']) . '">';.
JavaScript: חסימת רינדור ו-INP
ב-Bitrix, ה-min-width: 40px; min-height: 40px כולל לעיתים קרובות 10–20 קבצי JS דרך font-display: swap. אנו עוברים ל-<head>:
<script src="/bitrix/js/main/core.js" defer></script> בהגדרות המודול "ביצועים", אנו מאפשרים העברת סקריפטים לסוף העמוד. אנו מאבחנים INP דרך DevTools Performance, ומנתחים משימות ארוכות וזמן תגובה של מאזיני אירועים.
תמונות: WebP וטעינה עצלה
אנו מגדירים את מודול resize_image ב-CJSCore::Init():
'resize_image' => [ 'value' => [ 'webp' => true, 'webp_quality' => 80, ], ], טעינה עצלה לתמונות מחוץ למסך: defer. תמונת LCP — ללא טעינה עצלה. WebP דוחסת תמונות ב-30-50% טוב יותר מ-JPEG ללא אובדן איכות, ומאיצה את זמן הטעינה.
CSS: נתיב קריטי
אנו מטמיעים CSS קריטי ב-<script src="/bitrix/js/main/core.js" defer></script> ב-/bitrix/.settings.php, וטוענים את השאר באופן אסינכרוני עם 'resize_image' => [ 'value' => [ 'webp' => true, 'webp_quality' => 80, ], ], . השתמש ב-PurgeCSS כדי להסיר סגנונות לא בשימוש.
איך לבצע אופטימיזציית LCP שלב אחר שלב
- זהה את אלמנט ה-LCP דרך Chrome DevTools.
- ודא שתמונה זו נטענת מראש עם
loading="lazy" decoding="async". - בצע אופטימיזציה לתמונה: WebP באיכות 80%, גודל שלא יעלה על 200 KB.
- הגדר מטמון TTFB: השתמש במטמון מתויג של Bitrix.
- העבר סקריפטים חוסמים ל-footer או השתמש ב-
<style>.
איך מטמון מתויג משפיע על TTFB
מטמון מתויג ב-Bitrix מאפשר ניקוי מטמון רק לבלוקים ששונו במקום איפוס מלא. זה מפחית TTFB ל-50ms לעומת 200-400ms ללא מטמון. ההגדרה נעשית דרך <head> ורכיבים עם תמיכה במטמון.
טעויות אופטימיזציה אופייניות
- הזנחת TTFB: ללא כוונון שרת ומטמון, LCP לא ישתפר.
- שימוש ב-
<link rel="preload" as="style" onload="this.rel='stylesheet'">על תמונת LCP — זה מחמיר את LCP. - אי שמירת מקום לבלוקים דינמיים (עגלה, סליידרים) — CLS נשאר גבוה.
דוגמה לחישוב חיסכון בעלויות
עם הזמנה ממוצעת של $18–26 והמרה של 3%, הפחתת נטישה של 25% מניבה 30 הזמנות נוספות בחודש מ-10,000 מבקרים. זה תוספת של $540–780 בהכנסה חודשית.
מה מקבלים לאחר האופטימיזציה
| מדד | לפני | אחרי | שיפור |
|---|---|---|---|
| LCP | 4–8 s | <2.5 s | 2–3x |
| CLS | 0.2–0.5 | <0.1 | 2–5x |
| INP | >200 ms | <200 ms | >30% |
השוואת שיטות אופטימיזציית תמונות
| שיטה | דחיסה | איכות | תמיכה |
|---|---|---|---|
| WebP | 30-50% | גבוהה | כל הדפדפנים המודרניים |
| JPEG | 10-20% | בינונית | אוניברסלי |
| PNG | ללא אובדן | גבוהה | אוניברסלי |
למה לבחור בנו
- 5+ שנות ניסיון עם Bitrix
- 50+ פרויקטים שהושלמו
- מומחים מוסמכים
- ערובה למעבר PageSpeed Insights
הזמינו ביקורת וקבלו דוח מפורט עם המלצות. צרו קשר לייעוץ — אנו נעריך את האתר שלכם ונציע תוכנית אופטימיזציית Core Web Vitals.
מידע נוסף על מדדים: העמוד הרשמי. מידע נוסף על הגדרת מטמון: תיעוד 1C-Bitrix.