Услуги

  • Сайты

  • Контент

  • Продвижение

  • Битрикс24

Все услуги Оплата
Все услуги Оплата

Поиск

  • Разработка интернет-магазина под ключ
  • Разработка сайтов
  • Разработка леднигов
  • Разработка на битрикс24
  • Разработка на Вордпресс

Кейс: повышаем скорость загрузки сайта на Битрикс

Как скорость сайта влияет на продажи

Быстродействие сайта — не только вопрос удобства пользователей, но и важный аргумент для поисковых систем. При прочих равных быстрые сайты Google и Яндекс показывают более охотно, и с каждым годом значение этого фактора растет (о значении скорости загрузки вы можете почитать в блоге Google). В свете этих тенденций владельцы веб-ресурсов и веб-мастера всё чаще обращаются к нам с вопросом о том, как ускорить сайт на Битрикс и оптимизировать его работу.

Как оценить производительность и скорость сайта

Наиболее популярный инструмент — Google PageSpeed Insights. Он анализирует скорость загрузки страниц на мобильных устройствах и десктопах, затем даёт советы по увеличению скорости. На основании десятков параметров выставляется общая оценка по шкале от 1 до 100. Результат от 90 баллов и выше считается хорошим, от 50 до 90 – средним. Меньше 50 баллов? Страница загружается слишком медленно.

Инструмент PSI с помощью технологии Lighthouse получает различные показатели скорости загрузки страницы:

  • первая отрисовка контента;
  • время загрузки достаточной части контента;
  • индекс скорости загрузки;
  • время окончания работы ЦП;
  • время загрузки для взаимодействия;
  • приблизительное время задержки при вводе.

По каждому показателю дается отдельная оценка с пометкой в виде определенного значка.

Banner

Аудит Lighthouse делится на три части:

  1. Оптимизация. Рекомендации по улучшению показателей скорости загрузки страницы. Также здесь указывается, насколько быстрее будет загружаться страница, если реализовать ту или иную рекомендацию.
  2. Диагностика. В этом разделе представлены сведения о соответствии страницы рекомендациям в отношении веб-разработки.
  3. Успешные аудиты. В этом разделе перечислены аудиты страницы, которые были пройдены с хорошим результатом.

Какие инструменты анализа есть в Битриксе

Для сайтов на Битрикс используется встроенный сервис «Скорость сайта». Он учитывает качество разработки сайта, качество хостинга и доступность сайта по сети. В отличие от большинства сервисов, замеряющих скорость загрузки сайта из внешних точек, «Скорость сайта» берёт реальную скорость загрузки страницы у 1000 последних посетителей. Посетители все время меняются — меняются и данные вместе с ними.

На Рабочем столе в административной части есть гаджет, показывающий текущую скорость загрузки страниц вашего сайта:

Banner

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

Banner

Скорость рассматриваемого сайта до оптимизации

Изначально результаты рассматриваемого сайта были очень низкими:

01

/ 02

Нашей задачей стало повысить скорость сайта на Битрикс, а также вывести его в «зеленую» зону на широких экранах и «желтую» — на смартфонах (по оценкам того же Google PageSpeed Insights).

Повышение быстродействия Битрикс шаг за шагом

Скрипты, стили, HTML-код

Объединение и сжатие JS / CSS. Удивительно, но многие разработчики и веб-мастера до сих пор игнорируют инструменты, которые в Bitrix есть, что называется, “в коробке”. В числе таких — функции оптимизации скриптов и стилей в настройках главного модуля. Как показывает практика, одно только их использование позволяет повысить оценки на 10-20 баллов!

Внимание! Использование данного функционала требует осторожности и тщательного тестирования. Довольно часто объединение и перемещение JS приводит к конфликтам в коде сайта, неработоспособности отдельных скриптов и т.д. Таким образом, после включения данных опций необходимо проверить работу сайта (в т.ч. корзину, оформление заказа и т.д.). Возможно, потребуется доработать код или даже отказаться от отдельных приемов оптимизации.

Banner

Ещё несколько слов об оптимизации JS. Несложно заметить, что Google PageSpeed Insights уделяет скриптам на сайте пристальное внимание, и даже незначительная (казалось бы) оптимизация может заметно повысить оценки сайта. В нашем конкретном случае недовольство анализатора вызывал Jivosite. Хотя в теории этот онлайн-чат загружается асинхронно (т.е. не задерживает загрузку веб-страницы), он регулярно фигурирует среди замечаний и приводит к снижению рейтинга.

Мы поступили достаточно просто: отложили загрузку Jivosite в коде сайта на 5 секунд, когда страница в целом успевает полностью загрузиться. Юзабилити интернет-магазина от этого только выигрывает, ведь мало кому интересен онлайн-чат в первые 5 секунд посещения, а Google PageSpeed моментально отреагировал на это мероприятие повышением оценки.

Оптимизация и перемещение CSS-файлов. Сжатие и объединение файлов стилей в Битрикс выполняется с помощью настроек, которые мы уже описали выше. Но если скрипты JS Битрикс охотно переносит в конец кода (чтобы они не блокировали загрузку), то файлы стилей чаще всего остаются в head. С точки зрения отрисовки страницы это правильно, ведь при загрузке сайт выглядит изначально правильно и красиво, однако снижение оценок Google PageSpeed в данном случае почти что неизбежно.

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

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

Banner

