Разработка SEO оптимизированных высокопроизводительных фронтенд приложений на базе 1С-Битрикс.

Приземление решения А:N

Артем Житник

Артем Житник

Фото Евгений Озеров на Unsplash

Disclaimer

Уважаю ребят из А за их достижения на рынке, за то что сумели создать линейку популярных продуктов. В частности А:N, с которым приходилось сталкиваться, решает проблему развертывания сайта для многих бизнесов. Решение универсальное, достаточно гибкое, что несет в себе как плюсы, так и минусы. Свой исследовательский опыт никому не навязываю, ни к чему не призываю.

Проблема

Бизнесам обычно нужно быстро получить работающий сайт. Они не готовы ждать недели и месяцы когда их ТЗ будет реализовано на голом Битриксе. Покупается решение, производится его настройка, стилизация, допиливание напильником и voilà! Сайт какое-то время работает, обрастает данными, начинает подтормаживать. Клиент задумывается о SEO, проверяет страницы в PageSpeed, а там все печально. Следуя рекомендациям PageSpeed, улучшаем ситуацию ограниченным. Ситуация становится немного лучше, но не так как хотелось бы.

Ставятся задачи по реализации бизнес-процессов, требующих доработки решения. Делаем, разбираясь в дебрях A:N или любого другого "комбайна". В долгую, такой режим разработки отнимает ресурсы, да и удовольствия не приносит.

И что делать?

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

Упорядочивание PHP кода

А:N позволяет строить страницы из блоков разных вариантов, как конструктор Lego. Несколько вариантов футера, видов каталога, слайдеров на главной. Классно, не правда ли? Да, но когда все уже настроено, зачем нам лишняя логика? К примеру, мне нужно модифицировать слайдер баннеров на главной. Иду в файл index.php, а там пусто. Хм... Иду в footer.php, там вызывается блок подключения блока баннера, какого именно по коду неизвестно - данные берутся из настроек модуля A во время выполнения скрипта. Отладка в помощь!

Тут все упростил, вставил вызовы компонентов в местах где они должны логически вызываться. От настроек модуля ушел. Лишние неиспользуемые, в рамках данного проекта, шаблоны компонентов удалил. Код изобиловал вызовами процедур нескольких базовых для модуля А классов (файлы большие, там все в куче - и html, и стили, и логика). Ушли от них тоже, заменили стандартными процедурами Битрикса где возможно, в остальных случаях - самописными аналогами. Код стал располагаться в ожидаемых местах, его стало можно читать.

Много было выкинуто к этому моменту, но то что осталось тоже требовало переработки. Проведен рефакторинг шаблонов, компонент за компонентом. Монстров типа sale.order.ajax и sale.basket.basket особо не трогал, а по остальным пробежался основательно. Выяснилось что многое нами не используется, почистил.

Чтобы не показалось что я гоню на А, код стандартных шаблонов компонентов Битрикса порой тоже вызывает вопросы. Да и интеграторы решения, предыдущая студия, внесли свою лепту в хаос. Что вы хотите, если в официальных инструкциях Битрикс учит copy-paste методам. Заходишь в како-нибудь шаблона, а там кусок кода с пол-вселенной закомментирован в надежде на то что он когда-то может понадобиться. Никогда не понадобится, проверено временем. Страдает репутация платформы среди разработчиков. А ведь на Битриксе, на PHP, тоже можно делать красивые вещи, а не только зарабатывать.

В итоге, подошли к возможности безболезненно отключить модуль A. Сайт продолжил работать!

JS/CSS

Имея очищенный php, мы можем определить используется ли то или иной стиль или javascript код где-нибудь или нет. Мощь IDE в помощь (у меня PhpStorm)!

В решение входит общий bundle содержащий стили всех используемых компонентов, стили текущей темы, стили адаптивной верстки и т.д. Все это достаточно большие файлы, особенно первый. PageSpeed подсказывает сократить стили. Разобрал порядка 40 000 строк неминифицированного css. Как вспомню, вздрагиваю. Code-splitting вручную. Часть стилей раскидал по компонентам, используемые в разных местах - выделил в отдельные небольшие css с подключением там где надо через Asset::addCss() в component_epilog.php и файлах страниц, немалая часть неиспользуемых стилей была просто выкинута.

Подобным образом разделял js bundle. Стоит отметить, что все время этой разделки, на сайте что-то отваливалось, естественно. То верстка поплывет, то js в ошибке на каком-то компоненте. Преодолели эти неприятности.

Был наведен порядок подключаемыми внешними библиотеками, всяческими слайдерами и т.д. Половина из них в проекте не использовалась. Собрал оптимизированную версию Bootstrap 3, только с используемыми компонентами.

Вообще, конечно, можно увлечься рефакторингом и заниматься только им. А ведь есть еще задачи по бизнес логике. Клиент будет не очень доволен, ведь внешних изменений, как будто не происходит.

После принятых мер страницы начали шевелиться быстрее!

Итог

Цели оптимизации достигнуты. При этом затраты превысили стоимость самого решения. По хорошему, нужно было сразу делать свое решение на голом Битриксе, но это возможно в идеальном мире. Как же здорово ходить по чистому отшлифованному коду, в котором практически нет ничего лишнего. Проект таким образом может развиваться в любом заявленном заказчиком направлении, он жив!

    Битрикс
    SEO
    Рефакторинг

©2024 ReactiveBx работает на «1С-Битрикс: Управление сайтом» и Next.js