битрикс не переносить скрипт вниз

Битрикс: перемещение Javascript в конец страницы

1 мин. 5317 29.04.2016

Сегодня мы поговорим об оптимизации скорости загрузки сайта.

В сущности, эта статья посвящена решению довольно тривиальной задачи: перенос JS-скриптов в футер страниц. Начнем с теории вопроса.

Зачем переносить JS в нижнюю часть сайта

Как известно, поисковые системы рекомендуют переносить весь имеющийся Javascript в конец HTML-страницы.

На то есть свои довольно веские и простые причины. Дело все в том, что Javascript, в отличии, например, от PHP, выполняется в браузере. То есть на стороне пользователя. Получая сгенерированную сервером HTML-страницу, браузер останавливает загрузку и приступает к обработке JS. Если JS расположен в верхней части страницы — браузер начинает его выполнение еще до того, как пользователь увидел страницу. В результате, отображение страницы занимает больше времени.

Результаты проверки сайта в PageSpeed Insights

Перейдет от теории к практике.

Как перенести JS вниз страницы в Bitrix CMS

Начиная с версии 15.5 в Битрикс появилась возможность решения данной задачи средствами самой системы управления.

Активируется данная опция в настройках главного модуля:
Настройки –> Настройки продукта –> Настройки модулей

Опубликовано: 29 апреля 2016 года, в рубрике «Битрикс».

Поделитесь публикацией в социальных сетях

Источник

Оптимизация сайта для 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 добавить:

Исключить служебные скрипты и стили битрикс из формирования пользовательских страниц сайта

Для этого нужно добавить обработку контента страницы перед выдачей его из буфера браузеру.

Источник

Тонкости в работе с 1С-Битрикс

Подборка полезных функций при разработке сайтов на 1С-Битрикс.

amCharts

Очень часто при создании сайта на 1С-Битрикс требуется оформить некоторое количество данных в виде графиков. Так сложилось, что чаще всего, разработчики используют сторонние решения, тогда как в 1С-Битрикс уже все есть для этого.

Одна из самых популярных библиотек для работы с графиками и диаграммами. Штатный вариант подключения библиотеки

Количество доступных вариантов типов графиков достаточно, для решения большинства задач:

MaskedInput

Если в проект есть формы, в которых используются поля для ввода телефонов или другой информации по шаблону, не обязательно использовать jquery.maskedinput. Есть более простое решение:

PhoneNumber

Используете только маски для номеров телефонов? Есть специальное решение для них:

PopupWindowManager

С помощью данной библиотеки можно сделать вывод не только диалоговые окна, но и полноценные всплывающие страницы:

PopupMenu

Отлично подходит для создания всплывающих меню и списков в стилистике Битрикс 24

SpotLight

Если на сайте есть пошаговая инструкция по работе с системой и нужно провести пользователя по каждому из них, используйте библиотеку SpotLight. Анимированные круги точно привлекут внимание.

ColorPicker

Для выбора цвета в формах не обязательно использовать стороннюю библиотеку.

Списки

На странице нужно оформить выпадающие списки, с поиском и множественным выбором? Такой функционал тоже есть.

Перенос скриптов

В 1С-Битрикс есть возможность указать в настройках объединение и перенос скриптов вниз страницы. Но, если у вам необходимо задавать цели для счетчиков Яндекса или Гугла, то они должны подключаться в шапке. Следующий код запрещает перенос скриптов вниз страницы

AJAX для компонентов

Если пишите свой компонент и нужно сделать запрос для получения информации на сервере, можно использовать следующий код:

Не забываем про настройки

Для получения значений настроек компонентов, при ajax запросе, можно использовать следующий метод

Полезные статьи в сфере веб-разработки и новости студии

Особенности: aveCRM 6.0 Модуль каталог позволяет управлять всеми блюдами и выгружать.

Источник

Перенести Javascript в конец страницы в Битриксе

Для того чтобы сайт занимал наиболее высокие позиции в поисковой выдаче сами поисковые системы или их сервисы, например, сервис google page insights (на скриншоте ниже), а также специалисты по SEO-продвижению рекомендуют всеми возможными способами ускорять первую и последующие загрузки сайта, проще говоря сайт должен быть легковесным и полностью загружаться как можно быстрее.

