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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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