Причина обращения.

Основными причинами были следующие:

• ·         Уход от системы Битрикс к гибкой платформе;
• ·         Текущий сайт работал медленно;
• ·         Текущий сайт не соответствовал новым требованиям по продвижению в интернете;
• ·         Текущий сайт не имел запаса гибкости для эффективного масштабирования и развития;
• ·         Страницы сайта часто игнорировались поисковыми системами;
• ·         Текущий сайт работал с перебоями;

Поставленные задачи. Цели проекта.

• ·         Сайт должен работать бесперебойно при нагрузке 500 000 просмотров в сутки;
• ·         Должна быть реализована технология фасетного поиска с генерацией заголовков;
• ·         На сайте должен быть удобный поиск с автоматическим исправлением в случае ошибки ввода;
• ·         Сайт должен включать все 7 городов присутствия, с пересчетом стоимости при смене гипермаркета;
• ·         Сайт должен обмениваться данными с внешними сервисами и внутренними системами компании;
• ·         Взаимодействие с пользователем должно происходить самым удобным для него способом;
• ·         Как результат должны вырасти конверсия в продажи и средний чек;

 

Процесс разработки проекта. Кратко и талантливо.

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

После этого было проведено создание экранных форм (блок схем), на которых схематически были изображены положения основных блоков на экранах будущего сайта, вид корзины, форма обратной связи и т.д.

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

После процесса разработки последовал этап интеграции с 1С по окончании которого было проведено экстремальное тестирование связи 1С с сайтом. В рамках него происходили постоянные выгрузки справочника номенклатуры с ценами на сайт весом в несколько десятков мегабайт. Главным аспектом экстремальности была частота выгрузки – каждые 10 минут. В результате интеграции хорошо себя показала.

В конце проекта были этапы тестирования системы заказчиком и перехода в опытную эксплуатацию. Система была полностью принята заказчиком.

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

 

Результаты проекта.

В результате через 6 месяцев компания МЕГАСТРОЙ получила современный, быстрый и удобный для посетителей интернет магазин с присутствие во всех 7ми городах. Наиболее наглядно это отражают следующие показатели:

• ·         Количество посетителей увеличилось на 7%;
• ·         На 40% увеличилось количество покупок через сайт;
• ·         Рост конверсии, то есть превращения посетителей в покупателей, составил 31%;

Кроме этого были получены следующие долгосрочные эффекты:

• ·         Рост поискового трафика за счет правильно составленной структуры сайта;
• ·         Широкие возможности гибкого масштабирования сайта;
• ·         Рост лояльности посетителей за счет удобства и скорости работы сайта;

 

Благодарность.

Процесс разработки проекта. Подробно

Техническое задание и предварительный анализ

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

В Техническом задании были описаны такие составляющие проекта как:

• ·         Реализация визуального исполнению;
• ·         Реализация функциональной структуры;
• ·         Реализация подключений к другим системам (1С, эквайринг, яндекс маркет и т.п.);
• ·         Реализация требований к производительности;
• ·         Особенности размещения и наполнения сайта;

 

Каталог и поиск. Генерация, фасеты, поиск, триграммы, морфемы

Одним из ключевых моментов в разработке сайта было использование нашего «ноу-хау» - генерируемого фильтра. Например, для запроса «Гипсокартон 2000 мм» необходимо показывать страницу «Гипсокартон 2000 мм» - и эта страница должна содержать именно гипсокартон. Данная функциональность написана на дальнюю перспективу – подобные запросы – это длинный хвост, который позволяет обработать посетителей, которые точно знают, что хотят. На данный момент запросы «длинного хвоста», по которым переходило 4 или менее посетителей составляют 14%

В системах фильтрации, которые показывают числа – количество результатов, зачастую используется система запросов к базе данных. Чтобы получить количество – надо из получить. А это медленно.