Одним из способов повышения скорости загрузки является перенос скриптов из шапки в нижнюю часть сайта. Можно делать это руками, но такой способ покажется долгим и рутинным.

В системе Битрикс все подключенные в верхней части сайта Javascript скрипты можно перенести буквально парой кликов мышью.

и поставить галочку напротив пункта: «Переместить весь Javascript в конец страницы»

Этот вариант подходит как для обычного подключения JS-скриптов, так и для подключения javascript посредством битрикса: $APPLICATION->AddHeadScript(»);

Напишите в комментариях, помог вам этот способ или нет

Источник

12 способов как ускорить загрузку сайта на Битрикс

Узнай как можно ускорить загрузку сайта на Битрикс в браузере. А так же основные понятия, используемые при оптимизации скорости сайта — CDN, минимизация css, минимизация js и прочее полезное.

Это перевод статьи на тему ускорения загрузки сайта, от 12 декабря 2006 года. Может показаться, что это пыльное старьё, но рекомендаций актуальны и на сегодняшний день.

1. Свести к минимуму HTTP-запросы

80% времени отклика для конечного пользователя тратится на внешний интерфейс (front-end). Большая часть этого времени связана с загрузкой всех компонентов веб-страницы: изображений, таблиц стилей, скриптов, флэш-роликов и др. Чем меньше этих компонентов, тем меньше требуется HTTP-запросов для создания страницы. Это ключевой момент для создания быстрых страниц.

Один из вариантов сократить количество компонентов веб-страницы — это упростить ее дизайн. Но можно ли создавать страницы с разнообразным и богатым содержимым, и при этом с небольшим временем отклика? Вот несколько способов сократить количество HTTP-запросов, сохранив дизайн страницы.

С помощью объединения файлов можно сократить количество HTTP-запросов, объединив все скрипты в один и все таблицы стилей — в один файл стилей. Объединение файлов становится более сложной задачей, когда скрипты и таблицы стилей различаются от страницы к странице, но, включив это в свой релиз, вы улучшите время отклика.

CSS-спрайты предпочтительны для уменьшения числа изображений. Объедините фоновые изображения в одно и используйте такие свойства CSS, как background-image и background-position для отображения нужной области.

Карты изображений объединяют несколько изображений в одно. Суммарный размер остается почти прежним, но загрузка страницы ускоряется за счёт меньшего количества HTTP-запросов. Карты изображений применимы лишь в случае смежных картинок, к примеру, панель навигации. Определение координат для карты может потребовать довольно много времени и внимания. Для навигации карты изображений неудобны и поэтому не рекомендуются к использованию.

Встроенные изображения используют схему data: URL scheme для вставки данных изображения прямо на страницу. Это может увеличить размер файла HTML. Чтобы сократить количество HTTP-запросов и не увеличивать размер веб-страницы, встроенные изображения можно сохранять в CSS-файлах (кэширующихся). Встроенные изображения пока поддерживаются не всеми основными браузерами (в частности, не поддерживаются Internet Explorer 5–7, дата публикации — 12 дек. 2006 г. Современный Internet Explorer 11 поддерживает встроенные изображения. Прим. перев.)

Начните с сокращения количества HTTP-запросов на странице. Это важнейшая рекомендация для улучшения производительности страницы у новых посетителей. Как показано в блоге Tenni Theurer Browser Cache Usage — Exposed!, 40-60% ежедневных посетителей сайта приходят с пустым кэшем. Быстрая загрузка страницы при первом посещении улучшает впечатление пользователя от вашего сайта.

В системе есть штатная функция объединения и сжатия CSS- и JS-файлов, которая включается в настройках главного модуля. При включении этой опции в идеальном случае на странице подключается 3 CSS и 3 JS-файла.

Бывают ситуации, когда штатная опция работает не так как нужно, например, не учитывает условные комментарии для IE ( ), т.е. условие пропадёт, а «специальный файл» пойдёт в общую солянку. Из предыдущего абзаца следует, что Битрикс подключает служебные CSS- и JS-файлы, как сэкономить на их подключении можно прочитать в этом посте.

