Кейс: Апгрейд сайта кухонь
Введение и концепция проекта
Сайт для мебельной компании Фараон. У организации уже был сайт и на него была запущена контекстная реклама Google Ads. Но было очень много отказов из-за того, что сайт грузился долго: более трех секунд. Была поставлена задача полностью переделать верстку и оптимизировать код таким образом, чтобы сай грузился быстро.
Все переписано с нуля
Сайт был написан на конструкторе Tilda. Код был крайне тяжелым, в DOM дереве былло просто десятци вложенных div, лишних атрибутов и длинных классов. За счет этого страница открывалась так долго. Стоит учитывать что лендинг длинный, поэтому количество кода было критичным. Кстати изображения были хорошего размера и не сильно мешали загрузке. Я переписал полностью всю верстку и добавил фишку: нижние блоки сайта подгружались с задержкой. То есть в ходе проилстывания сайта нижние блоки подгружались постепенно. Фронтенд отправлял fetch запрос на сервер, а сервер уже возвращал готовую верстку. Таким образом у меня получилось сделать длинный лендинг, который очень быстро грузится за счет небольшого количества CSS и HTML кода и динамической подгрузке контента.
Введение и концепция проекта
Разработка и оптимизация решения для мебельной компании «Фараон». У организации уже был работающий сайт, на который привлекался целевой трафик через контекстную рекламу Google Ads и Яндекс Директ. Однако фиксировался критически высокий процент отказов (Bounce Rate) из-за низкой скорости загрузки — страница открывалась более 3 секунд. Перед нами встала задача полностью переписать верстку и провести глубокий рефакторинг кода, чтобы обеспечить максимальное быстродействие.
Полный рефакторинг кода и концепция Lazy-Loading блоков
Старая версия сайта была собрана на конструкторе Tilda. Код был избыточным: DOM-дерево содержало сотни вложенных div, неиспользуемых атрибутов и тяжелых стилей. Учитывая большую длину лендинга, это парализовало скорость отрисовки. Я полностью переписал верстку с нуля, очистив код, и внедрил кастомную логику динамической подгрузки контента: нижние экраны сайта запрашиваются асинхронно по мере скролла страницы. Фронтенд отправляет Fetch-запрос на сервер, который отдает готовую легковесную верстку. Это позволило создать объемный, информативный лендинг с минимальным стартовым весом файлов HTML/CSS.
Влияние на SEO и интеграция конверсионного квиза
Важный нюанс: метод отложенной AJAX-загрузки структурных экранов идеально подходит для сайтов, ориентированных на контекстную рекламу (PPC). Для классического SEO в чистом виде это может иметь побочный эффект, так как поисковые роботы при первичном сканировании увидят лишь часть текстового контента. Но в данном проекте приоритетом был ROI в платной рекламе. Также в рамках редизайна я с нуля разработал интерактивный квиз-опросник. Внутри реализована сложная логика ветвления вопросов, а на финальном шаге — автоматическая генерация уникального промокода. Мотивация в виде скидки подтолкнула пользователей активнее оставлять контакты: число заполненных квизов выросло в 2,3 раза.
Динамическое портфолио на Alpine.js
Для демонстрации выполненных фабрикой работ спроектирован интерактивный блок галереи. Чтобы медиа-контент не перегружал страницу при старте, элементы портфолио подгружаются асинхронно с помощью AJAX-запросов. В качестве легковесного JavaScript-фреймворка для реализации фронтенд-логики был выбран Alpine.js, что помогло избежать подключения тяжелых библиотек вроде jQuery.
Модальные окна без лишней нагрузки на базу данных
При клике на проект из галереи открывается детальное модальное окно. Чтобы минимизировать нагрузку на сервер и исключить лишние SQL-запросы к базе данных при пиковом трафике из рекламы, контент для окон извлекается напрямую из кэшируемого массива данных в контроллере по уникальному ключу проекта. Это обеспечивает мгновенный отклик интерфейса.
Асинхронная инициализация скриптов и аналитики
Форма заказа обратного звонка и логика ее валидации также изолированы и подгружаются динамически. Аналогичный подход применен к тяжелым JS-скриптам квиза: они загружаются и инициализируются строго в момент востребования. В целях оптимизации Core Web Vitals была настроена отложенная загрузка счетчика Яндекс Метрики. Да, это может на секунду исказить точное время нахождения пользователя на сайте в аналитике, но для конверсии коммерческого трафика скорость загрузки важнее. Учитывая огромную конкуренцию в Минске по нише «кухни на заказ», продвижение в органический топ требует колоссальных бюджетов, поэтому ставка на мгновенный отклик сайта под контекстную рекламу стала стратегически верным решением.
