logo RocketBusiness

Недушный кейс: техническая поддержка сайта «Мосокна»

Производитель пластиковых окон «Мосокна»

Техподдержкаb2cИнтернет-магазинСтроительство и ремонтBitrix

Предполетный бриф

Их работа видна в каждом доме Москвы. 30 лет на рынке, 3 миллиона клиентов, офисы от Калининграда до Петропавловска-Камчатского — все это про компанию «Мосокна».

В Московской и Новгородской областях два крупных производства выпускают по 260 000 изделий в год. С 1992 года «Мосокна» — официальный партнер компании Rehau.

Список сайтов на техподдержке компании Мосокна:

  • mosokna.ru
  • oknap.ru
  • azbukaokna.ru

Компания, которой можно доверять большие и тяжелые проекты. Быстро изучили код сайтов, оперативно забрали все проекты и задачи по ним в работу. Отдельная благодарность руководителю отдела продаж Эрне.

Roman
Роман Лукьянчиков

Руководитель отдела проектов ООО «Московские окна»

Инструменты и технологии

HTML5
HTML5HTML5
NodeJs
NodeJsNodeJs
Vue
VueVue
Angular
AngularAngular
React
ReactReact
Git
GitGit
PHP
PHPPHP
MySQL
MySQLMySQL
Bitrix
BitrixBitrix

На момент написания кейса:

  • 12 000 строк кода;
  • 812 коммитов;
  • 3425 сообщений в рабочем чате;
  • 400 выполненных задач;
  • более 2000 часов трудозатрат;
  • слов благодарности
mosokna 1
mosokna 1

Почему этот проект — особенный?

Сайт mosokna.ru существует с 2007 года. За это время над кодом работали разные подрядчики. У mosokna.ru есть компания-продвиженец и большая инхаус-команда DevOps API программистов.

Частая смена подрядчиков привела к тому, что каждый специалист вносил правки своими методами.

Один функционал сменяется другим, ветки ненужного кода копятся, за ними тянутся зависимости и огромные скрипты.

Заказчик столкнулся и с другими неприятностями:

  • резкое повышение цен на услуги;
  • затянутый рабочий процесс;
  • некорректная постановка задач через посредников;
  • долгое ожидание ответа на мелкие вопросы — от 2 суток.

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

Mosokna 2
Mosokna 2

База системы доменов

Основной сайт mosokna.ru собран на CMS Битрикс, калькулятор расчета цен — на Vue.js. Работают по протоколу SOAP API.

Дополнительные сайты — lk.azbukaokna.ru, azbukaokna.ru, azbukaokna.shop.rhsolutions.ru. Все размещены на одной базе данных, включая основной сайт.

Из-за совместной БД одна ошибка может нарушить работу сразу нескольких сайтов. Это сильно увеличивает ответственность, которая ложится на плечи подрядчика.

Технические проблемы :

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

У нас был тестовый месяц работы. Предыдущий подрядчик утверждал, что все возможные методы устранения проблем уже выполнены на сайте. Однако, за этот срок мы показали ощутимый результат: вывели сайт из красной зоны LCP и FCP и максимально оптимизировали загрузку страниц. Это «скорая помощь» для сайта, ведь скорость появления контента напрямую влияет на процент отказов.

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

Полетели

Настраиваем рабочий процесс

Один из главных запросов клиента — возможность общения с командой без посредников. Во время объемных работ заказчику важно задавать рутинные вопросы, уточнять детали задачи и получать быстрые ответы от программистов. Так появился наш чат в Telegram с разработчиками, личным аккаунт-менеджером и представителями «МосОкон».

Общий рабочий чат

Этот формат рабочего общения дает много плюсов:

  • высокая скорость ответа — до 7 минут;
  • быстрая отчетность от технических специалистов;
  • оперативное решение рабочих вопросов;
  • общение «на одном языке» с заказчиком.
Общий рабочий чат
Общий рабочий чат

Автоматизированная постановка задач и отчетность

Мы трекаем трудозатраты и задачи в Redmine. «Мосокна» — в Битрикс 24. Для этого проекта мы перешли на CRM, удобную клиенту. Рабочий процесс ведем через Битрикс 24 и дублируем его в свой Redmine. Мы используем инструменты анализа, проверенные годами: оцениваем эффективность работы и распределяем рабочую нагрузку между сотрудниками.

Назначение дедлайнов, закрепление ответственных специалистов, фиксирование деловой переписки — все задачи и их статусы доступны и прозрачны.

Автоматизированная постановка задач и отчетность
Автоматизированная постановка задач и отчетность

Слаженная работа двух команд

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

Эрна
Эрна, Коммерческий директор

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

Полет нормальный

Чаты чатятся, задачи выполняются — заказчик нами доволен. Сегодня в процесс включены два senior-, три middle-программиста и аккаунт-менеджер.

С каждым месяцем клиент доверяет нам все больше и больше задач. Трудозатраты на проект росли: мы начинали с 80 рабочих часов в месяц и дошли до 450.

Показатели сайта до и после оптимизации

показатели до
показатели после

1. Снизили показатель Cumulative Layout Shift

Другими словами, убрали «прыгающий» контент: смещение баннеров, текста, конверсионных кнопок. Это происходит, когда элементы сайта загружаются с разной скоростью. В итоге пользователь может потерять нужную строку, перейти по неправильной ссылке или нажать не на ту кнопку. Такой опыт влияет и на процент отказов, и на индексацию сайта поисковиками.

Разработчики провели работу со стилями сайта, синхронизировали загрузку элементов страниц и снизили CLS до тысячных процента: 0,006-0,009.

Разработчики провели работу

2. Улучшили FCP и LCP

Первый параметр указывает, сколько времени занимает появление первого элемента с момента открытия страницы. Второй — скорость загрузки главного элемента.

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

Оптимальные значения для FCP и LCP — 1,8 и 2,5 секунд соответственно. Мы добились скорости в 0,4 и 0,7 секунд.

Мы добились скорости

3. Оптимизировали фото-контент

Тяжеловесные медиа-файлы без нужной кодировки существенно тормозят загрузку сайта. В некоторых браузерах пользователи были вынуждены ждать от 55 до 75 секунд для полного отображения контента.

Все фото и графические элементы конвертировали в современные форматы: некоторые в webp, остальные в svg. Добавили четкости и резкости, сжали их до оптимального размера и загрузили на сайт в нужном расширении.

4. Исправили код JavaScript

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

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

Старая и Новая версия работы калькулятора

video prev
video prev

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

Результат расчета цен ожидали по 30-40 секунд — это был критический показатель, при котором многие пользователи покидали страницу.

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

Мы сжали контент калькулятора, убрали лишние запросы и исправили ошибки. В результате скорость загрузки расчета цен снизилась до 4-6 секунд.

Александр
Александр, Технический директор

Круто быть частью большого проекта. Особенно приятно видеть результат: сотни тысяч посетителей сайта в 6 раз быстрее получают расчет цены. Мы смогли наладить работу калькулятора и получили благодарность от коллег из Москвы.

Подводим итоги

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

график
график
Делаем беспроигрышные предложения
давайте обсудим