Что учесть в разработке интернет-магазина на Bitrix, чтобы не переплачивать за исправление ошибок

Cоставили чек-лист для тех, кто собирается заказывать разработку или делает сайты сам. Собрали опыт команды Antro в ёмкую памятку, чтобы перепроверить себя или подрядчика.

Что учесть в разработке интернет-магазина на Bitrix, чтобы не переплачивать за исправление ошибок

Определитесь, нужен ли вам Bitrix

Большая часть наших проектов — российские eCommerce-проекты. Для многих из них мы разрабатываем интернет-магазины на 1С-Bitrix, чтобы было удобнее клиенту. У этой системы управления есть готовые интеграции с различными CRM, платежными способами и службами доставки.

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

У Bitrix есть ограничения. Вот несколько, которые мы выделяем:

  • Дорогая разработка. Специалисты, которые работают на 1C-Bitrix, берут большие гонорары за работу. Вилка зарплат для таких специалистов в регионах — 80–180 тысяч, в столице — 120–300. Вам придётся оплатить лицензию для разработки, а потом потратиться на найм специалиста;
  • Для обновления сайта потребуется покупать лицензию. Её придётся обновлять, если вы оплачивали подписку более года назад;
  • Многие популярные CMS подвержены взломам. Иногда в старых версиях систем управления находят уязвимости, которые используют злоумышленники. Bitrix здесь не исключение — в июне хакеры атаковали несколько десятков сайтов и заменили информацию на них.

Мы рекомендуем использовать Bitrix только для интернет-магазинов. Эту CMS легко встроить в существующие бизнес-процессы, поэтому вы легко сможете запустить продажи и в интернете.

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

Ануар Мендубаев, Team Lead Developer at Antro

Выберите хостинг

1C-Bitrix требователен к производительности сервера. Если подобрать хостинг неправильно, панель управления может загружаться невыносимо долго, а сайт начнёт зависать, когда магазином будут пользоваться сразу много пользователей.

Существует три вида хостингов, у каждого из них — свои плюсы и минусы:

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

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

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

Виртуальный выделенный сервер (VPS). При этом типе хостинга вы арендуете место на физическом сервере. На нём вы можете установить собственную ОС и развернуть решение, которое требует много ресурсов.

Такое решение хорошо подходит для интернет-магазинов и при этом легко масштабируется: если вам потребуется больше дискового пространства для проекта, вы сможете докупить его у поставщика услуг.

Главная издержка при использовании VPS — обслуживание. Вам потребуется специалист, который настроит и будет обслуживать работу с хостингом.

Выделенный (dedicated) сервер. С таким хостингом вы арендуете физический сервер, с которым можете вести работу. Схема работы похожа на VPS, но если в первом случае вы подключаете себе лишь часть сервера, то во втором вы снимаете его целиком.

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

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

Чтобы проверить, подходит ли хостинг по техническим требованиям, у 1С-Bitrix есть специальный скрипт. Его нужно загрузить на хостинг, открыть в браузере и нажать кнопку «Начать тестирование».

Подготовьте SEO

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

Заведите файл robots.txt. Это документ с инструкциями для поисковых систем. В нём вы задаёте параметры, какие страницы можно индексировать, а какие — нельзя. С помощью файла получится управлять трафиком и скрыть технические страницы из поисковых систем.

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

Настройте URL. Обозначение ссылок тоже влияет на трафик. Постарайтесь подписывать их вручную, а не механически — так ссылка будет выглядеть привлекательно в выдаче. Чтобы она помещалась в поисковике, старайтесь уместить её в 75 знаков. Например: antro.cx/cases.

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

Что учесть в разработке интернет-магазина на Bitrix, чтобы не переплачивать за исправление ошибок

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

На скриншоте — пример того, что происходит в сообщении с ссылками на кириллице
На скриншоте — пример того, что происходит в сообщении с ссылками на кириллице

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

Перестрахуйтесь и настройте страницу ошибки. Добавьте на неё контент, который поможет удержать на сайте пользователя, если он столкнётся с ошибкой.
Перестрахуйтесь и настройте страницу ошибки. Добавьте на неё контент, который поможет удержать на сайте пользователя, если он столкнётся с ошибкой.

Добавьте Lazy-load для медиаконтента. С таким типом загрузки страница у пользователя открывается не разом, а асинхронно. Например, по мере прокрутки сайта или по нажатию на разные элементы. Такая загрузка экономит время пользователя и объём трафика, который он загружает.

Пропишите микроразметку сайта. Это атрибуты и теги, которые помогают поисковым системам отображать нужную информацию с вашего сайта. Подготовьте её с помощью JSON-LD или OpenGraph для карточек товаров, «хлебных крошек» и контактной информации. Подробную инструкцию расписывать не будем — она потянет на отдельную статью. Пишите, если хотите прочитать :)

Получите SSL-сертификат. Он нужен для того, чтобы ваш сайт отображали поисковые системы и корректно открывали браузеры. Такой сертификат гарантирует, что соединение безопасно, и данные пользователя не попадут к злоумышленникам.

Проверьте результаты Core Web Vitals. Это система оценки сайтов от Google, которая помогает компании оптимизировать поисковую выдачу. Она учитывает три показателя:

  • LCP (Largest Contentful Paint) — скорость загрузки основного контента. Метрика отражает, насколько быстро отображается самый крупный блок на странице;
  • FID (First Input Delay) — время ожидания до первого взаимодействия с контентом. Он замеряет время между действием пользователя до момента, когда браузер может обработать эти действия;
  • CLS (Cumulative Layout Shift) — совокупный сдвиг вёрстки. Показатель отражает, насколько стабильно держится вёрстка при прогрузке страницы. Например, не сбивается ли текст при появлении рекламы.
