Сьогодні дізнаємося як грамотно оформляти header.php в Бітрікс, як правильно підключати .css і .js в header.php, як правильно підключати jQuery в Бітрікс і як включити стиск .css і .js файлів в Бітрікс.
Це дуже гостра і актуальна проблема на сьогоднішній день. Найчастіші звернення по модулях пов'язані з помилками в скриптах, коли неправильно підключена jQuery в header.php, і дуже часто підключено кілька jQuery, але повинна бути підключена на всіх сторінках сайту тільки одна бібліотека jQuery і найпершою серед усіх скриптів шаблону сайту.
На одному сайті був рекорд, я нарахував 7 підключених бібліотек jQuery, просто людина замучився шукати помилки і діватися вже нікуди було, коли проблема була знайдена і виправлена, все стало працювати на сайті правильно.
Правильний header.php в Бітрікс
Отже, як грамотно повинен бути оформлений файл header.php шаблону сайту в Бітрікс:
- Перед <! DOCTYPE html> не повинно бути ніяких прогалин і переносів
- Кодування сторінки задається перед <title>
- Після заголовка <title> перераховуються всі мета-теги <meta>
- Після мета-тегів підключаються .css стилі сайту <link>
- І тільки після підключення .css стилів підключаються всі .js скрипти <script>
- Коментарі до IE по можливості краще опустити в самий кінець перед закриває тегом </ head>
Приклад header.php для HTML 5 DOCTYPE
CUtil :: GetAdditionalFileURL () - генерує url до файлу з зазначенням мітки версії файлу, тобто він буде кешироваться в браузері відвідувача.
SITE_TEMPLATE_PATH - це константа яка вказує URL від кореня сайту до папки поточного шаблону включаючи ім'я папки, якщо зміните папку шаблону, то в header.php нічого виправляти вже не доведеться, він зміниться в цій константі, наприклад: / bitrix / templates / папка шаблону сайту /
Розберемо представлений вище код header.php детально, щоб розуміти, що тут для чого підключається.
Хочу звернути увагу на передані параметри true і false у методах, наприклад ShowMeta () і ShowCSS (), від них залежить стандарт виведення тегів, для HTML 4, HTML 5 у вигляді <link>, інакше за стандартом xHTML у вигляді <link /> , в даному прикладі для HTML 5, докладніше читайте в API-документації Бітрікс.
Тут ми виводимо мета-теги "опис" і "ключові слова" для пошукових систем.
Методом SetAdditionalCSS () підключаємо стилі шаблону, так кожен стиль.
Метод ShowCSS () виводить всі стилі шаблону і стилі, які можуть підключатися в компонентах Бітрікс, тобто взагалі все підключені стилі, включаючи стилі ядра Бітрікс.
Перед підключенням взагалі всіх скриптів сайту і тільки для браузера Internet Explorer молодше IE 9 я підключаю спеціальні поліфілії функцій / методів, які в ньому відсутні і викликають помилки javascript, можлива найчастіша помилка типу Object does not support property or method 'forEach' .. .
Тобто якщо якогось методу немає в IE 8, але він використовується в новій jQuery або якомусь плагін, то може пощастить і він знайдеться в цьому скрипті, але Ви можете його не підключати, тільки якщо потрібен.
А ось і підійшли ми до найцікавішого, на цьому етапі найчастіша помилка підключення jQuery, яка повинна виводитися найпершої серед всіх інших підключених в компонентах або в шаблоні сайту jQuery-плагинах, тобто помилок з підключеними десь в компоненті або шаблоні jQuery-плагінами бути не повинно!
Всі плагіни і скрипти будуть підключатися як годиться, після jQuery, а не як у багатьох, в зворотному порядку, це базове правило підключення плагінів jQuery, знати його потрібно всім!
Методом AddHeadScript () підключаємо скрипти шаблону і тільки після підключення стилів, налаштування будуть завжди мати підключайте вище скриптів.
Нижче два заключних методу "виводять":
- ShowHeadStrings () виводить всі скрипти ядра Бітрікс, включаючи вбудовану jQuery, якщо викликається методом CJSCore :: Init (array ( 'jquery'));
- ShowHeadScripts () виводить скрипти шаблону додані за допомогою AddHeadScript (), а також спеціальні стилі, JavaScript, або довільний html-код, який задається в компонентах за допомогою CMain :: AddHeadString () і все на світі для користувача.
Зверніть увагу на порядок, саме в такому порядку!
Чому строго в такому порядку?
Тому що в методі ShowHeadStrings () може виводитися jQuery ядра Бітрікс, що викликається таким чином:
Я її спеціально закоментувавши, щоб Ви це знали, і знали де підключати. Викликатися він може в будь-якому компоненті, в шаблоні, на будь-якій сторінці сайту, а виводиться вона саме в цьому найпершому методі, якщо поміняти їх місцями, вона виявиться в самому низу, ось і помилка розробки, можна це сміливо додавати в чек-лист по розробці сайту.
Але якщо Ви виводите вбудовану jQuery, значить підключену раніше вручну jQuery треба видалити зі сторінки, не забувайте, вона повинна бути одна на всьому сайті!
Отже, все це підключений в вихідному коді виглядає так:
Це звичайно все круто! Але, як ми бачимо, до сервера дуже багато запитів - 93 шт., Багато підключено всяких файлів, а це помітно позначається на швидкості завантаження сторінки, на час очікування клієнтом, мені-то як розробнику дуже зручно, наочно все видно в коді, але відвідувачі мої від цього помітно страждають ...
Виявляється, в Бітрікс є відмінні опції в налаштуваннях головного модуля, що дозволяють:
- Об'єднувати CSS файли
- Об'єднувати JS файли
- Підключати мініфіцірованние версії CSS і JS файлів
- Створювати стислу копію об'єднаних CSS і JS файлів - потрібно відключити
Чи включається стиснення і об'єднання .css і .js тут:
Поставте галочки і збережіть налаштування модуля зеленою кнопкою Зберегти.
При включенні цих опції в ідеальному випадку на сторінці підключається 3 css і 3 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-плагінів, до багатьох можна знайти заміну меншу в рази і навіть краще за функціоналом.
Це була моя перша стаття з курсу "Прискорення сайту", далі буде ...
