ציוני PageSpeed Insights נמוכים במובייל (38) בעוד שבמחשב הם גבוהים (91) — כאב מוכר לבעלי אתרים על 1C-Bitrix. הגרסה הניידת מתדרדרת בגלל כמה סיבות משולבות: התבנית לא מותאמת, רכיבים טוענים את כל ה-JavaScript ללא קשר למכשיר, תמונות מוגשות ללא WebP ו-srcset, ו-Time to First Byte (TTFB) נצרך על ידי רינדור כבד בצד השרת. פיתוח גרסה ניידת לאתר על 1C-Bitrix הוא מכלול פתרונות ברמת התבנית, הרכיב והשרת. אנו מבטיחים תוצאות בזכות ניסיון Bitrix מוסמך — למעלה מ-10 שנים ו-50+ פרויקטים מוצלחים.
הגורמים העיקריים לירידת ביצועים במובייל על 1C-Bitrix
ביצועי התבנית הניידת הם החלק התובעני ביותר. בעיות אופייניות והפתרונות שלהן:
תמונות. Bitrix יכול לספק WebP דרך מודול main (הגדרת BX_USE_WEBP), אך יש להפעיל ולהגדיר זאת במפורש. התכונה srcset לתמונות רספונסיביות לא נוצרת כברירת מחדל ברכיבים — יש לשנות את תבנית הרכיב או להשתמש ב-CFile::ResizeImageGet() עם מספר גדלים. חיסכון בתעבורה עד 40%.
JavaScript. רכיבי Bitrix סטנדרטיים מושכים את jquery, main.core, main.popup — בסך הכול 400–600KB בדחיסת gzip. עבור מובייל, First Contentful Paint הוא קריטי, ולכן סקריפטים שאינם נדרשים בטעינה הראשונית (סליידרים, ווידג'טים) מועברים ל-defer/async או נטענים דרך IntersectionObserver. הפחתת גודל JS עד 50%.
גופנים. font-display: swap ב-CSS, טעינה מוקדמת של גופנים קריטיים דרך <link rel="preload">.
CSS קריטי. סגנונות מוטמעים לתוכן שמעל לקפל, השאר בטעינה אסינכרונית. מיושם על ידי שינוי תבנית header.php.
השוואה בין תבנית אדפטיבית לתבנית נפרדת לגרסה ניידת על 1C-Bitrix
Bitrix מציעה שתי גישות: תבנית אדפטיבית אחת (רספונסיבית) או תבנית ניידת נפרדת המוחלפת דרך $APPLICATION->SetPageProperty("kernel_theme", "mobile") או מודול mobileapp.
| פרמטר | תבנית אדפטיבית | תבנית נפרדת |
|---|---|---|
| מורכבות פיתוח | נמוכה | גבוהה |
| ביצועים | גבוהים יותר (HTML אחד) | נמוכים יותר (שתי תבניות) |
| זמן תחזוקה | חצי מהזמן | יותר |
| חוויית משתמש במובייל | טובה עם אופטימיזציה | מקסימלית |
תבנית אדפטיבית היא הסטנדרט בפועל. HTML אחד, CSS עם breakpoints, JavaScript ללא כפילות לוגיקה. הבעיה: "רספונסיביות" ברמת ה-CSS לא פותרת ביצועים — סליידר כבד עדיין נטען גם אם הוא מוסתר במובייל דרך display: none. תבנית אדפטיבית מפותחת פי 2–3 מהר יותר ודורשת פחות תחזוקה.
תבנית נפרדת מוצדקת כאשר מסעות המשתמש במובייל ובמחשב שונים מהותית — למשל, אפליקציה ניידת על גבי Bitrix דרך REST API, או כאשר שכתוב תבנית legacy אינו אפשרי. יישום טכני: bitrix/templates/mobile/ עם זיהוי מכשיר דרך CBitrixComponent::includeComponent() ו-$_SERVER['HTTP_USER_AGENT'] או זיהוי JS עם הפניה.
מטמון Composite למובייל על 1C-Bitrix
מודול composite ב-Bitrix תומך במטמון נפרד למחשב ולמובייל (פרמטר bx_composite_separate_cache). זה חשוב: גרסאות המובייל והמחשב שונות בסימון, ולכן לא ניתן לשמור אותן באותו מיכל. הפעל זאת בהגדרות מודול "Composite Site": סמן "מטמון נפרד למכשירים ניידים." לאחר מכן, composite ייצור קבצי HTML נפרדים לכל סוג מכשיר. בפועל, זה נותן שיפור TTFB של עד 30%.
ניווט מגע ומאפייני UX
הגרסה הניידת דורשת טיפול ניווט נפרד: תפריט בורגר, סרגל ניווט תחתון, מחוות (swipe לסליידרים). בהקשר של Bitrix, זה אומר שינוי תבניות של רכיבי bitrix:menu ויצירת רכיב ניווט נפרד. כרטיסי מוצר בקטלוג במובייל דורשים לעיתים קרובות פריסה מפושטת: אזורי לחיצה גדולים, כפתור "הוסף לסל" ללא שלבים מיותרים, תצוגה מהירה דרך bottom sheet במקום חלון מודאלי.
כיצד פיתוח גרסה ניידת על 1C-Bitrix פותר בעיות ביצועים?
אנחנו לא רק "הופכים את האתר לרספונסיבי." אנו חושבים מחדש על ארכיטקטורת הפרונטאנד: משביתים מודולים מיותרים, כותבים מחדש רכיבים לטעינה אסינכרונית, משתמשים במטמון מתויג. Google PageSpeed Insights מתעד עלייה ממוצעת של 40–50 נקודות לאחר היישום. בפרויקט אחד, TTFB השתפר ב-30% בזכות מטמון composite נפרד והעברת JS כבד ל-defer. תוצאות מאושרות על ידי Google PageSpeed Insights. חיסכון בתעבורה וטעינה מהירה יותר משפרים ישירות את ההמרות.
רשימת בדיקה לדוגמה לאודיט
- בדיקה אם `BX_USE_WEBP` מופעל - נוכחות `srcset` לתמונות קטלוג - מספר סקריפטים סינכרוניים ב-`` - האם מטמון נפרד למובייל מופעל? - האם נעשה שימוש ב-`font-display: swap`?תוצאות יישום: מקרה אמיתי
הלקוח שלנו — רשת קמעונאות למכשירי חשמל ביתיים עם כ-12,000 פריטים. תעבורת מובייל — 68% מכלל התעבורה, המרת מובייל נמוכה פי 2.8 מהמחשב. PageSpeed Mobile — 31.
האודיט חשף:
- התבנית נבנתה לפני הסטנדרטים הנוכחיים, רספונסיביות רק דרך CSS
display: none - 14 קבצי JavaScript בהיקף כולל של 1.1MB, כולם נטענים סינכרונית ב-
<head> - תמונות רק JPEG 1200px, ללא
srcset, ללא WebP - טופס הזמנה — 4 שלבים, כל אחד דף נפרד עם טעינה מלאה
הפתרונות שיושמו:
- עיצוב מחדש של התבנית: CSS קריטי מוטמע, JS ב-defer, WebP דרך
BX_USE_WEBP+ שינוי גודל דרך handler - תפריט מובייל הוחלף ברכיב drawer עם מעברי CSS
- שלבי ההזמנה אוחדו למסך אחד עם פס התקדמות (שינוי של
bitrix:sale.order.ajax) - הופעל מטמון composite נפרד
| מדד | לפני | אחרי |
|---|---|---|
| PageSpeed Mobile | 31 | 74 |
| המרת מובייל | נמוכה פי 2.8 | +40% תוך חודשיים |
| זמן טעינה | ~5 שניות | ~2 שניות |
מה כוללת העבודה
- אודיט מצב נוכחי: PageSpeed, WebPageTest, ניתוח מסלול רינדור קריטי
- התאמה או פיתוח תבנית מובייל ל-1C-Bitrix
- אופטימיזציית תמונות: WebP, srcset, טעינה עצלה
- אופטימיזציית טעינת JS/CSS: defer, async, פיצול קוד
- הגדרת מטמון composite עם אחסון נפרד למובייל
- שינוי תבניות רכיבים לחוויית משתמש ניידת
- בדיקות על מכשירים אמיתיים וב-Chrome DevTools עם אמולציה
- תיעוד ומתן גישה
כיצד להזמין פיתוח גרסה ניידת?
לוח זמנים: מ-3 שבועות להתאמת תבנית קיימת ועד 3–4 חודשים לפיתוח תבנית מובייל מאפס עם שיפוץ תרחישי משתמש מרכזיים. המחיר מחושב באופן אישי לאחר האודיט. אנו מעריכים את הפרויקט שלך תוך 2 ימי עבודה — פשוט שלחו לנו הודעה. אנו עובדים turnkey עם אחריות. קבלו ייעוץ לפרויקט שלכם! הזמינו פיתוח גרסה ניידת וראו את התוצאות.