Збірка CSS і JS в 1С-Бітрікс: прискорення завантаження сайту

Ми часто беремо проєкти, які розвивалися роками, і виявляємо хаос із CSS і JS. Типовий випадок: на сторінці каталогу 60-120 запитів до стилів і скриптів. Навіть із HTTP/2 кожен новий запит витрачає час на DNS, TCP та TLS. На мобільних мережах це вбиває продуктивність. Наш досвід показує: об'єднання файлів може скоротити кількість запитів у 10-20 разів і прискорити завантаження на 40-70%.

Чому об'єднання CSS і JS прискорює сайт?

Браузер обмежує кількість одночасних з'єднань до одного домену (зазвичай 6). Якщо файлів багато, вони завантажуються послідовно. Об'єднання в один файл зменшує кількість запитів, що особливо помітно на мобільних мережах. Також знижується overhead на DNS, TCP і TLS для кожного запиту. Детальніше про HTTP/2.

Вбудований механізм об'єднання Бітрікс

Бітрікс пропонує два підходи: через API управління активами та через компонент bitrix:main.include. При включеній мініфікації (Налаштування → Продуктивність → Стиснення) всі зареєстровані CSS збираються у /bitrix/cache/css/<hash>.css, JS — у /bitrix/cache/js/<hash>.js. Однак є нюанс: об'єднуються лише файли, зареєстровані до ShowHead(). Прямі <link> у шаблонах ігноруються.

Які проблеми вирішуємо?

Порядок підключення. При об'єднанні каскад CSS часто ламається. Наприклад, скидання стилів має бути першим, а компонентні стилі — пізніше. Рішення — використовувати \Bitrix\Main\Page\Asset::addCss() із явним зазначенням залежності або розбивати на два бандли: базовий (grid, typography) та динамічний (віджети).

Inline-стилі та скрипти. Багато компонентів (наприклад, bitrix:news.list) видають рендер прямо в HTML. Це не об'єднується. Для кастомних рішень замінюємо echo '<style>' на $this->addExternalCSS() — тоді файл потрапляє в загальний бандл і кешується.

Дублі та конфлікти версій. На одному проєкті ми знайшли 12 однакових normalize.css і три версії jQuery (1.9, 2.1, 3.6) на одній сторінці. Аудит через перехоплення AddCSSLink() та логування допоміг уніфікувати бібліотеки. Tree shaking та code splitting — ваш наступний крок.

Як ми це робимо: Vite та Webpack

Для сучасних проєктів вбудовані засоби Бітрікс недостатні. Ми використовуємо Vite або Webpack.

Приклад структури з Vite:

local/templates/mytemplate/
├── src/
│   ├── css/
│   │   ├── main.scss
│   │   └── components/
│   ├── js/
│   │   ├── app.js
│   │   └── pages/
├── dist/       ← сюди збирає Vite
│   ├── app.[hash].css
│   └── app.[hash].js
├── header.php  ← підключає dist/
└── vite.config.js

У header.php підключаємо бандли через CMain::AddCSSLink() — так вони кешуються Бітрікс. Vite забезпечує HMR під час розробки, tree shaking для продакшну.

Чому Vite кращий за вбудований механізм?

Vite підтримує SCSS, TypeScript, автоматичний code splitting. Вбудоване об'єднання Бітрікс цього не вміє. Ми на практиці домагаємося зменшення ваги бандлу на 30-50% за рахунок видалення мертвого коду. Порівняння:

Кейс: портал із трьома командами розробників

Один із наших клієнтів — B2B-портал, 5 років розробки, три команди змінилися. На сторінці каталогу: 47 CSS-запитів (сумарно 890 KB без стиснення), 68 JS-запитів (сумарно 1,4 MB). Аудит, проведений нами, показав: 12 CSS дублів, 8 JS-бібліотек у кількох версіях.

Що зробили:

• Аудит всіх підключень через перехоплення CMain::AddCSSLink() та AddHeadScript() з логуванням.
• Уніфікація бібліотек: jQuery єдина версія, видалення дублів.
• Перенесення всіх прямих <link> в API Бітрікс.
• Налаштування збірки через Vite для нового коду, упаковка legacy в єдиний бандл.
• Code splitting: критичний бандл + 4 сторінкових бандли.

Результат:

• 47 CSS-запитів → 3.
• 68 JS-запитів → 5.
• Сумарна вага CSS+JS (після gzip) знизилася з 850 KB до 210 KB за рахунок видалення дублів та tree shaking.
• Швидкість завантаження сторінки впала з 4.2 с до 1.1 с (за Lighthouse).

Процес роботи:

1. Аналітика — збираємо логи всіх підключень, виявляємо дублі, конфлікти, невикористаний код.
2. Проектування — визначаємо архітектуру бандлів: критичний, сторінкові, відкладені.
3. Реалізація — переносимо підключення на API, налаштовуємо збірку (Vite/Webpack), пишемо конфіги.
4. Тестування — перевіряємо кожну сторінку на коректність відображення та функціональність JS.
5. Деплой — заливаємо на бойовий сервер, перевіряємо кешування.

