bitrix не переносить скрипт в конец
Битрикс: перемещение Javascript в конец страницы
1 мин. 5317 29.04.2016
Сегодня мы поговорим об оптимизации скорости загрузки сайта.
В сущности, эта статья посвящена решению довольно тривиальной задачи: перенос JS-скриптов в футер страниц. Начнем с теории вопроса.
Зачем переносить JS в нижнюю часть сайта
Как известно, поисковые системы рекомендуют переносить весь имеющийся Javascript в конец HTML-страницы.
На то есть свои довольно веские и простые причины. Дело все в том, что Javascript, в отличии, например, от PHP, выполняется в браузере. То есть на стороне пользователя. Получая сгенерированную сервером HTML-страницу, браузер останавливает загрузку и приступает к обработке JS. Если JS расположен в верхней части страницы — браузер начинает его выполнение еще до того, как пользователь увидел страницу. В результате, отображение страницы занимает больше времени.
Результаты проверки сайта в PageSpeed Insights
Перейдет от теории к практике.
Как перенести JS вниз страницы в Bitrix CMS
Начиная с версии 15.5 в Битрикс появилась возможность решения данной задачи средствами самой системы управления.
Активируется данная опция в настройках главного модуля:
Настройки –> Настройки продукта –> Настройки модулей
Опубликовано: 29 апреля 2016 года, в рубрике «Битрикс».
Поделитесь публикацией в социальных сетях
Перенести Javascript в конец страницы в Битриксе
Для того чтобы сайт занимал наиболее высокие позиции в поисковой выдаче сами поисковые системы или их сервисы, например, сервис google page insights (на скриншоте ниже), а также специалисты по SEO-продвижению рекомендуют всеми возможными способами ускорять первую и последующие загрузки сайта, проще говоря сайт должен быть легковесным и полностью загружаться как можно быстрее.
Одним из способов повышения скорости загрузки является перенос скриптов из шапки в нижнюю часть сайта. Можно делать это руками, но такой способ покажется долгим и рутинным.
В системе Битрикс все подключенные в верхней части сайта Javascript скрипты можно перенести буквально парой кликов мышью.
и поставить галочку напротив пункта: «Переместить весь Javascript в конец страницы»
Этот вариант подходит как для обычного подключения JS-скриптов, так и для подключения javascript посредством битрикса: $APPLICATION->AddHeadScript(»);
Напишите в комментариях, помог вам этот способ или нет
7 смертных грехов разработки на 1С-Битрикс
1. Изменять все стандартное/Изменять содержимое папки bitrix
Если вы не послушаетесь и дадите слабину хотя бы в одном – можете попрощаться с беззаботным обновлением платформы. А такая необходимость рано или поздно настанет. Не говоря о том, что искать файлы будет сложнее.
Для пользовательских модулей/компонентов/шаблонов/обработчиков должна использоваться папка /local/.
2. Получать данные в template.php
Никогда, слышите, никогда не делайте этого! Я говорю о CIBlockElement::GetList (и подобных им функциях) в template.php.
Шаблон должен быть использован только для вывода информации. Ни для чего больше. Если вычисления (получение дополнительных данных, их модификация) находятся в шаблоне, вы становитесь сильно зависимы от порядка выполнения кода.
Допустим, необходимо посчитать общее количество просмотров всех статей на странице и вывести значение. Если вы разместите вычисления в цикле вывода статей, полученное значение можно будет использовать только после последней статьи. Простая задача по переносу блока наверх страницы превратится в ад.
3. Неверное подключение скриптов и стилей сайта
Откройте свой сайт, найдите основной шаблон и откройте файл header.php.
В Битриксе вполне неплохой механизм автоматического объединения и минификации скриптов, кроме того, Битрикс умеет перемещать JS в конец страницы, благодаря чему сайт быстрее грузится. Если кто вдруг не знал, вся эта годнота включается в настройках Главного модуля:
А теперь барабанная дробь. Ничего не получится, если вы подключали скрипты и стили дедовским способом.
Соберите скрипты из шаблона сайта, поместите их в JS файл, а потом подключите его с помощью AddHeadScript().
Тоже самое касается и стилей. Если вам необходимо подключить стили, вынесите их в отдельный файл, а потом используйте SetAdditionalCSS().
В итоге получится нечто похожее:
. или, если вы используете D7, так:
4. Неверное подключение скриптов и стилей компонента
Если с предыдущим пунктом все более-менее просто, исправить эту проблему гораздо сложнее. Давайте разбираться.
Допустим, для главной страницы сайта необходимо разработать слайдер с баннерами. Ок. Что может быть проще.
Но многие разработчики просто помещают css и js в файл template.php шаблона компонента и на этом успокаиваются. Правильным же подходом будет создание файлов script.js и style.css в папке шаблона. Они подключатся автоматически и избавят от головной боли при разработке.
5. Отключение кеширования
Кеширование позволяет значительно снизить нагрузку на БД. Это более остро чувствуется при росте аудитории (и соответственно запросов к БД).
Обычная ситуация: верстальщику не нравится, что изменения стилей отображаются не сразу и он решает отключить кеширование отдельного компонента. Работа кипит, сроки горят и он (верстальщик) просто забывает включить кеширование обратно. Проходит время и страницы сайта начинают грузиться все дольше и дольше.
Мой совет: перед сдачей проекта прогнать сайт через монитор производительности. Он покажет ошибки в разработке и вам не придется искать проблемные компоненты вручную.
6. Вложенные циклы при получении элементов инфоблока
Очень часто при разработке нового компонента возникает необходимость получать данные из двух (или больше) связанных Инфоблоков.
Давайте рассмотрим пример: нужно получить список всех деталей, подходящих ко моделям автомобилей.
Код упрощен для простоты восприятия, матерые разработчики найдут в нем сразу несколько ошибок;)
Суть в чем: чем больше на сайте будет моделей, тем больше будет SQLзапросов с получением данных о запчастях. Более правильным был бы такой вариант:
В этом случае, вне зависимости от количества элементов инфоблока, будет всего 2 SQL запроса: получение моделей и получение деталей. А уже дальше в цикле должна быть проведена работа по распределению деталей на соответственные модели автомобилей.
Вообще, подобных ошибок очень много:
Перечислять все ушло бы очень много времени.
7. Бездумная разработка компонентов Bitrix
Не самым лучшим решением будет разрабатывать сайт целиком на самописных компонентах. Мотивация может быть разная: «Стандартный компонент делает слишком мало», «Стандартный компонент делает слишком много», «Шаблон слишком массивный, а в данных не разобраться», «Работает не так как я хочу», «Работает так как я хочу, но не очень».
Почему не стоит делать это? По целому ряду причин:
В общем, прежде чем приступить к созданию очередного компонента, задайте себе вопрос: «А не возникнет ли проблем у Заказчика через год или два?».
Вместо заключения
Конечно, это лишь малая часть тех ужасов, с которыми приходится сталкиваться, получая очередной проект на поддержку. Я постарался собрать самые часто встречаемые.
Оптимизация сайта для PageSpeed Insights | Статьи CMS «1С Битрикс»
Задача
Провести оптимизацию выдачи контента Битрикс, контроль качества оптимизации провести при помощи PageSpeed Insights.
Решение
Инструменты для проверки скорости
Сервисы оптимизации изображений
Общие рекомендации
Перенос js и css в конец страницы
Для корректной работы битрикс с файлами стилей и скриптов их нужно подключать при помощи функций Битрикс:
Так же можно проставить галки Создавать сжатую копию объединенных CSS и JS файлов и Переместить весь Javascript в конец страницы
Программно опцию “Переместить весь Javascript в конец страницы” можно активировать так:
В случае программной активации галочка в админкеработать не будет, т.е. скрипты всегда будут помещаться в конец страницы.
Не все скрипты нужно помещать в футер. например tagManager от гугла должен быть вверху. Для исключения скрипта из переносимых нужно добавить атрибут data-skip-moving=true в тег script. Пример:
Для переноса CSS в конец страницы у Битрикса нет стандартных средств, но т.к. за вывод css отвечает отдельный метод, то мы можем вывести его в footer.php самостоятельно.
Для этого нужно вместо:
В файле header.php добавить:
В файле footer.php добавить:
Исключить служебные скрипты и стили битрикс из формирования пользовательских страниц сайта
Для этого нужно добавить обработку контента страницы перед выдачей его из буфера браузеру.
Вывод Битриксовских скриптов в футере сайта
Предупреждение:
Все описанное в посте носит лишь экспериментальный характер. Не стоит использовать это на боевых проектах без особой надобности и ради интереса.
Уже много раз поднимался вопрос о том, как же вынести скрипты битрикса из showHeadStrings().
Вот и я задался таким. После 10 минут изучения родилась такая функция.
Теперь можно управлять тем, где выводить скрипты.
В шапке теперь можно написать так:
А где-нибудь на странице в футере:
Но были замечены баги. Например, для админа сыплется очень много ошибок, но это решается подключением старым способом для всех, у кого есть права на панель управления. Так же не тестил с композитом, т.к. не оказалось под рукой такого сайта.
P.S.
А вот и результат. Я первый раз увидел, что мой сайт прошел тест в гугле 
Если же вам нужно больше свободы, то выводим скрипты следующей функцией:
| Коваленко Алексей написал: В том числе можно получить неадекватную реакцию при объединении и сжатии css и js (это в свое время заставило многих придержаться стандартизации) |
+ еще добавлю
Теперь на вашем проект уже нельзя будет использовать другие решения, без согласования с вашей архитектурой.
Например: некоторые решения из маркетплейс у вас просто не будут работать, некоторые будут. В общем. как карта ляжет.
И не потому что у них косяк, а потому что там разработчики придерживаются одних стандартов, а у вас на проекте может получится несостыковка с ними.
100% совместимость возможна только в одном случае: все работают по одному стандарту
Иначе: у вас есть шанс получить вип продукт, к которому не каждый гаджет без допиливания подойдет. Специзделие.
Потом другие разработчики будут искать, как это у вас так хитро шапка собирается:
| А как это по-другому реализовать? Как вы перенесете скрипты ядра битрикса в футер? Буду признателен, если вы покажете этот способ |
Алексей Коваленко, простите, что-то у меня с утра повышенный уровень глупости в крови.
Я как бы сам за стандарты и всегда рекомендую AddHeadScript и SetAdditionalCSS, ну просто потому, что результат предсказуем.
Но с точки зрения производительности действительно целесообразно вынести вывод всех «лишних» скриптов из головы туда, где они нужны (или вообще в конец страницы) просто чтобы сперва старница подгрузилась, пользователь увидел хоть какой-то результат, а потом мы марафет навели.
Предлагаю отталкиваться от задачи «вывести JS системно, поддерживая возможность сжатия и объединения (а так же проверки на 2 подключение одинаковых скриптов) в произвольное место». Например, в подвале вместе со счётчиками поисковиков.
Решение из поста не защищаю. Просто интересно увидеть альтернативную реализацию придерживающуюся некоего стандарта.
| Задойный Алексей написал: Предлагаю отталкиваться от задачи «вывести JS системно, поддерживая возможность сжатия и объединения (а так же проверки на 2 подключение одинаковых скриптов) в произвольное место». Например, в подвале вместе со счётчиками поисковиков. |
| целесообразно вынести вывод всех «лишних» скриптов из головы туда, где они нужны (или вообще в конец страницы) |
Действительно, нам давно не хватает:
и ShowHeadSripts(‘место назначения’)
и вроде бы. такие мелочи
Алексей Коваленко, вот и я о том же!
А автор поста эту задачу решил!
Пусть для себя. Пусть возможно всё это сломается при очередном чудо обновлении.
Пусть даже будет «чё за нах тут написали предыдущие кодеры. 1111». Но задача решена. Если он ещё в комментах к этой штуке будет ставить ссылку на этот пост, как на документацию, то возможно кому-то будет не так больно столкнуться с этой реализацией.
Мне кажется, автор молодец.
Алексей Задойный, Евгений Гаврилов
Да. поигрался сейчас «на бумаге» предложенной идеей.
Если откинуть вариант, когда проще все на самом деле прописать «текстом» в шаблоне в нужных местах (те же счетчики и тексты скриптов, которые не нуждаются в подгрузке и уже сидят в контенте, а иногда еще и выносятся во включалки для удоства управления или изменения)
то идея катит вполне.
Ну а если учесть, что со стороны родного вендора альтернатив легкого и беспроблемного вывода скриптов «мимо хеда» нет много лет. то дальше остается добавить. Без комментариев!
Коллеги, давайте оттестируем и кто-нибудь из вас завернёт в модуль.
Алексей Шкарупа
многое обходится и без проблем. И ядро битрикса не мешает
и со скриптами раньше так поступали
пока не вышла галка объединения, причем включенная с момента рождения как да по умолчанию
со стилями тоже фиг с ним.
а вот для JS
да пусть хотя бы сделают как я описал выше (возможность раскидать на места назначения и объединять в пределах мест)
Шкарупа Алексей, ShowBodyScripts есть, но опять же. Ядро то подключается в шапку.
А что же делать с ядром, которое подключается в string? Это и была главная проблема. Просто заодно расширились методы.
В текущей реализации showHeadStrings = ShowHeadStringsExt(‘BEFORE_CSS’) + ShowHeadStringsExt(‘DEFAULT’)
А ShowHeadStringsExt(‘DEFAULT’) = ShowHeadScriptsExt(1);
ShowHeadScriptsExt(1) = LANG + KERNEL
В итоге ShowHeadStrings = BEFORE_CSS+ LANG + KERNEL
А у меня это разделено.
И где здесь велосипед с ShowBodyScripts?
Может уже что-то поменяли, но недели 3 назад при включенном объединении JS работала вот такая конструкция в футере
$GLOBALS[«APPLICATION»]->MoveJSToBody(‘main’);
$APPLICATION->ShowBodyScripts();
Другой вопрос что при этом template-. js и page-. js оставались в head и это вызывало ошибки
| ShowHeadStrings(); $APPLICATION->ShowHeadScripts(); $APPLICATION->ShowCSS(true, true); |