Прискорення сайтів, оптимізація, стиснення, об’єднання css та js 1C Бітрікс

Сьогодні дізнаємосяяк грамотно оформлювати header.php в Бітрікс,як правильно підключати .css і .js в header.php,як правильно підключати jQuery в Бітрікс таяк увімкнути стиск .css і .js файлів у Бітрікс.

Це дуже гостра та актуальна проблема на сьогоднішній день. Найчастіші звернення по модулям пов'язані з помилками в скриптах, коли неправильно підключено jQuery в header.php, і дуже часто підключено кілька jQuery, але повинна бути підключена на всіх сторінках сайту тільки одна бібліотека jQuery і найпершою серед усіх скриптів шаблону сайту .

На одному сайті був рекорд, я нарахував 7 підключених бібліотек jQuery, просто людина замучилась шукати помилки і подітися вже не було куди, коли проблема була знайдена і виправлена, все стало працювати на сайті правильно.

Правильний header.php у Бітрікс

Отже, як грамотно має бути оформлений файл header.php шаблону сайту в Бітрікс:

Перед не повинно бути жодних прогалин і переносів
Кодування сторінки задається перед
Після заголовка перераховуються всі мета-теги
Після мета-тегів підключаються .css стилі сайту
І тільки після підключення .css стилів підключаються всі .js скрипти AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/core.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/grid.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/modal.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/dropdown.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/scrollspy.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH.'/js/uikit/utility.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/button.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/switcher.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/nav.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/sticky.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/uikit/components/form-password.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/pace.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.nanoscroller.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.responsiveTabs.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/switchery.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/readmore.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/jquery.scrollUp.min.js'); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH .'/js/fn.js');

//Тут виводим скрипти $APPLICATION->ShowHeadStrings(); $APPLICATION->ShowHeadScripts(); ?>

CUtil::GetAdditionalFileURL() - генерує url до файлу із зазначенням метки версії файлу, т.е. він буде кешуватися в браузері відвідувача.

SITE_TEMPLATE_PATH - це постійна URL-адреса, що вказує від коріння сайту до папки поточного шаблону, включаючи ім'я папки, якщо змінити папку шаблону, то в header.php нічого не виправляти вже не доведеться, він зміниться в цій константі, наприклад:/bitrix/templates/папка шаблона сайту/

Тут ми виводимо мета-теги "описание" і "ключевые слова" для пошукових систем.

ShowMeta("роботи", false, false); $APPLICATION->ShowMeta("ключові слова", false, false); $APPLICATION->ShowMeta("description", false, false); ?>

Методом SetAdditionalCSS() підключаємо стилі шаблону, тому кожен стиль.

Метод ShowCSS() виводить усі стилі шаблону та стилі, які можуть підключатися у компонентах Бітрікс, тобто. взагалі всі підключені стилі, включаючи стилі ядра Бітрікс.

Перед підключенням взагалі всіх скриптів сайту і тільки для браузера Internet Explorer молодше IE 9 я підключаю спеціальні поліфіли функцій/методів, які в ньому відсутні і викликають помилки javascript, можлива найчастіша помилка типуObject doesn't '. Тобто. якщо якогось методу немає в IE 8, але він використовується в новій jQuery або якомусь плагіні, то може пощастить і він знайдеться в цьому скрипті, але Ви можете його не підключати тільки якщо потрібен.

А ось і підійшли ми до найцікавішого, на цьому етапі найчастіша помилка підключення jQuery, яка повинна виводитися найпершою серед усіх інших підключених в компонентах або в шаблоні сайту jQuery-плагінах, тобто. помилок із підключеними десь у компоненті або шаблоні jQuery-плагінами бути не повинно! Всі плагіни та скрипти будуть підключатися як належить, після jQuery, а не як у багатьох, у зворотному порядку, це базове правило підключення плагінів jQuery, знати його потрібно всім!

Методом AddHeadScript() підключаємо скрипти шаблону і лише після підключення стилів, стилі завжди підключайте вище скриптів.

Нижче два заключні методи"виводять" :

Зверніть увагу на порядок, саме в такому порядку!

Чому суворо у такому порядку? Тому що в методі ShowHeadStrings() може виводитися jQuery ядра Бітрікс, що викликається таким чином:

Отже, все це підключене у вихідному кодівиглядає так:

Це, звичайно, все круто! Але, як ми бачимо, до сервера дуже багато запитів - 93 шт., багато підключено усіляких файликів, а це помітно позначається на швидкості завантаження сторінки, на час очікування клієнтом, мені як розробнику дуже зручно, наочно все видно в коді, але відвідувачі мої від цього помітно страждають.

Виявляється, у Бітрікс є відмінні опції в налаштуваннях головного модуля, що дозволяють:

Об'єднувати файли CSS
Об'єднувати JS файли
Підключати мініфіковані версії CSS та JS файлів
Створювати стислу копію об'єднаних CSS та JS файлів - потрібно вимкнути

Включаєтьсястиснення та об'єднання .css і .js тут:

Адміністрація -> Налаштування -> Налаштування модулів -> Головний модуль

Створювати стислу копію об'єднаних CSS та JS файлів - це потрібно вимкнути! Бо при включеній опції Бітрікс стискає взагалі всі підключені на сайті скрипти та стилі з усіх сторінок сайту, це і вага їм додає, і велика ймовірність появи JS-помилок на сторінці.

Особисто я зіткнувся з такою проблемою, JS-помилка запросто буде в модулі, де jQuery-плагін має js-lang, ці ленги зберігаються у відповідних php-файлах, ось якщо на сторінці сайту підключається якесь розширення, то Бітрікс його також стискає , скрипт цього розширення буде на всіх сторінках сайту, а ось ленги розширення підключаються тільки на тій сторінці, де викликається розширення, якщо jQuery-плагін не бачить свого js-lang, то запросто може бути на сторінці js-помилка.

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

Загалом дуже небезпечна опція, не включайте її взагалі.

Все, стиск включено і має працювати.

Для точного результату роботи стиснення необхідно розлогинитись, далі відкривайте головну сторінку сайту, оновіть її, відкрийте вихідний код та побачите таку картину

Наочно бачимо, наскільки зменшилася кількість файлів, всі скрипти шаблону стиснуті в один файл, стилі також в один файл. Кількість запитів зменшилася в рази, час повного завантаження сторінки скоротився з 3.8сек. до 1.8сек., запити до сервера скоротилися з 93 до 43.

Висновок

Даний спосіб звичайно не є ідеальним, але він послужить хорошим зразком, як все підключати і в якому порядку, і як не робити грубіших помилок при розробці сайту.

Обов'язково вивчіть всі моменти підключення jQuery, скриптів і стилів, їх порядок та включайте стиск на сайті, це суттєво прискорить час завантаження сторінки та час її відгуку на дії відвідувача, полегшить її та навантаження на сервер, сайт навіть менше трафіку споживатиме, т.к. . кожен файлик на вашому сайті – це трафік! Також, раджу позбавлятися всіх малопотрібних і застарілих jQuery-плагінів, до багатьох можна знайти заміну меншу в рази і навіть краще за функціоналом.