Недушный кейс: техническая поддержка сайта «Мосокна»
Производитель пластиковых окон «Мосокна»Предполетный бриф
Их работа видна в каждом доме Москвы. 30 лет на рынке, 3 миллиона клиентов, офисы от Калининграда до Петропавловска-Камчатского — все это про компанию «Мосокна».
В Московской и Новгородской областях два крупных производства выпускают по 260 000 изделий в год. С 1992 года «Мосокна» — официальный партнер компании Rehau.
Список сайтов на техподдержке компании Мосокна:
- mosokna.ru
- oknap.ru
- azbukaokna.ru
Инструменты и технологии
На момент написания кейса:
- 12 000 строк кода;
- 812 коммитов;
- 3425 сообщений в рабочем чате;
- 400 выполненных задач;
- более 2000 часов трудозатрат;
- ∞ слов благодарности
Почему этот проект — особенный?
Сайт mosokna.ru существует с 2007 года. За это время над кодом работали разные подрядчики. У mosokna.ru есть компания-продвиженец и большая инхаус-команда DevOps API программистов.
Частая смена подрядчиков привела к тому, что каждый специалист вносил правки своими методами.
Один функционал сменяется другим, ветки ненужного кода копятся, за ними тянутся зависимости и огромные скрипты.
Заказчик столкнулся и с другими неприятностями:
- резкое повышение цен на услуги;
- затянутый рабочий процесс;
- некорректная постановка задач через посредников;
- долгое ожидание ответа на мелкие вопросы — от 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
За годы работы сайта многие решения безнадежно устарели и мешали вносить системные правки.
Команда программистовнастроила отложенную загрузку некоторых скриптов,а лишние убрала из кода. После удаления ненужных подключений скорость загрузки выросла в несколько раз.
Старая и Новая версия работы калькулятора
Калькулятор размещен на нескольких доменах. На каждом использованы разные реактивные фреймворки: Vue.js и Angular. Это значит, что исправлять ошибки в коде и дорабатывать функционал приходится разными методами.
Результат расчета цен ожидали по 30-40 секунд — это был критический показатель, при котором многие пользователи покидали страницу.
В работе калькулятора была заложена неправильная логика. После нажатия на кнопку «Рассчитать» отправлялось большое количество запросов, что создавало дополнительную нагрузку и на сеть, и на сайт, и на сервер API.
Мы сжали контент калькулятора, убрали лишние запросы и исправили ошибки. В результате скорость загрузки расчета цен снизилась до 4-6 секунд.
Круто быть частью большого проекта. Особенно приятно видеть результат: сотни тысяч посетителей сайта в 6 раз быстрее получают расчет цены. Мы смогли наладить работу калькулятора и получили благодарность от коллег из Москвы.
Подводим итоги
Заказчик доверяет нам все больше интересных задач по доработке функционала сайта. Продолжаем наращивать трудозатраты и положительные отзывы о нашей работе.
Компания, которой можно доверять большие и тяжелые проекты. Быстро изучили код сайтов, оперативно забрали все проекты и задачи по ним в работу. Отдельная благодарность руководителю отдела продаж Эрне.
Руководитель отдела проектов ООО «Московские окна»