битрикс не переносить скрипт вниз
Битрикс: перемещение 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-файл можно перенести вниз страницы, перед закрывающим тегом