5 мая, 2026 года
7 мин
32 просмотра 
Hobbi-Smoke.ru — коммерческий сайт компании Hobbi Smoke, сверстанный по макету Figma и внедрённый на WordPress. В проекте были реализованы адаптивная вёрстка, каталог товаров, интеграции с RetailCRM и Unisender, оптимизация скорости, проверка W3C и улучшение показателей PageSpeed на мобильной и десктопной версиях.
Hobbi-Smoke.ru — сайт компании Hobbi Smoke, которая с 2014 года производит дымогенераторы, коптильни и термокамеры для дома и бизнеса. Компания развивает собственное производство, расширяет продуктовую линейку и делает оборудование для копчения, термообработки и пищевого производства.
В рамках проекта была выполнена адаптивная вёрстка по готовому макету Figma, внедрение сайта на WordPress, настройка шаблонов, оптимизация скорости, проверка валидности кода, а также интеграции с RetailCRM и Unisender.
Главная задача — сделать сайт быстрым, стабильным, удобным для покупателей и готовым к обработке заявок через внешние сервисы.
О проекте
Hobbi Smoke — производитель оборудования для копчения и термообработки. На сайте представлены дымогенераторы, коптильни, термокамеры и другое оборудование, которое используется как в домашних условиях, так и в коммерческих задачах.
Для такого проекта сайт должен решать сразу несколько задач:
- показывать продукцию;
- объяснять преимущества оборудования;
- принимать заявки;
- передавать данные в CRM;
- работать быстро на мобильных устройствах;
- корректно отображаться во всех браузерах;
- быть удобным для дальнейшего управления через WordPress.
Проект требовал не просто перенести макет в код, а собрать рабочий коммерческий сайт с чистой структурой, интеграциями и технической оптимизацией.
Задача
Передо мной стояла задача полностью сверстать сайт по макетам Figma, внедрить его на WordPress и подготовить к стабильной работе с заявками.
Основные задачи проекта:
- выполнить адаптивную вёрстку по Figma;
- сохранить точное соответствие макетам;
- перенести сайт на WordPress;
- разбить интерфейс на шаблоны;
- подключить административное управление контентом;
- интегрировать сайт с RetailCRM;
- подключить Unisender;
- оптимизировать CSS, JavaScript и структуру DOM;
- улучшить показатели PageSpeed;
- проверить HTML на валидность;
- обеспечить корректную работу форм и передачи данных.
Вёрстка по Figma
Первый этап работы — полная вёрстка сайта по предоставленным макетам Figma.
Были реализованы:
- адаптивная вёрстка;
- настройка сеток;
- аккуратная типографика;
- корректная работа всех блоков;
- проработка мобильной версии;
- проработка десктопной версии;
- адаптация интерфейса под разные разрешения;
- чистая HTML-структура;
- стили без лишней перегрузки.
Вёрстка была выполнена так, чтобы сайт корректно отображался на компьютерах, планшетах и смартфонах. Для коммерческого проекта это особенно важно: часть пользователей изучает оборудование с телефона, а часть — с десктопа перед оформлением заявки или покупкой.
Внедрение на WordPress
После вёрстки сайт был перенесён на WordPress.
В рамках внедрения были выполнены:
- разделение HTML на WordPress-шаблоны;
- настройка структуры темы;
- подключение динамического контента;
- интеграция с каталогом товаров;
- настройка административного управления;
- подготовка сайта к дальнейшему редактированию;
- оптимизация шаблонов под быстрый рендеринг.
В результате сайт стал не статичной HTML-вёрсткой, а полноценным WordPress-проектом, которым можно управлять из админ-панели.
Это важно для бизнеса: контент, товары, тексты, изображения и данные должны редактироваться без постоянного обращения к разработчику.
Интеграция с RetailCRM
Для обработки заявок была реализована интеграция сайта с RetailCRM.
Что было сделано:
- автоматическая передача заказов;
- отправка данных из форм;
- корректная передача контактной информации;
- согласование структуры полей;
- проверка стабильности ввода;
- настройка связи между формами сайта и CRM.
Интеграция с RetailCRM упростила работу отдела продаж. Заявки не теряются в почте или ручной обработке, а сразу попадают в CRM, где их можно обрабатывать, распределять и отслеживать.
Для коммерческого сайта это один из ключевых элементов: сайт должен не просто выглядеть хорошо, а помогать продавать и передавать данные туда, где с ними работает команда.
Интеграция с Unisender
Также была добавлена интеграция с Unisender.
В рамках подключения были реализованы:
- импорт контактов;
- автоматическая отправка данных;
- корректная валидация полей;
- связка с формами сайта;
- подготовка данных для email-маркетинга.
Интеграция позволила использовать сайт не только как точку приёма заявок, но и как часть маркетинговой системы. Контакты пользователей можно передавать в email-сервис и использовать для дальнейшей коммуникации.
Оптимизация скорости
После внедрения была выполнена техническая оптимизация сайта.
Были проведены:
- минификация CSS;
- минификация JavaScript;
- оптимизация структуры DOM;
- настройка lazy load;
- перенос части скриптов в footer;
- снижение блокировки рендеринга;
- улучшение скорости первого отображения;
- оптимизация загрузки фронтенда.
Главный акцент был сделан на том, чтобы сайт быстро открывался и не создавал лишней нагрузки для пользователя.
Особенно важна была мобильная версия, потому что именно на мобильных устройствах чаще всего проявляются проблемы: долгий первый рендер, высокий LCP, блокировка основного потока, сдвиги layout и тяжёлые изображения.
Проверка HTML и валидность кода
Отдельно была выполнена проверка HTML по стандарту W3C.
Результат проверки:
| Проверка | Результат |
|---|---|
| Ошибки | 0 |
| Предупреждения | 0 |
Код сайта полностью прошёл проверку валидности: 0 ошибок и 0 предупреждений.
Это важно для корректной работы сайта в разных браузерах и устройствах. Валидная разметка снижает риск визуальных ошибок, проблем с доступностью и непредсказуемого поведения интерфейса.
Сравнение производительности
После вёрстки, внедрения на WordPress и оптимизации были замерены показатели PageSpeed до и после работ.
Mobile: показатели до и после
| Показатель | До | После | Прирост |
|---|---|---|---|
| Производительность | 64 | 95 | +31 |
| Специальные возможности | 96 | 100 | +4 |
| Рекомендации | 92 | 100 | +8 |
| Поисковая оптимизация | 64 | 79 | +15 |
| First Contentful Paint | 2.4 сек | 1.7 сек | быстрее на 0.7 сек |
| Largest Contentful Paint | 7.1 сек | 5.4 сек | быстрее на 1.7 сек |
| Total Blocking Time | 50 мс | 0 мс | улучшение 100% |
| Cumulative Layout Shift | 0.173 | 0.042 | улучшение в 4.1 раза |
| Speed Index | 3.8 сек | 2.6 сек | быстрее на 1.2 сек |
На мобильной версии производительность выросла с 64 до 95. Это ключевое улучшение, потому что мобильный трафик часто является основным для коммерческих сайтов.
Также полностью исчезла блокировка основного потока: Total Blocking Time снизился до 0 мс.
Desktop: показатели до и после
| Показатель | До | После | Прирост |
|---|---|---|---|
| Производительность | 92 | 95 | +3 |
| Специальные возможности | 96 | 100 | +4 |
| Рекомендации | 92 | 100 | +8 |
| Поисковая оптимизация | 89 | 96 | +7 |
| First Contentful Paint | 0.7 сек | 0.4 сек | быстрее на 0.3 сек |
| Largest Contentful Paint | 2.1 сек | 1.3 сек | быстрее на 0.8 сек |
| Total Blocking Time | 50 мс | 0 мс | улучшение 100% |
| Cumulative Layout Shift | 0.001 | 0.029 | без заметного визуального смещения |
| Speed Index | 1.2 сек | 1.1 сек | быстрее на 0.1 сек |
На десктопе сайт и до оптимизации показывал неплохие результаты, но после работ удалось улучшить ключевые метрики и довести показатели до более стабильного уровня.
Особенно важно, что Total Blocking Time также снизился до 0 мс, а LCP стал быстрее на 0.8 секунды.
Итоги оптимизации
После оптимизации сайт стал заметно быстрее и стабильнее.
Основные результаты:
- мобильная производительность выросла с 64 до 95;
- desktop-производительность выросла с 92 до 95;
- полностью исчезла блокировка рендеринга;
- Total Blocking Time стал 0 мс;
- улучшился First Contentful Paint;
- улучшился Largest Contentful Paint;
- снизился Speed Index;
- уменьшились сдвиги layout на мобильной версии;
- Accessibility вырос до 100;
- Best Practices вырос до 100;
- HTML прошёл W3C Validator без ошибок и предупреждений.
Почему не делалась дополнительная оптимизация изображений
Сайт можно было ускорить ещё сильнее за счёт дополнительного сжатия изображений, но клиент отказался от уменьшения их качества.
Поэтому текущая производительность достигнута при сохранении тяжёлых изображений. Это важный нюанс: основная техническая часть сайта была оптимизирована максимально, а оставшееся влияние на скорость связано именно с изображениями, качество которых было решено сохранить.
Особенности проекта
Главная особенность проекта — сочетание нескольких направлений работы в одном кейсе.
Здесь была не только вёрстка по Figma и не только натяжка на WordPress. Проект включал frontend, backend-структуру WordPress, интеграции, оптимизацию, проверку валидности и работу с реальными бизнес-процессами.
Ключевые особенности:
- точная вёрстка по готовому макету;
- адаптивная версия под все устройства;
- внедрение на WordPress;
- подключение каталога товаров;
- интеграция с RetailCRM;
- интеграция с Unisender;
- оптимизация PageSpeed;
- валидный HTML;
- чистая структура кода;
- готовность сайта к продажам и заявкам.
Результат
Hobbi Smoke получил современный коммерческий сайт, полностью сверстанный по макету Figma и внедрённый на WordPress.
Сайт стал быстрым, корректным, удобным для пользователей и готовым к работе с заявками. Интеграция с RetailCRM помогает передавать данные в отдел продаж, а подключение Unisender даёт возможность использовать email-маркетинг.
После оптимизации улучшились показатели скорости, исчезла блокировка основного потока, выросли PageSpeed-оценки, а код сайта прошёл проверку W3C без ошибок и предупреждений.