Теговане кешування Бітрікс скидає кеш при зміні даних. При об'єднанні файлів важливо, щоб кеш CSS/JS інвалідувався коректно. Налаштовуємо через $arParams["CACHE_TAGS"].

Що входить у роботу:

• Повний аудит поточних підключень із звітом.
• Уніфікація бібліотек та видалення дублів.
• Налаштування збірника (Vite або Webpack) під ваш шаблон.
• Інтеграція з тегованим кешуванням Бітрікс.
• Документація про процес збірки та підключення.
• Навчання команди роботі з новою архітектурою.
• Пост-релізна підтримка тиждень.

Строки та вартість

Вартість розраховується індивідуально після аудиту. Замовте консультацію — ми запропонуємо оптимальне рішення. Гарантуємо результат: прискорення завантаження щонайменше в 2 рази, підтверджене тестами. Зв'яжіться з нами для оцінки вашого проєкту.

Навантажувальне тестування після об'єднання обов'язкове — у рідкісних випадках порядок завантаження скриптів важливий, і його порушення призводить до JS-помилок на конкретних сторінках. Наш досвід дозволяє передбачити такі нюанси та уникнути їх на етапі проектування. Отримайте консультацію та план оптимізації.

Чому верстка сайтів на 1С-Бітрікс вимагає професіоналізму?

Відкриваєте template.php у попереднього підрядника — а там SQL-запити, бізнес-логіка та inline-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в result_modifier.php або component_epilog.php, представлення — в template.php. Жодного CIBlockElement::GetList в шаблоні. Це скорочує час правок на 30–40% та виключає типові помилки, які ламають кеш. Подібну проблему виправляли клієнту з інтернет-магазину — він місяць не міг оновити блок «Акції». Після налаштування тегованого кеша правки вставали за хвилину, а не за день.

Отримайте безкоштовний аудит вашого проекту — зв'яжіться з нами.

Як правильно організувати шаблони компонентів?

Кастомний шаблон — це не один файл, а структура з п’яти-шести файлів:

• template.php — тільки HTML та виведення $arResult
• result_modifier.php — підготовка даних, додаткові вибірки
• component_epilog.php — код після кешування (лічильники, динаміка)
• style.css та script.js — підключаються через Asset::getInstance()->addCss() та addJs() (не через <link> — інакше ламається об'єднання)
• .parameters.php — параметри візуального редактора

Приклад структури для каталогу:

local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php

Типові шаблони, які верстаємо під ключ:

Кешування: чому воно ламається і як лагодимо?

Компонентне кешування в Бітрікс ламається однією помилкою: вивели ім'я користувача всередині кешованого каталогу — всі бачать одне ім'я. Рішення — component_epilog.php для динамічних вставок.

Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) налаштовуємо обов'язково. Змінили товар — очищується кеш лише цього товару, а не всього розділу. На проєкті з 50 000 товарів це дає приріст швидкості на 40% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами bx-component не чіпаємо — обгортаємо свій BEM-блок всередині.

Для типових завдань (лендінги, адмінки) беремо Tailwind 3+ з PurgeCSS — підсумковий CSS 10–30 КБ замість сотень. Дизайн-токени в tailwind.config.js фіксують кольори, шрифти, відступи в одному місці.

На більшості проєктів застосовуємо гібрид: BEM для структурних компонентів (каталог, картка, чекаут), Tailwind для утилітарних речей (відступи, flex-розкладки). Межу обговорюємо з командою заздалегідь.

Як досягти Core Web Vitals при верстці сайтів на Бітрікс?

Critical CSS — виділяємо стилі першого екрану через пакет critical, інлайнимо в <head>. Решта завантажується асинхронно через media="print" onload="this.media='all'". LCP на мобільних скорочується на 1–1.5 секунди.

Зображення — головне гальмо. Використовуємо <picture> з WebP та JPEG-фолбеком. loading="lazy" для всього нижче першого екрану. width та height явно прописані — CLS = 0. Обробник в urlrewrite.php генерує WebP на льоту.

Мініфікація та стиснення. CSS та JS через Vite або вбудоване об'єднання Бітрікс. Brotli на nginx (brotli_comp_level 6) — на 15–20% ефективніше за gzip. Кешування статики: expires 1y + версіонування через query string.

Ми готові зробити аудит вашого проєкту та запропонувати конкретні кроки. Закажіть консультацію.

Що входить в послугу верстки сайтів на 1С-Бітрікс?

Після замовлення верстки шаблону або адаптації готового рішення передаємо:

• Вихідні коди шаблонів компонентів з розділенням на template.php, result_modifier.php, epilog
• CSS та JS, підключені через Asset — без інлайн-стилів
• Налаштоване кешування з тегами
• Документацію за структурою та параметрами
• Доступ до Git-репозиторію з історією змін
• Навчання вашого розробника: як правити шаблон без втрати оновлюваності

Гарантуємо відповідність Core Web Vitals та кросбраузерність. Закріплюємо інженера з досвідом 10+ років.