Дамир, разработчик: допустим, есть характеристики Цвет (синий), Размер, Производитель (BOSCH). При выводе всех доступных размеров надо учитывать, что это число именно синих товаров от BOSCH. Такой запрос делается для каждого из размеров (или целиком характеристики). Для вывода количества для всех цветов делается то же самое, но без запроса Цвет – синий. Всё это приводит к тому, что зачастую фильтр из 12 свойств вынуждает делать минимум 12 довольно сложных запросов по всей многотысячной базе заказов. Такой подход может убить всю производительность.

Мы решили и эту задачу. В качестве системы полнотекстового поиска, а также фасетного индекса выбрана система elasticsearch. Мы написали генератор запросов для системы. В результате фильтр, количество результатов для каждой характеристики, список товаров получаются одним запросом к elasticsearch. Это занимает примерно 7 миллисекунд – на всё. В итоге всё получается, всё выводится – и выводится быстро.

Скорость в данном случае – важный атрибут сайта, который влияет на конверсию и позиции в поисковых системах. Для такого посещаемого сайта, как Мегастрой – это и ещё фактор стабильности – если сайт медленно отдаёт странички, очередь желающих просто «положит» сервер. Сервер, отдающий одну страницу за четыре секунды просто физически не в состоянии обработать 10 посетителей в секунду. А необработанные посетители – это ошибки. Вот так это выглядело, когда сайт работал на Битриксе:

 

Поиск – важная часть сайта.

Всего что-либо искали на сайте больше 188 тысяч раз за последние два месяца.

И дать людям то, что они ищут – задача, которую сложно переоценить. Запрос, который не нашёл ничего – это потерянный посетитель – зря сделанная реклама, продвижение, привлечение. В конце концов, это не купленный товар.

Поиск – отдельная сильная сторона сайта. Первая часть поиска – поисковые подсказки. Сказать, что они могут исправлять опечатки – это не сказать ничего:

 

 

 В поисковых подсказках используется так называемый алгоритм  триграммного поиска. Если что-то можно найти, если в искомом запросе сохранено от одной буквы – система найдет искомый товар (если не найдётся более подходящих).

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

Система поиска тоже обладает мозгами. Слова можно менять местами, можно менять форму слова (например, «садовый» вместо «садовая»), можно сделать 1-2 опечатки. Система найдёт результаты.

 

При этом система поиска делает несколько попыток найти товары, каждый раз подходя к поиску более мягко. Не нашлось точного запроса – ищем примерное вхождение, не нашлось – ищем с опечатками. В поиске также учитывается название категории. Например, по запросу «семена астры» найдётся то, что надо, несмотря на то, что в названии товара слова «семена нет» (да и слова «астры» тоже):

 

 В поиске также реализована технология DrillDown. Чем точнее запрос – тем больше характеристик показывается в фильтре. Если среди результатов поиска все товары имеют высоту – фильтр по высоте появится. Отсортировали по цене, до 1000 рублей – если после этого в результатах появился ещё и цвет – он появится тоже. Это позволяет удобнее подобрать товар прямо в результатах поиска:

 

Даже с учётом всего этого время генерации страницы с результатами поиска составляет около 0.20 секунд.

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

Главная страница и текстовые.

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

Предусмотреть все акции в дизайн-макете невозможно. Поэтому для главной страницы мы сделали конструктор, в котором администратор сам может вывести всё, что захочет – текст, изображения, товары, новости, баннеры и так далее. Администратор сам настраивает сетку, в которой и располагаются все используемые модули. Разумеется, всё автоматически адаптируется для мобильных устройств. Возможностей подобной системы много – от настраивания размеров текста до управления фоновыми изображениями. Сейчас используется не более половины всех возможностей.

Кроме того, администратор может управлять широким рядом параметров: адреса для получения уведомлений, адреса, характеристики и так далее.

 

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

При этом основные данные – стоимость, товары, категории, изображения, наличие, характеристики – выгружаются из 1С автоматически.

Корзина, личный кабинет, доставка и 1С

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

Отдельная история –  калькулятор доставки. Он учитывает множество нюансов работы службы доставки: наличие лифта, габарит или нет, в какую зону проводится доставка, сколько километров надо проехать за город и так далее. Вся ценовая политика автоматически загружается из 1С. В личном кабинете покупатель может просмотреть статус заказа, повторить предыдущий заказ.