Что учесть в разработке интернет-магазина на Bitrix, чтобы не переплачивать за исправление ошибок

Замерить показатели и сгенерировать отчёт можно при помощи Lighthouse. Для этого в браузере нужно открыть нужный сайт, нажать F12, выбрать вкладку Lighthouse → Desktop → Generate records.

Пример отчёта, который мы сгенерировали через Lighthouse
Пример отчёта, который мы сгенерировали через Lighthouse

Обеспечьте безопасность

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

Разворачивайте проект локально, на устройстве разработчика. Очевидная, но важная рекомендация: не стоит вносить изменения сразу в продакшн. Лучше подготовьте нововведения локально, протестируйте их работу, и лишь потом загружайте на сервер.

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

  • Разверните сервер для разработки, например, antrodev.ru — на него можно загрузить локальную версию сайта с новыми фичами. Не забудьте отключить для площадки индексацию, а ещё лучше — сделайте вход по паролю, чтобы никто не получил доступ к проекту до публикации. С помощью такого сервера можно отладить текущую версию или показать её заказчику сайта;
  • Проведите тесты. Все площадки (local, dev, staging, production) должны поддерживать актуальное состояние — так можно полноценно оценить работу всех частей сайта.
  • Сделайте бэкап рабочей версии сайта и загрузите нововведения в production. Только после тестов на локальном компьютере и тестов на рабочем сервере. Так избежите ситуации «я чёта нажал, и всё сломалось».

Если не разбивать работу на этапы, а надеяться на свой профессионализм, можно упустить важные детали и не оттестировать их до конца. Тогда на продакшене окажется нерабочая версия: например, будет кривая верстка или важная страница покажет Internal Server Error.

Ануар Мендубаев, Team Lead Developer at Antro

Регулярно делайте бэкапы и снапшоты. Копий много не бывает. Чем чаще вы их будете делать, тем проще будет исправить неполадку, если разработка пойдёт не по плану. Мы в Antro храним копии проектов в течение месяца, разбивая бэкапы на интервалы в три дня. Если что-то идёт не так, всегда можем откатиться к нужной версии и исправить ошибку.

Используйте систему контроля версии. Помимо регулярных бэкапов разработчикам следует использовать Git или другую систему управления версиями. Она поможет легко вести командную разработку, отслеживать изменения и в случае форс-мажора — откатиться к предыдущей версии.

Проведите тесты

Самая распространённая ошибка при разработке сайтов — сбой вёрстки. Из-за этого с компьютера интерфейс может выглядеть удобно, а с телефона уже ничего не получится разобрать. Как проверить, что у вас всё работает исправно:

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

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

Проверьте валидность кода. Так вы убедитесь, что разметка сайта сделана правильно, по стандартам разработки. Выявить ошибки можно с помощью валидатора.

Внесли vc.ru в валидатор. Вот, на что сервис предлагает обратить внимание
Внесли vc.ru в валидатор. Вот, на что сервис предлагает обратить внимание

Замерьте скорость работы страниц. Это поможет определить, насколько хорошо оптимизирован сайт. Если скорость прогрузки и отклика низкая, стоит проверить, нет ли в коде частей, которые замедляют работу. Оценить можно с помощью PageSpeed Insights, GTmetrix или Pingdom Website Speed Test.

Пример: замерили скорость для vc.ru в PageSpeed Insights
Пример: замерили скорость для vc.ru в PageSpeed Insights

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

Пройдите по пути пользователя. Если разрабатываете интернет-магазин, примерьте на себя роль покупателя: воспользуйтесь каталогом, выберите товар и добавьте его в корзину, примените промокод, оформите заказ. Это поможет понять, все ли функции работают правильно.

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

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

Кратко: что предусмотреть при разработке сайта на Bitrix

Решите, нужен ли вам вообще Bitrix. Мы рекомендуем использовать его для интернет-магазинов. Такое решение поможет подключить платёжные системы и учёт, управлять ценами и распродажами, работать со службой доставки.

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

Обеспечьте SEO. Заложите условия для поисковой оптимизации ещё на уровне разработки. Тогда вам придётся прикладывать меньше усилий, чтобы продвигать сайт в дальнейшем.

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

Протестируйте готовый продукт. Проверьте, корректно ли работает вёрстка. Посмотрите, правильно ли сайт отображается на разных устройствах и соответствует ли он макету. Примените разные функции сайта и проверьте, правильно ли они действуют. Идеальный вариант — заказать независимый аудит.

Если планируете разрабатывать или переделывать интернет-магазин — прочитайте наши регламенты разработки. С ними вы не упустите важные мелочи. Либо напишите нам, и мы сделаем сайт за вас

4747
144 комментария

Учесть: не использовать битрикс

63
Ответить

Первое правило интернет-магазина на битрикс - не пользоваться битрикс

3
Ответить

Комментарий недоступен

Ответить

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

23
Ответить

Тут не согласен, если речь про CMS-ки, то ставка может сильно различаться, все зависит от скиллов разработчика. В любом случае, использование CMS делает разработку дешевле, чем на самописном решении. А для адекватно работающего бизнеса оплатить лицензию раз в год не составит проблем

8
Ответить

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

2
Ответить

С другими платформами часто не программисты работают, а просто те кто знают платформу . Кто на вордпресск работает дай бог html читать может. Таких встречала.

Ответить