Иной взгляд на файлы template_, kernel_main.js и kernel_main.css в 1С-Битрикс

Если вы не так давно начали работать системой управления сайтов Битрикс, то наверняка уже познакомились со странными файлами template_, kernel_main.js и kernel_main.css

По имеющемуся опыту, скажу, что эти два файла часто вызывают сначала непонимание со стороны разработчиков, только начавших познавать особенности этой коммерческой системы, а потом и вовсе приводят к нескрываемому гневу и ненависти к Битриксу в целом :)

Первое, что они пытаются сделать это удалить эти файлы. Мол удалю его и все будет отлично. И такие способы действительно можно найти. Но эти попытки похожи на гонку за призраком, ведь файлов template_ и kernel_main по сути нет – это автоматически генерируемые файлы. Поэтому просто их удалить как физический файл не получиться, поэтому для достижения поставленной цели придумывают разного рода костыли.

И вот мы хотим вам показать иной путь решения проблемы - через понимание ключевого предназначения этих файлов и грамотного их использования.

Зачем создаются файлы template_, kernel_main.js и kernel_main.css?

Вы уже знаете, что CMS это продукт сборный. В нем есть шаблоны и есть наборы программных компонентов. В шаблоне сайта вы подключаете файлы js и css. Так же и в компонентах есть свои шаблоны с подключаемыми файлами js и css.

К примеру, у вас на главной странице есть компонент показывающий слайдер, есть компонент выводящий список популярных товаров, есть свежие статьи и так далее. В каждом этом компоненте могут быть свои файлы стилей и срипты.

Если в настройках Битрикса включена опции «Объединять JS файлы» и «Объединять CSS файлы», тогда система соберет все эти файлы и создаст один единый kernel_main.js и kernel_main.css

Сжатие и объединение js и css в Битрикс

Причем в соответствии с очередностью расположения компонентов на странице. То есть если сначала идет компонент показывающий слайдер, а за ним компонент со списком новостей – значит сначала в объединённом файле будет идти стили слайдера, а за ним стили списка новостей.

Что из этого следует? А вот что – если вы отключите опцию «Объединять JS файлы» и «Объединять CSS файлы», то никаких общих файлов kernel_main.js и kernel_main.css создаваться не будет. Так что, никаких тут костылей и изощренных решений для избавления от, казалось бы, назойливых файлов kernel не требуется.

Почему не надо удалять kernel_main?

Во-первых, потому что объединённый файл можно сжать, включив соответствующую опцию «Создавать сжатую копию объединенных CSS и JS файлов». А это напрямую влияет на скорость загрузки сайта.

Сжатие и объединение js и css в Битрикс

Во-вторых, научившись с ним работать вам не потребуется его удаление.

Наиболее частая причина, почему кто-то хочет удалить kernel_main в Битриксе, это подключение каких-то не нужных стилей, которые портят картинку. Но как написано выше – если есть лишние стили, значит на странице где-то подключен какой-то компонент, из которого эти стили берутся.

Наиболее частая ошибка новичков, это при подключении какого-либо компонента и создания нового шаблона, не удалять лишние css и js файлы, которые там оказались в наследство системного шаблона. Такие файлы надо сразу удалять, чтобы они не включались в объединённые template_/kernel, или изменять, убирая из них «мусор».

Если все-таки, где-то забыли удалить и не можете понять где подключаются не нужные стили? В этом случае, найдите через отладку «вредителя» вашего красивого css кода. А затем, посмотрите в самом template_ или kernel_main подсказку – расположение файла стиля, откуда эта часть кода взята.

template_ и kernel_main в 1С-Битрикс

Как жить с этим теперь?

Как видно, основная проблема у новичков не в наличии объединённого файла template_ или kernel_main, а в его содержимом. Но теперь вы знаете принцип формирования этих файлов и сможете влиять на это.

UPD: как убрать kernel из head?

Бывает что PageSpeed Insights на developers.google.com ругается, мол надо убрать css из head для быстрой загрузки. И хотя мы в настройках отмечаем перенос всего css и js в подвал страницы, есть пара системных файлов стилей, которые по какой-то причине не переносятся. Как быть в такой ситуации?

Мы используем такое решение - для начала $APPLICATION->ShowHead(), который стоит в head мы делаем доступным только для авторизованных пользователей. А для всех остальных (то есть не авторизованных) внизу сайта подключаем две строки $APPLICATION->ShowCSS(), $APPLICATION->ShowHeadStrings() и $APPLICATION->ShowHeadScripts() которые выведут стили и скрипты необходимые для корректного отображения страницы.

Правда в этом случае вы можете столкнуться со скачущей сеткой, ведь ваш html загружается теперь быстрее чем файлы css и js. Тут помогает вынос ключевых стилей сетки из файла в строку, которую мы подключаем в head. Или, как альтернативный вариант, это добавить прелоадер.

В итоге ваш сайт будет грузиться очень быстро, что оценит и PageSpeed Insights и ваши клиенты.

Перенес kernel Битрикс в footer сайта для PageSpeed Insights

Так же для не авторизованных не забываем подключить $APPLICATION->ShowMeta("keywords") и $APPLICATION->ShowMeta("description") в head сайта.