Как реанимировать 16-летний сайт: техподдержка "МосОкон"
Заказчикпроизводитель пластиковых окон «Мосокна». Задачаустранить технические проблемы и повысить производительность сайта.
О проекте
«Московские окна» на рынке уже 30 лет. Внушительная клиентская база — более 3 миллионов человек — подтверждает высокое доверие к компании. Бизнес продолжает расти: в Московской и Новгородской областях два крупных производства выпускают по 260 000 изделий в год.
Сайт mosokna.ru разработали еще в 2007 году. За прошедшие годы с ним успело поработать несколько внешних подрядчиков. Сегодня у компании есть собственная команда DevOps API программистов.
Но частая смена подрядчиков не прошла гладко — на сайте накопилось много технических проблем. Чтобы их исправить, руководство компании решило передать техподдержку в руки профессиональных разработчиков.
О проблемах
У «Мосокон» 4 сайта — основной и три дополнительных. Все размещены на одной базе данных. Основной сайт mosokna.ru собран на CMS Битрикс, калькулятор расчета цен — на Vue.js.
Суть практически всех проблем состоит в том, что разные подрядчики вносили правки своими методами. В результате появились неактуальные ветки кода и громоздкие скрипты. Производительность сайта упала до критических 14%, а скорость загрузки контента стала исчисляться минутами.
Список технических проблем, с которыми пришел заказчик:
- Недоработанный функционал основного сайта mosokna.ru;
- Сложный и запутанный код;
- Ошибки в калькуляторе цен;
- Показатели LCP и FCP в красной зоне;
- Долгая загрузка страниц.
О том, как проблемы решали
Проблемы не были автономны: одна тянула за собой другую. За 16 лет на сайте скопилось много ненужных и неактуальных данных — они ощутимо тормозили процессы. Сайту нужна была профессиональная «скорая помощь».
Ниже — подробнее о том, что мы сделали.
Снизили FCP и LCP
Первый параметр указывает, сколько времени занимает появление первого элемента с момента открытия страницы. Второй — скорость загрузки главного элемента. Оба показателя были критически высокими: 3,7 и 22,2 секунд соответственно.
Для снижения значений наши специалисты включили сжатие текста, настроили корректный показ шрифтов во время подгрузки и отделили файлы для первоочередной загрузки от остальных.
Улучшили CLS
Показатель указывает на визуальную стабильность сайта. Если CLS высокий (в нашем случае — 0,308), то контент сайта постоянно «убегает» от посетителя: тот теряет нужную строку, переходит по неправильной ссылке или нажимает не на ту кнопку. Это влияет и на процент отказов, и на индексацию сайта поисковиками.
Так происходит из-за того, что элементы сайта загружаются с разной скоростью. Для решения проблемы разработчики поработали со стилями сайта и синхронизировали загрузку элементов страниц. В итоге CLS снизили до сотых процента.
Распутали и обновили код
За 16 лет работы сайта один функционал не раз сменялся другим — возникла мешанина из кодов, в которую было тяжело вносить системные правки. Кроме того, многие решения безнадежно устарели.
Команда программистов настроила отложенную загрузку некоторых скриптов, а лишние убрала из кода. После удаления ненужных подключений скорость загрузки выросла в несколько раз.
Оптимизировали графический контент
Медиа-файлы без нужной кодировки весили довольно много и существенно тормозили работу сайта. В некоторых браузерах пользователи могли ждать до 75 секунд до полного отображения контента.
Чтобы повысить скорость загрузки, мы конвертировали все фото и изображения в современные форматы. Большую часть — в svg, но некоторые в webp. Добавили четкости и резкости, сжали их до оптимального размера и загрузили на сайт в нужном расширении.
Исправили ошибки в калькуляторе расчета цен
Пользователи ожидали результат расчета по 30–40 секунд. Это был критический показатель, при котором многие покидали страницу.
Сложность заключалась в том, что калькулятор был размещен на нескольких доменах. На каждом использованы разные реактивные фреймворки: Vue.js и Angular. Это значит, что исправлять код и дорабатывать функционал пришлось разными методами.
В итоге нам удалось снизить скорость загрузки результата до рекордных 4–6 секунд. Для этого наши специалисты сжали контент калькулятора, убрали лишние запросы и исправили ошибки.
О специфике проекта
Рабочий процесс настраивался скрупулезно, с учетом требований заказчика и исходных данных. Стандартные методы здесь не всегда работали — приходилось принимать необычные решения.
Технический нюанс
У заказчика несколько сайтов на одной базе данных. Подобное решение обусловлено спецификой бизнеса.
Основная сложность для программистов — из-за единой БД одна ошибка может нарушить работу сразу всех сайтов. Это значит, что разработчики должны жестко контролировать каждое действие. Изменения для dev-среды не должны были появляться на продакшене раньше времени.
Решение нашлось: прежде чем вносить корректировки на живой сайт, мы тестировали их на локальной базе данных.
Рабочий момент
Среди главных запросов заказчика — возможность напрямую общаться с командой программистов. Предыдущий опыт показал клиенту, что поддержание контакта исключительно через посредника негативно влияет на рабочий процесс. Задачи ставятся некорректно, а ответы на мелкие вопросы приходится ждать по двое суток.
Чтобы представители «Мосокон» могли задавать вопросы, уточнять детали задачи и получать быстрые ответы от программистов, мы решили создать общий рабочий чат в Telegram. Такое решение дало много плюсов:
- высокая скорость ответа — до 7 минут;
- оперативное решение рабочих вопросов;
- быстрая отчетность от технических специалистов;
- общение «на одном языке» с заказчиком.
Об итогах
За время работы с «Мосокнами» мы добились следующих результатов:
- Производительность сайта достигла максимума;
- Скорость появления контента сократилось до нескольких секунд;
- mosokna.ru поднялся в поисковых системах Яндекс и Google.
«Скорая помощь» помогла, но работы все же осталось много. Исправить все проблемы было бы непросто, поскольку сайт буквально «оброс» ими за 16 лет. Поэтому после длительных обсуждений было принято решение о создании нового сайта — современного, технологичного и быстрого. И мы рады, что «Мосокна» доверили нам эту трудную, но интересную задачу.
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