2. Использовать сеть доставки контента (CDN — Content Delivery Network)

Расстояние от пользователя до вашего веб-сервера влияет на время отклика. Размещение контента на множестве серверов с различным местоположением позволит пользователям быстрее загружать ваши страницы. Но с чего начать?

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

Помните, что 80-90% времени отклика для конечного пользователя определяется временем загрузки компонентов страницы: картинок, стилей, скриптов, Flash-роликов. Это — золотое правило производительности. Лучше заняться распределением статического контента, чем браться за сложную задачу модификации архитектуры приложения. Это не только существеннее сократит время отклика, но это и легче благодаря сетям доставки контента.

Сеть доставки контента (CDN) — это группа веб-серверов, распределенных по различным местоположениям, чтобы обеспечить наиболее эффективную доставку контента пользователям. Обычно для доставки контента конкретному пользователю выбирается ближайший по сети сервер, например, с минимальным количеством перенаправлений между сетями или минимальным временем отклика.

Некоторые крупные интернет-компании располагают собственной CDN, но экономичнее использовать CDN-службу провайдера, к примеру, Akamai Technologies, EdgeCast или level3. Стартапы и частные веб-сайты, возможно, не могут позволить себе CDN-службу, но с ростом вашей целевой аудитории и переходом на глобальный уровень CDN становится необходимой. В Yahoo! службы, перенесшие свой статический контент с веб-серверов приложений на CDN (как сторонние, так и внутренние CDN-службы Yahoo), улучшили время отклика для конечных пользователей на 20% и более. Переход на CDN — относительно легкое изменение программного кода, которое значительно улучшит время загрузки вашего сайта.

«1С-Битрикс: Управление сайтом» — первая российская CMS, интегрированная с сетью CDN на уровне самой платформы! Любой владелец сайта может значительно ускорить свой проект буквально в «один клик» без каких-либо дополнительных настроек!

Подключение: в административной панели вашего сайта в разделе «Настройки» — «Облачные сервисы Битрикс» — «Ускорение сайта (CDN)» отметьте галочку «Включить ускорение сайта» и сохраните изменения.

3. Добавить заголовок Expires или Cache-Control

Это правило включает в себя два аспекта:

Дизайн веб-страниц становится все богаче, что означает все большее количество скриптов, стилей, изображений и Flash-роликов на странице. Новому посетителю придется выполнить несколько HTTP-запросов, но с помощью заголовка Expires можно кэшировать эти компоненты. Это позволяет избежать ненужных HTTP-запросов при последующих обращениях к странице. Заголовки Expires часто используются с изображениями, но их следует применять на всех компонентах страницы, включая скрипты, стили и Flash-ролики.

Браузеры (и прокси-серверы) используют кэш для сокращения количества и размеров HTTP-запросов для ускорения загрузки веб-страниц. Веб-сервер использует заголовок Expires в HTTP-запросе, чтобы указать длительность хранения компонента в кэше клиента. К примеру, этот заголовок Expires сообщает браузеру, что данный компонент будет актуален до 10 апреля 2010:

Если ваш сервер работает на Apache, используйте директиву ExpiresDefault для срока кэширования по отношению к текущей дате. Этот пример директивы ExpiresDefault устанавливает срок хранения на 10 лет относительно текущей даты.

Имейте в виду, что, если вы используете заголовок Expires, вам придется изменить имя компонента при изменении его содержания. В Yahoo! это входит в процесс сборки: номер версии содержится в имени компонента, к примеру, yahoo_2.0.6.js.

Применение заголовка Expires влияет только на просмотр страницы при повторном посещении. Количество HTTP-запросов для новых посетителей с пустым кэшем остается прежним. Следовательно, влияние на производительность зависит от того, как часто пользователи загружают вашу страницу с «полным» кэшем. («Полный» кэш уже содержит все компоненты веб-страницы). В Yahoo! мы провели измерения и обнаружили, что процент посетителей с «полным» кэшем — 75-85%. С помощью заголовка Expires можно увеличить количество компонентов, которые кэшируются в браузере и используются при повторных посещениях страницы, не нагружая интернет-подключение пользователя.

