О проекте

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

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

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

Сложности проекта

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

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

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

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

Используемые технологии

React
ReactReact
Next.js
Next.jsNext.js
Redux Toolkit
Redux ToolkitRedux Toolkit
TypeScript
TypeScriptTypeScript
site mosokna
site mosokna
site mosokna
site mosokna

Точка А — Первичный анализ

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

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

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

Точка В — Soft Skills

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

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

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

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

Точка С — Hard Skills

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

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

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

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

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

По итогам работ удалось сократить        значения для FCP и LCP до 0,4 и 0,7 секунд. CLS        снизился до рекордных 0,006-0,009
По итогам работ удалось сократить        значения для 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. Настроили отложенную загрузку элементов так, чтобы скрипты не мешали отображению основного контента.
    Сегодня абсолютно все скрипты со старого сайта лучше и быстрее отрабатывают на новом.
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React
Мы разработали new.mosokna.ru на Next.js и React

Калькулятор

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

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

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

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

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

Александр

Коммуникация.
Автоматизация и отчетность

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

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

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

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

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

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

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

Результаты

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

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

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

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