Март 16, 2019, Автор Фролов Олег

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

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

Уже ни для кого не секрет то, что быстродействие сайта — это не только вопрос удобства пользователей, а и важный аргумент для поисковых систем. При прочих равных факторах быстрые сайты Google и Яндекс показывают более охотно, чем медленные, и с каждым годом значение этого фактора растет. О том, какое значение скорости загрузки уделяет, например, поисковик №1 в мире, Вы можете почитать в блоге Google.

Неудивительно, что в свете этих тенденций владельцы веб-ресурсов и вебмастера всё чаще обращаются к нам с вопросом о том, как ускорить сайт на Битрикс и оптимизировать его работу. В нашем сегодняшнем кейсе мы рассмотрим пример повышения быстродействия сайтов на Битрикс по Google PageSpeed Insights — инструмента для оценки скорости загрузки веб-страниц. Этот сервис помогает определить, насколько быстрым сайт считает Google, насколько он соответствует требования и стандартам поисковой системы в части быстродействия на мобильных устройствах и десктопе.

Как было?

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

Оценка быстродействия сайта на Битрикс (десктоп)
Оценка быстродействия сайта на Битрикс (мобильные устройства)

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

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

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

Объединение и сжатие JS / CSS

Удивительно, но многие разработчики и вебмастера до сих пор игнорируют инструменты, которые в Bitrix есть, что называется, «в коробке». В числе таких — функции оптимизации скриптов и стиле в настройках главного модуля. Как показывает практика, одно только их использование позволяет повысить оценки на 10-20 баллов (!).

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

Объединение и сжатие JS / CSS в Битрикс

Ещё несколько слов об оптимизации JS

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

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

Отложенная загрузка Jivosite

Оптимизация и перемещение CSS-файлов

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

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

Надо ли использовать CDN Битрикс?

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

Надо ли использовать CDN Битрикс

Избавляемся от лишнего кода

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

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

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

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

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

Дела серверные

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

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

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

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

Кеширование компонентов

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

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

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

Кеширование компонентов Битрикс

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

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

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

Сжатие картинок

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

Сжатие изображений

Использование подходящих форматов

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

Оптимизация размеров

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

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

LazyLoad

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

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

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

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

Результат оптимизации быстродействия сайта на десктопе Битрикс
Результат оптимизации быстродействия сайта на мобильных устройствах Битрикс

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

А можно ещё выше?

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

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

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

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

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

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

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

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

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

Над задачей работал:

CEO Олег Фролов
Олег Фролов
CEO, партнер
Продажи. Управление проектами. SEO. Разработка сайтов на CMS Wordpress и Битрикс.

Тех. оптимизация веб-проекта

Читайте кейс о технической и SEO-оптимизации сайта нашего клиента. Валидация кода, микроразметка и много другое!

Редизайн интернет-магазина на Битрикс

Посмотрите ещё один интересный кейс, связанный с редизайном сайта на CMS 1С-Битрикс и повышением его юзабилити!

Оставить комментарий

avatar
  Подписаться  
Уведомление о

Scroll Up