4. Использовать сжатие GZip

Время передачи HTTP-запроса и отклика можно существенно сократить с помощью фронт-энд решений. Конечно, пропускная способность подключения пользователя, его провайдер, расположение в сети и т.д. не зависят от разработчиков. Но есть и другие параметры, влияющие на время отклика. Сжатие сокращает время отклика за счёт уменьшения размера HTTP-отклика.

Начиная с HTTP/1.1, веб-клиенты поддерживают сжатие с заголовком Accept Encoding в HTTP-запросе.

Если веб-сервер обнаруживает в запросе этот заголовок, он может сжать компоненты HTTP-отклика с помощью одного из методов, перечисленных клиентом. Веб-сервер оповещает об этом клиента с помощью заголовка Content-Encoding в HTTP- отклике.

Gzip — самый распространённый и эффективный метод сжатия (на дату написания статьи — 12 дек. 2006 г. — Прим. перев.). Другой алгоритм сжатия, который может вам встретиться, — deflate, но он менее эффективен и популярен.

Gzip-сжатие сокращает размер отклика примерно на 70%. Приблизительно 90% интернет-трафика (на дату написания статьи) передается через браузеры, заявляющие о поддержке gzip. Если вы используете Apache, модуль, определяющий настройки сжатия, зависит от версии: Apache 1.3 использует mod_gzip, а Apache 2.x — mod_deflate.

Известны некоторые проблемы с браузерами и прокси-серверами, которые могут вызвать несоответствие между тем, что браузер ожидает получить, и получаемым сжатым контентом. К счастью, эти проблемы сокращаются по мере обновления браузеров. Модули Apache автоматически добавляют к отклику подходящие заголовки Vary.

Веб-серверы определяют, что сжимать, на основании типа файла, но обычно довольно ограничены в этом выборе. Большинство сайтов сжимают HTML-документы. Также стоит сжимать скрипты и стили, но многие сайты упускают эту возможность. В принципе, имеет смысл сжимать любой текстовый отклик, включая XML и JSON. Изображения и PDF- файлы сжимать не стоит, так как они уже сжаты. Применение к ним gzip не только напрасно увеличивает нагрузку на процессор, но также может увеличить размер файла.

Максимально широкое применение сжатия к различным типам файлов — простой способ уменьшить размер страницы и улучшить впечатление пользователя.

5. Располагать таблицы стилей в начале документа

Во время исследования производительности в Yahoo! мы обнаружили, что в результате переноса таблиц стилей в раздел страницы HEAD страница кажется более быстрой. Причина этого в том, что при расположении стилей в разделе HEAD страница визуализируется постепенно.

Разработчики фронт-энда, заинтересованные в высокой производительности, предпочитают постепенную загрузку страницы, то есть, мы хотим, чтобы браузер отображал имеющийся контент по мере его получения. Это особенно важно для высоконагруженных страниц и пользователей с медленным подключением. Существуют исследования и документы, доказывающие важность обратной связи для пользователей, например, индикаторов загрузки. В нашем случае HTML-страница и есть индикатор загрузки! При постепенной загрузке шапки, навигационной панели, логотипа в шапке все эти компоненты выполняют функцию обратной связи для пользователя, ожидающего загрузки страницы. Это улучшает общее впечатление пользователя.

Проблема с расположением стилей в нижней части документа состоит в том, что это блокирует постепенную загрузку во многих браузерах, включая Internet Explorer. Эти браузеры блокируют визуализацию, чтобы не пришлось перерисовывать элементы в случае изменения стилей. В результате пользователь видит пустую белую страницу.

Спецификация HTML явно подчеркивает, что таблицы стилей должны находиться в разделе HEAD: «В отличие от элемента A, элемент LINK может находиться только в разделе HEAD, но появляться может неограниченное число раз». Ни одна из альтернатив, пустой белый экран или поток нестилизованного контента, риска не стоит. Наилучшее решение — следовать спецификации HTML и загружать стили в разделе HEAD.

Для ещё большего ускорения загрузки сайта объединённый CSS-файл можно перенести вниз страницы, перед закрывающим тегом

Источник