אופטימיזציה של בקשות HTTP ב-1C-Bitrix

במהלך ביקורות פרויקטים של Bitrix אנו נתקלים באופן קבוע בדפים עם 180–250 בקשות HTTP בעת טעינה. זו לא הגזמה: כל רכיב יכול להוסיף 2–4 קבצי CSS ו-3–5 קבצי JS, בנוסף לאייקונים כקבצי PNG נפרדים, בנוסף לסקריפטי אנליטיקה, בנוסף לווידג'טים. כל בקשה משמעותה DNS, TCP, TLS, כותרות תגובה. עם HTTP/1.1 הדפדפן מחזיק 6 חיבורים מקבילים לכל דומיין. HTTP/2 multiplexing עוזר אך לא מבטל את העומס לחלוטין. עם ניסיון של למעלה מ-10 שנים בפיתוח Bitrix, אנו רואים שלקוחות לעיתים קרובות לא מודעים לכמה בקשות מיותרות תבנית טיפוסית מייצרת. אנו יכולים לבצע ביקורת ולהפחית בקשות בפקטור של 2–3, ולחסוך בתקציב אחזקת האתר שלכם. עלות האופטימיזציה מחושבת בנפרד לפי היקף העבודה.

ביקורת המצב הנוכחי

השלב הראשון הוא למדוד, לא לנחש. כלים:

• Chrome DevTools → Network: הסתכלו על עמודות Requests, Transferred, DOMContentLoaded, Load
• WebPageTest — מפל מים מקובץ לפי סוג
• Lighthouse: מדדים "Serve static assets with an efficient cache policy" + "Avoid chaining critical requests"

מפל מים טיפוסי: HTML → CSS (×5) → גופנים (×6) → JS (×8) → תמונות (×40+) → בקשות Ajax של רכיבים (×3–5). אנו מנתחים כל שרשרת ומוצאים נקודות הפחתה. אנו מבטיחים שלאחר האופטימיזציה מספר הבקשות לא יעלה על 100 לקטלוג טיפוסי.

איך למזג CSS ו-JS מבלי לאבד פונקציונליות?

משלב מובנה של Bitrix

בהגדרות המודול הראשי (/bitrix/admin/settings.php?lang=ru) קיימות אפשרויות "Combine CSS files" ו-"Combine JS files". המשלב מאחד קבצים לבקשה אחת /bitrix/cache/css/[hash].css. זה עובד אבל יש ניואנסים:

• הוא מאחד רק קבצים מ-AddCSS() / AddHeadScript(), לא סגנונות מובנים של רכיבים.
• ביטול מטמון (עריכת כל קובץ) משנה את ה-hash — הדפדפנים מורידים מחדש.
• הוא לא ממזער CSS/JS — רק שרשור.

Webpack/Vite למשאבים מותאמים אישית

לקוד שלכם (לא ליבת Bitrix) אנו מגדירים bundler:

// vite.config.js export default { build: { rollupOptions: { input: { main: 'local/templates/main/src/main.js', catalog: 'local/templates/main/src/catalog.js', } } } } 

אנו מקבלים 2 bundles במקום 15+ קבצים נפרדים. פיצול ל-// vite.config.js export default { build: { rollupOptions: { input: { main: 'local/templates/main/src/main.js', catalog: 'local/templates/main/src/catalog.js', } } } } ו-main חשוב: אל תטעינו JS של קטלוג בדפים סטטיים.

איך להפחית בקשות אייקונים עם SVG Sprites?

כל אייקון כקובץ נפרד הוא הדרך המהירה ביותר לקבל 30–50 בקשות נוספות. CSS sprites (תמונה אחת גדולה) מפחיתים בקשות פי 40 בהשוואה לקבצי PNG בודדים. בפועל, SVG sprites עדיפים:

<!-- sprite.svg --> <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-cart" viewBox="0 0 24 24">...</symbol> <symbol id="icon-search" viewBox="0 0 24 24">...</symbol> </svg> <!-- использование --> <svg><use href="/local/templates/main/img/sprite.svg#icon-cart"></use></svg> 

בקשת HTTP אחת לכל מערך האייקונים של האתר. נשמר במטמון לטווח ארוך. SVG מובנה דרך PHP helper נותן 0 בקשות אבל מגדיל את גודל ה-HTML. הבחירה תלויה במספר האייקונים במסך הראשון.

למה בקשות Ajax של רכיבים מאטות את הטעינה?