Все заказы оперативно выгружаются в 1С. Есть ряд двусторонних проверок на случай ошибок и подобных проблем, каждый факт общения, приема-передачи данных сохраняется и фиксируется. В качестве способа общения выбран протокол SOAP. В результате время обработки сильно уменьшилось. Если на старом сайте выгрузка могла происходить два, три часа, то новая система может обработать выгрузку всего каталога товаров целиком, с ценами по всем гипермаркетам и всеми характеристиками за 45 секунд. Разумеется, оперативная выгрузка происходит быстрее – выгружаются только измененные и новые товары, поэтому обработка быстрая.

Для достижения подобного результата мы пошли на ряд технических ухищрений. Например, PHP физически медленно обрабатывается простое копирование фрагмента XML файла размером в 50 мегабайт (речь про 5-10 минут). Для этого мы написали отдельную программу на языке Go, которая работает неприлично быстро. На то, чтобы обработать файл, расшифровать 50-мегабайтовое вложение, превратить его в ZIP архив и распаковать, уходят доли секунды и мизерное количество оперативной памяти.

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

Оптимизация скорости.

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

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

В итоге исходная главная страница сайта занимала 5.1 мегабайт, после оптимизации – 2.0 мегабайта. При этом всё осталось на своих местах и работает как раньше.

Кроме этого, на сайте Мегастрой используется HTTP/2 – новый протокол доступа к сайту. Суть в том, что все изображения, стили, иконки и т.д. загружаются не по очереди, а в едином потоке. Это значительно ускоряет скорость загрузки сайта и перехода между страницами. Таким образом, время загрузки главной страницы со всеми изображениями было увеличено в четыре раза. При этом верхняя часть страницы отображается и работает корректно в первые миллисекунды отображения страницы – ещё до того, как загрузились стили я скрипты.

Не обошли вниманием и оптимизацию серверной части. Сайт работает быстро, стабильно быстро. Предыдущий сайт Мегастроя на системе 1С-Битрикс генерировал страницы до 4-х секунд, что неприлично долго. Считается, что нормальное время генерации страницы любого сайта должно быть меньше, чем 0.6 секунд, при увеличении этого числа начинается падение конверсии, поисковые системы начинают накладывать санкции. Время генерации страницы – очень важный параметр, и поэтому он был зафиксирован в подписанном техническом задании, которое прикладывается к договору.

Фрагмент технического задания: скорость генерации каждой страницы сайта составляет не более 0,5 секунд в 95% случаев при штатной нагрузке сайта.

Согласно техническому заданию, такая скорость гарантируется на посещаемости до 500 000 просмотров в сутки. На данный момент среднее время генерации страницы составляет 0.23 секунды, что вдвое быстрее обещанной – на двое большем количестве просмотров.

Скорость работы сайта была зафиксирована в техническом задании. На данный момент план перевыполнен в 4 раза.

История про ботов.

В результате запуска был запущен не один, а целых 7 сайтов – по одному на каждый город присутствия. Каждый содержит пресловутые миллионы комбинаций, и поисковые системы начали с аппетитом индексировать эти сайты параллельно. Для Яндекса это независимые сайты, и поток индексирования в 7 раз выше, нежели на одном сайте. В результате – результаты, необычные даже для крупных сайтов – до 800 000 (sic!) посещений страниц сайта ботами. Итоговая рекордная посещаемость в просмотрах страниц – миллион в сутки. При этом время генерации страницы не увеличивалось за рамки оговорённых, и составляло около 0.23 секунды на одну страницу в среднем. Кроме Яндекса, сайт посещается другими ботами: google, bing и сотнями других. Порядки другие, но тоже внушительные – 20, 40 тысяч обращений в сутки.

Всё это отрабатывается и отдаётся без кеширования. Вообще. Каждая страница – честно содержит самую актуальную информацию о цене и наличии.

Быстрая обработка роботами позволила значительно ускорить процесс индексирования – а это гораздо более ранние результаты из поисковых систем.

Перейти на сайт