Ускоряем сайт на Битриксе: оборудование, окружение и ещё с десяток деталей

Как правильно настроить сайт на Битриксе, чтобы пользователям не приходилось долго ждать загрузки страниц? Мы пригласили тимлида диджитал-агентства Адикт Кирилла Кулагина рассказать о тонкостях настройки CMS.

Содержание

Оборудование сервера

Отключение неиспользуемых модулей

Фасетные индексы

CDN

Композитный сайт

Подключение файлов скриптов и стилей

Подключение лишних файлов JS и СSS в компонентах

Кэширование

Оптимизация загрузки изображений

Подготовка фронтенда для сайта

Агенты в Битриксе

Оборудование сервера

Битрикс — требовательная к производительности оборудования система. Иногда она требует специфических настроек сервера. Так что, лучше размещать сайт на выделенном сервере (VDS), а не виртуальном хостинге (shared hosting).

Минимальные требования к серверу такие:

• двухъядерный процессор;
• 2 Гб оперативной памяти;
• 20 Гб SSD-диск.

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

Отключение неиспользуемых модулей

По умолчанию в Битриксе включено много модулей, и большинство из них не используются. Например, «Конструктор отчётов», «Веб-аналитика», «Техподдержка», «A/B тестирование». Такие модули, во-первых, могут замедлять работу сайта — из-за них выполняется лишний код при инициализации ядра. Во-вторых они занимают лишнее место на диске. Отключить и удалить модули можно в админке, на странице Настройки -> Настройки продукта -> Модули.

Фасетные индексы

Если вы используете Умный фильтр от Битрикса, обязательно создайте фасетные индексы. Они настраиваются на странице Контент->Инфоблоки->Фасетные индексы. Это значительно ускорит работу Умного фильтра.

CDN

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

Имеет смысл использовать CDN, если у сайта много статического контента (например, большой каталог товаров) и много посетителей в разных странах или регионах. В Битриксе есть встроенный модуль CDN. Он включается на странице Настройки -> Облако 1С-Битрикс -> Ускорение сайта (CDN). Можно использовать и сторонние решения.

Композитный сайт

Модуль композитного сайта ускоряет загрузку страниц сайта за счёт кэширования на бэкенде html-кода этих страниц. В результате страница делится как бы на две части:

1. Статичный html-код, который просто отдаётся веб-сервером, без использования php.
2. Динамические области, обновляемые через AJAX.

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

• Насколько ваш сайт подходит для этой технологии. Бессмысленно подключать композитный сайт на страницы, почти целиком состоящие из динамических областей;
• Решение увеличит стоимость поддержки сайта — композит придётся учитывать при разработке фронтенда сайта и пользовательских компонентов;
• Эта технология несовместима с CDN, так что придётся выбрать что-то одно.

Включается и настраивается композитный сайт на странице: Настройки” -> Настройки продукта -> Композитный сайт -> Настройки. Как внедрять описано в обучающем курсе для разработчиков на Битриксе.

Подключение файлов скриптов и стилей

Битрикс позволяет подключать минифицированные версии файлов, объединять их и переносить подключение js-скриптов в конец страницы. Как обычно, здесь может быть несколько подводных камней:

• Битрикс сам по себе не минифицирует файлы, он лишь подключает минифицированные версии таких файлов. То есть, если в коде сайта подключается файл script.js, то при активации опции подключения минифицированных файлов Битрикс будет искать в этой же директории файл с именем script.min.js;
• Все файлы скриптов и стилей должны быть подключены на сайт с использованием API Битрикса. Если файл подключен просто через html-тег (например <link href="/css/style.css" rel="stylesheet">), то участвовать в оптимизации он не будет;
• Такая оптимизация предъявляет определённые требования к качеству написания фронтенда сайта. При неаккуратно написанном фронтенде при объединении файлов и переносе подключения в конец страницы возможны различные ошибки;
• Если объединить все стили сайта в один файл, то он может получиться слишком большим и будет блокировать загрузку всей страницы, пока не загрузится сам. В этом случае лучше выделить основные стили сайта (например стили для хедера, футера, контейнера контентной области) в отдельный файл и подключать их сверху страницы, чтоб при загрузке не блокировать основной контент и показать минимально необходимое оформление страницы. Все остальные же стили объединить и подключать внизу страницы. Такое подключение уже нужно делать руками.

