Hobbi Smoke производит дымогенераторы, коптильни и термокамеры с 2014 года. Компания создаёт оборудование для дома и бизнеса и активно растет за счет собственного производства, сильной продуктовой линейки и высокого качества техники.
Передо мной стояла задача полностью сверстать сайт по макету Figma, натянуть его на WordPress, выполнить оптимизацию, обеспечить чистый и корректный код, а также внедрить интеграции с RetailCRM и Unisender.
Сайт должен быть быстрым, стабильным и удобным для покупателей.
Верстка по Figma и натяжка на WordPress
Верстка
По предоставленным макетам Figma была выполнена:
- полная адаптивная верстка
- настройка сеток
- аккуратная типографика
- корректная работа всех блоков
- проработка мобильных и десктопных вариантов
Верстка соответствует макетам и корректно отображается на всех устройствах.
Натяжка на WordPress
После верстки сайт был:
- перенесён на WordPress
- разбит на шаблоны
- оптимизирован под быстрый рендеринг
- интегрирован с каталогом товаров
- дополнен административным управлением контентом
Сайт получился лёгким и удобным в управлении.
Особенности проекта
Интеграция RetailCRM
Провел интеграцию сайта с RetailCRM:
- автоматическая передача заказов
- отправка данных формы
- корректная передача контактной информации
- согласованность форм
- проверка стабильности ввода
Это упростило работу отдела продаж и ускорило обработку заявок.
Интеграция Unisender
Добавил подключение Unisender:
- импорт контактов
- автоматическая отправка
- корректная валидация данных
- связка с формами сайта
Интеграция позволила клиенту использовать email маркетинг напрямую из WordPress.
Оптимизация скорости и улучшение производительности
Проверка HTML и валидность
Сайт полностью соответствует стандарту W3C.
Результат проверки:
0 ошибок, 0 предупреждений.
Это гарантирует корректную работу во всех браузерах и устройствах.
Оптимизация кода и структуры DOM
Была выполнена:
- минификация CSS
- минификация JS
- оптимизация DOM
- lazy load
- перенос части скриптов в footer
Сайт стал работать значительно быстрее.
Сравнение производительности сайта Hobbi-Smoke.ru
Ниже показано, как изменились ключевые показатели PageSpeed после полной верстки, переноса на WordPress и оптимизации.
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 сек |
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 сек |
Итоговые выводы по оптимизации
- Новая версия сайта стала значительно быстрее, особенно заметно на мобильных устройствах.
- Полностью исчезли блокировки рендеринга.
- Уменьшен LCP, FCP и Speed Index на обеих версиях.
- Улучшены показатели доступности и качества разметки.
- Все показатели PageSpeed выросли при сохранении тяжёлых изображений, которые клиент решил не сжимать.
- Код полностью валиден: 0 ошибок и 0 предупреждений по W3C Validator.
Почему не делалась дополнительная оптимизация
Скорость сайта можно увеличить ещё сильнее, но клиент отказался от уменьшения качества изображений.
На текущую производительность влияют только изображения, все остальные элементы оптимизированы максимально.
Hobbi Smoke получил быстрый, корректный и современный сайт, полностью сверстанный по макету Figma и интегрированный в WordPress.
Реализованы интеграции с RetailCRM и Unisender, выполнена глубокая оптимизация и проверка валидности кода.
Сайт стал удобным для пользователя и готовым к росту продаж и заявок.