רכיבי Bitrix עם catalog מבצעים XHR נפרד בעת ניווט בדפי קטלוג. זה נורמלי, אבל במהלך אתחול הדף אנו רואים לעיתים קרובות מספר בקשות Ajax מקבילות ל-<!-- sprite.svg --> <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-cart" viewBox="0 0 24 24">...</symbol> <symbol id="icon-search" viewBox="0 0 24 24">...</symbol> </svg> <!-- использование --> <svg><use href="/local/templates/main/img/sprite.svg#icon-cart"></use></svg> עם פרמטרים שונים. הפתרון הוא batch: שילוב מספר בקשות לאחת דרך תור:

// Накапливаем запросы за 50 мс, затем отправляем batch const queue = []; function batchRequest(params) { queue.push(params); if (queue.length === 1) { setTimeout(() => { const batch = [...queue]; queue.length = 0; fetch('/api/batch', { method: 'POST', body: JSON.stringify(batch) }); }, 50); } } 

בצד השרת — נקודת קצה 'AJAX_MODE' => 'Y' שמפנה בקשות ומחזירה מערך תגובות. מומחי Bitrix מוסמכים מבטיחים אינטגרציה נכונה.

תמונות: טעינה עצלה ו-Sprites

תמונות קטלוג הן המקור הגדול ביותר לבקשות. דרישה מינימלית:

// В шаблоне компонента catalog.element echo '<img src="' . $arItem['PREVIEW_PICTURE']['SRC'] . '" loading="lazy" width="' . $arItem['PREVIEW_PICTURE']['WIDTH'] . '" height="' . $arItem['PREVIEW_PICTURE']['HEIGHT'] . '" alt="' . htmlspecialchars($arItem['NAME']) . '">'; 

ajax.php הוא lazy loading טבעי. הדפדפן לא מבקש תמונות מתחת לאזור הנראה עד לגלילה. בדף קטלוג עם 48 כרטיסי מוצר, זה מסיר 30–40 בקשות מהנתיב הקריטי.

איך למדוד תוצאות אופטימיזציה?

אנו משתמשים במדדים: מספר בקשות כולל, זמן טעינה ו-LCP. דוגמה מעשית: חנות אלקטרוניקה מקוונת על Bitrix. דף הבית: 214 בקשות HTTP, זמן טעינה 8.3 שניות. לאחר הפעולות שלנו: הפעלת משלב CSS/JS, SVG sprite של 64 אייקונים, // Накапливаем запросы за 50 мс, затем отправляем batch const queue = []; function batchRequest(params) { queue.push(params); if (queue.length === 1) { setTimeout(() => { const batch = [...queue]; queue.length = 0; fetch('/api/batch', { method: 'POST', body: JSON.stringify(batch) }); }, 50); } } לתמונות מתחת לקיפול, דחיית סקריפטי מעקב, מיזוג JS מותאם אישית דרך Vite. תוצאה: 214 → 88 בקשות, זמן טעינה: 8.3 שניות → 3.1 שניות, LCP: 5.2 שניות → 1.9 שניות.

לפי ויקיפדיה, הפחתת בקשות היא קריטית לרשתות ניידות.

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

• ביקורת על מספר הבקשות הנוכחי ומפל הטעינה.
• הפעלת המשלב המובנה, הגדרת מטמון.
• בניית SVG sprite והחלפת אייקונים.
• הגדרת Vite/Webpack למשאבים מותאמים אישית.
• הטמעת מנגנון batch ל-Ajax.
• הוספת /api/batch ואופטימיזציה של תמונות.
• פריסת HTTP/2 Push (דוגמת קונפיגורציית Nginx: // В шаблоне компонента catalog.element echo '<img src="' . $arItem['PREVIEW_PICTURE']['SRC'] . '" loading="lazy" width="' . $arItem['PREVIEW_PICTURE']['WIDTH'] . '" height="' . $arItem['PREVIEW_PICTURE']['HEIGHT'] . '" alt="' . htmlspecialchars($arItem['NAME']) . '">'; ).
• תיעוד תוצאות, הדרכת הצוות שלכם.
• חודש תמיכה לאחר האופטימיזציה.

צרו קשר כדי להתחיל באופטימיזציה של האתר שלכם. הזמינו ביקורת וקבלו המלצות מותאמות אישית. אנו מבטיחים תוצאות, המעוגנות בחוזה.