Избавляемся от лишнего кода. Одним из распространенных замечаний Google PageSpeed является требование отложить или удалить неиспользуемые стили. То же самое касается HTML-кода и JS-скриптов, которые могут подтягиваться при загрузке страницы, но нигде не использоваться. Причины существования таких фрагментов могут быть разными:

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

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

Кэширование и сжатие на Битрикс

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

Дела серверные. Без привязки к Bitrix как таковому со стороны сервера потребуется:

  • возможность кэширования изображений, JS, CSS и других статических файлов;
  • кэширование PHP (например, OPCache);
  • подключение GZIP-сжатия.

Особых отличий Битрикса от других платформ в этом смысле нет, а сложности, с которыми может столкнуться оптимизатор, могут быть очень разными. Если в одном случае все эти методы включаются на виртуальном хостинге в пару кликов, то в другом может потребоваться трудоемкая настройка VPS с установкой дополнительных расширений, оптимизацией параметров PHP и прочим. На этой теме мы не будем останавливаться отдельно — слишком она объёмна и, в целом, не относится к Битриксу.

Скажем только, что в нашем случае почти все перечисленные методы уже использовались. Нам оставалось только добавить к кэшированию некоторые типы файлов (через .htaccess) и повысить объем памяти, потребляемый OPCache (ресурсы сервера это позволяли).

Кэширование компонентов. Одной из «фишек» Битрикс, которую важно учитывать при оптимизации скорости сайта / интернет-магазина, является автокеширование компонентов (управляемый кэш). По умолчанию этот функционал включен, однако и он зачастую требует внимания, более тонкой настройки. В нашей практике мы часто сталкивались с такими ошибками разработки:

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

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

Banner

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

Для тех, кто уже пробовал проверять свой сайт в Google PageSpeed Insights, уже очевидно, что оптимизация картинок может стать настоящей головной болью для разработчика / вебмастера. И если попытаться выполнить все требования Google буквально, то в переработке проекта можно завязнуть на много часов, дней и недель. По этой причине мы придерживаемся следующего мнения: к любой оптимизации надо подходить без фанатизма и погони за каждым отдельным баллом.

Вместе с тем, есть методы, которые мы с удовольствием применяем для ускорения интернет-магазина на Битрикс — для повышения оценок Google PageSpeed и фактического быстродействия в целом:

Сжатие картинок. Для этого можно использовать модули для Bitrix (преимущественно платные) или предварительно “прогонять” изображения через специализированные сервисы или программы. Так или иначе, это позволяет значительно (!) уменьшить вес картинок без ущерба для качества. И это более чем реально!

Banner

Использование подходящих форматов. Главным практическим преимуществом png является возможность применения прозрачного фона. Если вам это нужно, то выбор в пользу png предопределен. Но зачастую изображения в данном формате размещаются без веских на то оснований, а ведь они заметно “тяжелее” аналогов в jpg. Почти на каждом оптимизируемом сайте мы находим такие недочёты и исправляем им – с заметным результатом в PageSpeed, да и для пользователей тоже.

Оптимизация размеров. Совершенно типичной является ситуация, когда в контейнер на странице размером 300х200 пикселей вставляется изображение 1200х800 пикселей – со всеми вытекающими отсюда последствиями. Обычно так случается, если сайт разрабатывался или администрировался неаккуратно и наспех, без внимания к деталям.

Banner

LazyLoad. Крайне благосклонно Google PageSpeed относится к отложенной загрузке изображений, при которой изображение подгружается с сервера только при попадании в область видимости пользователя. Реализовать такой принцип можно с помощью специальных модулей для Битрикс или вручную, подключив библиотеку jQuery LazyLoad.

Стоит отметить, что на большом и давно работающем сайте оптимизация и сжатие изображений может стать очень трудоемким и утомительным мероприятием, ведь очень много графического контента ранее уже размещено с ошибками. Его надо сжимать, урезать размеры, менять формат и т.д. Но заниматься этим необходимо, ведь во многих случаях вес страницы при этом падает на мегабайты (!). Поисковые системы такие усилия обязательно оценят, а пользователи мобильных устройств точно скажут «спасибо».

Результаты оптимизации загрузки сайта на Bitrix

В рассматриваемом примере нам удалось достичь следующих результатов:

01

/ 02

Таким образом, оценка в Google выросла с 52 до 95 на десктопе и с 12 до 67 на мобильных устройствах. Заметно выросла и фактическая скорость загрузки сайта.

Когда нужно повышать скорость загрузки сайта на Битрикс

Можно добиться ещё больших оценок. Но каждый раз при решении таких задач возникает вопрос разумного компромисса, ведь каждый последующий балл требует всё больших трудозатрат, и в какой-то момент они становятся неадекватны результату. Кроме того, многое зависит от сервера, и иногда для того, чтобы разогнать сайт / интернет-магазин на Битрикс может потребоваться более мощный VPS/VDS (виртуальный выделенный сервер).

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

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

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

Ускорение базы данных

Тема быстродействия баз данных также очень обширна. Она касается как относительно простых вопросов, например, оптимизации таблиц и удаления лишних данных, так и достаточно сложных тем — скорости работы служб MySQL в конкретном серверном окружении.

Тонкая настройка сервера

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

Хотите обсудить проект?

Оставьте ваш номер телефона и наш менеджер свяжется с вами в ближайшее время

Над кейсом работали