За рамками обыденности: техподдержка сайта «Мосокна»

«Московские окна» — крупнейший производитель пластиковых окон с 30-летней историей.

Свыше 3-x миллионов человек уже доверились компании, и с каждым днем цифра растет.

Бизнес процветает: два производственных центра, почти три сотни тысяч изделий в год, дилерские центры от Калининграда до Южно-Сахалинска.

Сайт mosokna.ru — долгожитель. Его создали еще в 2007 году. За семнадцать лет над ним успели поработать десятки специалистов. Как итог — изменения вносились разными методами, а функционал постоянно менялся.

Сайт нуждался в профессиональной «скорой помощи» — технических проблем было действительно много:

• запутанная структура кода;
• некорректно работающие скрипты;
• медленная загрузка страниц;
• недоработанный функционал.

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

Исходные данные:

• четыре сайта (основной и три дополнительных);
• одна большая база данных;
• CMS — Битрикс.

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

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

Заказчик ожидал от нас не только профессионализма, но еще:

• прозрачной отчетности,
• оперативности в работе,
• адекватного прайса.

Всё это наша команда могла предложить.

Глобальная задача — оптимизация сайта. На момент обращения к нам основные показатели блистали насыщенным красным цветом:

Над проектом работала целая команда специалистов: аккаунт-менеджер, 2 senior и 3 middle — программиста.

Перед началом работ мы детально изучили сайт, провели техаудит и выстроили пошаговый план. Всего выделили четыре цели:

• Распутать код;
• Оптимизировать медиа-контент;
• Улучшить показатели LCP, FCP и CLS;
• Настроить корректную работу калькулятора.

Команда разработчиков настроила отложенную загрузку JS-скриптов, «почистила» коды, конвертировала и сжала контент. По итогам работ удалось сократить значения для FCP и LCP до 0,4 и 0,7 секунд. CLS снизился до рекордных 0,006-0,009.

Мы разработали new.mosokna.ru на Next.js и React. В этом пункте расскажем о нескольких технологиях, которые помогают нам быстро закрывать задачи по техподдержке.

• Incremental Static Regeneration.
  Технология для обновления статических страниц. Ее преимущества можно использовать при масштабировании до миллиона страниц. Как это работает? Чтобы обновить информацию на странице, достаточно внести правки в админ-панели и отправить запрос на ревалидацию. Нужный фрагмент обновится без лишних обменов данными.
• Библиотека Formik и YUP.
  Позволяет отслеживать ревалидацию форм и добиваться быстрой загрузки. При этом нет перегруженных структур и кода с глубоким ветвлением. Если просто — мы сделали код понятным и повысили производительность сайта.
• Lazy load.
  Эта задача не сложная, но объемная. Тысячи скриптов нужно было актуализировать. Программисты вручную перевели их с устаревшего кода jQuery на библиотеки, совместимые с Next.js. Затем изменили костыли с использованием Time Out на MutationObserver. Настроили отложенную загрузку элементов так, чтобы скрипты не мешали отображению основного контента.
  Сегодня абсолютно все скрипты со старого сайта лучше и быстрее отрабатывают на новом.

Особенности калькулятора:

• Размещен на нескольких доменах,
• Собран на двух фреймворках — Angular и Vue.js.

Проблемы в его работе были связаны с неправильной логикой функционирования. Каждое нажатие конверсионной кнопки приводило к отправке множества запросов, что увеличивало нагрузку на сайт, сеть и API-сервер. Многие пользователи не дожидались результатов расчета и покидали страницу.

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

Сотрудники «Мосокон» фиксируют задачи и трудозатраты в Битрикс 24, мы — в Redmine. Но в рамках этого проекта мы подстроились и перешли на удобную для заказчика CRM-систему. Вся работа велась через Битрикс 24, параллельно дублируясь в наш Redmine.

Каждая задача, ее статус, сроки исполнения, ответственные лица и деловая переписка доступны и прозрачны для всех сторон.

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

Такой формат коммуникации подошел всем.

Среди очевидных преимуществ:

• быстрая обратная связь
• эффективное урегулирование рабочих моментов
• общение с заказчиком без посредников

За время сотрудничества:

• написано 13 000 строк кода;
• выполнено 600 задач;
• выработано более 2400 часов.

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