Включаются эти оптимизации в настройках главного модуля, на странице Настройки -> Настройки продукта -> Настройки модулей -> Главный модуль, вкладка Настройки, секция Оптимизация CSS.

Подключения лишних файлов JS и CSS в компонентах

Многие компоненты Битрикса, как стандартные, так и загруженные из маркетплейса, могут подключать дополнительные файлы CSS и JS на страницу. Такие файлы чаще всего нужны для работы стандартных шаблонов компонента. Это могут быть JS-библиотеки наподобие JQuery, части стандартной JS-библиотеки Битрикса или CSS-файлы из фреймворка Bootstrap. При использовании пользовательских шаблонов компонентов подключение этих файлов не нужно. Оно может замедлять загрузку страницы или даже приводить к различным ошибкам со стороны фронтенда.

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

Нужно посмотреть какие файлы подключаются на каждой уникальной странице сайта и, если обнаружатся лишние, то нужно проверить все компоненты на этой странице.

Кэширование

Отсутствие кэширования запросов к БД – частая проблема, из-за которой может замедлять сайт. Выяснить, есть ли на сайте некэшируемые запросы, можно двумя способами:

1. Нажать кнопку Отладка в панели администратора в публичной части сайта, после чего для каждого компонента/блока кода на странице будет выведено время исполнения и количество запросов к базе;
2. Из админки сайта запустить тестирование производительности. Для этого открыть на странице Настройки” -> Производительность” -> Панель производительности и походить по страницам в публичной части сайта. После завершения тестирования на вкладке Разработка будет выведен список страниц с указанием на ошибки разработки — это как раз отсутствие кэширования у компонентов и количество запросов к базе для каждой страницы.

Если после такой проверки на сайте найдены некэшируемые компоненты, то прежде всего надо проверить что кэширование вообще включено в настройках сайта. Это делается на странице: Настройки -> Настройки продукта -> Автокеширование. Кеширование компонентов и управляемый кеш должны быть включены.

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

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

Оптимизация загрузки изображений

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

1. При выводе изображения на сайте ресайзить его под размер блока, где оно находится;
2. Уменьшить вес изображений с сохранением качества. Это можно делать либо загружая на сайт уже оптимизированные изображения, либо установить модуль из маркетплейса для оптимизации и конвертации изображений. Вот пример такого модуля.
3. Отложить загрузку изображений при помощи lazy load. Об этом подробнее рассказываю в следующем пункте — подготовка фронтенда для сайта.

Подготовка фронтенда для сайта

Во время разработки фронтенда сайта должны быть сделаны следующие оптимизации:

1. Минимизация DOM-дерева, которая снижает время обработки html-кода браузером;
2. Подготовка минифицированных версий css и js файлов, для ускорения загрузки — о ней я рассказывал в разделе «Подключение файлов скриптов и стилей»;
3. Сборка фронтенда не одним бандлом, а с разбиением по страницам. А в идеале — по компонентам Битрикса. Это необходимо для того, чтобы на каждой странице сайта подгружались только нужные ресурсы;
4. Оптимизация картинок для оформления по размеру и весу;
5. Подгрузка картинок в контентной области страницы через lazy load на страницах с большим количеством изображений. Картинки, не показывающиеся на первом экране, не должны замедлять загрузку страницы;
6. Минимизация использования js-библиотек в пользу нативного кода.

Агенты в Битриксе

Агенты — это технология, которая позволяет выполнять различных задачи в фоновом режиме с заданной периодичностью. Это, например, такие задачи как отправка различных оповещений пользователям, удаление временных файлов.

У агентов есть два варианта запуска:

1. На хитах, то есть во время какого-то действия пользователя на сайте;
2. При помощи утилиты Сron.

С точки зрения быстродействия сайта второй вариант является наиболее предпочтительным. Это связано с тем, что запуск агентов во время генерации страницы сайта для пользователя приведёт к значительному замедлению скорости загрузки вплоть до отваливания скрипта по таймауту.

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

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

Если сделать всё правильно, сайт на Битриксе будет работать производительно. А это хорошо повлияет и на SEO, и на показатели конверсии.