Сайт кафе вирішує три завдання: показати меню, привести гостя та прийняти бронь. Звучить просто, але 90% відвідувачів відкриють його з телефона, стоячи на вулиці або гортаючи стрічку. Якщо сторінка завантажується більше трьох секунд або меню не можна прочитати без зуму — гість піде до конкурента через дорогу. Наш досвід показує: правильна архітектура на 1С-Бітрікс вирішує ці проблеми. Ми розробили сайти для 15+ закладів, тому знаємо типові вузькі місця та способи їх обходу.
На 1С-Бітрікс кафе отримує керований каталог меню через інфоблоки, бронювання через веб-форми з передачею в CRM та технічну основу, яку адміністратор оновлює без розробника. Проект реалізується під ключ за 6–8 тижнів з гарантією та підтримкою після запуску.
Як реалізувати меню через інфоблоки?
Меню — центральний елемент сайту. Структура інфоблоку «Меню»:
- Розділи — категорії страв (сніданки, салати, супи, гаряче, десерти, напої, бар)
- Елементи — конкретні страви
Властивості елемента:
- Назва — обов'язкове, виводиться на картці
- Опис — склад та особливості
- Вага/об'єм — строкова властивість (150 г, 300 мл)
- Калорійність — числова властивість, виведення опціональне
- Алергени — множинний список (глютен, лактоза, горіхи, морепродукти)
- Фотографія — файлова властивість, обов'язкова
- Мітка — список (новинка, хіт, гостре, вегетаріанське)
- Активність — стандартне поле, дозволяє приховувати страви без видалення
Адміністратор працює через стандартний інтерфейс інфоблоку: додає страву, завантажує фото, ставить мітку «бізнес-ланч» — і вона з'являється на сайті. Сортування через поле «Сорт» — шеф-кухар може виділити сезонні позиції, піднявши їх вгору.
На фронті меню відображається з фільтрацією за категорією (таби або бічне меню) та іконками алергенів. Без пагінації — все меню на одній сторінці з якірними посиланнями, щоб гість міг прогортати цілком.
Акції та бронювання: як не втратити клієнта?
Акції та бізнес-ланчі
Окремий інфоблок «Акції» з властивостями:
- Заголовок та опис акції
- Дата початку / дата закінчення — властивості типу «дата», елемент автоматично приховується після завершення
- Тип — список (бізнес-ланч, знижка, сезонна пропозиція, комбо)
- Прив'язка до страв — зв'язок з інфоблоком меню
Бізнес-ланчі оновлюються щотижня. Для зручності адміністратора створюється шаблон: копіювання елемента минулого тижня зі зміною страв та дат. На головній сторінці — блок з поточними акціями, сформований компонентом news.list з фільтром за активними датами.
Бронювання столиків
Кафе — не ресторан з системою управління залом. Інтеграція з R-Keeper або iiko для бронювання тут надмірна. Достатньо веб-форми:
- Ім'я гостя
- Телефон (маска введення)
- Дата та час
- Кількість гостей
- Побажання (текстове поле)
Форма створюється через модуль form або компонент зворотного зв'язку. Дані надходять на email адміністратору і паралельно створюють лід у CRM Бітрікс24 (при підключенні хмари) або записуються в модуль crm коробки. Адміністратор підтверджує бронь по телефону.
Для захисту від спаму — Google reCAPTCHA v3 (невидима для користувача) та обмеження на кількість заявок з одного IP.
Фотогалерея, відгуки та контакти
Фотогалерея інтер'єру
Інфоблок «Галерея» з розділами: зал, тераса, банкетний зал, кухня. Фотографії завантажуються у множинну властивість типу «файл». На фронті — masonry-сітка з lightbox (Fancybox або аналог). Важливо: фотографії мають бути професійними — це не задача розробки, але варто зафіксувати вимоги до контенту на етапі ТЗ.
Відгуки
Модуль відгуків — стандартний інфоблок з премодерацією. Гість залишає відгук через форму (ім'я, текст, оцінка від 1 до 5), адміністратор перевіряє та публікує. Середня оцінка розраховується кешованим компонентом і виводиться на головній. Відгуки розмічаються через Schema.org Review — агрегований рейтинг відображається в пошуковій видачі.
Карта проїзду та контакти
Яндекс.Карти або Google Maps через API. Мітка з адресою, можливість побудувати маршрут. Години роботи розмічені через Schema.org OpeningHoursSpecification. Телефон — клікабельний (tel:), при натисканні з мобільного — виклик.
SEO-розмітка: Schema.org Restaurant
Мікророзмітка Restaurant охоплює:
-
name,address,telephone -
openingHours— години роботи -
servesCuisine— тип кухні -
menu— посилання на сторінку меню -
aggregateRating— середній рейтинг з відгуків -
image— фотографія закладу
Розмітка додається в шаблон компонента через JSON-LD. Перевіряється через Google Rich Results Test перед запуском.
Мобільна оптимізація: Core Web Vitals та WebP
Для кафе мобільний трафік становить 85–95%. Телефон, адреса, меню — все, що шукають на ходу. Якщо LCP (Largest Contentful Paint) перевищує 2.5 секунди, Google знижує позиції, а гість закриває вкладку.
Проблема номер один — зображення. Фотографії страв та інтер'єру важкі: 2–5 МБ з камери фотографа. На мобільному екрані шириною 375px завантажувати картинку 2400px — марнотратство. WebP стискає зображення на 30% ефективніше за JPEG, що економить бюджет на хостингу та прискорює завантаження. Формат WebP розроблений Google і підтримується всіма сучасними браузерами (WebP).
Рішення на рівні 1С-Бітрікс:
Штатне масштабування через CFile::ResizeImageGet() генерує мініатюри при першому запиті. Налаштовуємо набір розмірів:
- Картка меню (мобільна) — 400×300, якість 80%, формат WebP
- Картка меню (десктоп) — 800×600, якість 85%, формат WebP
- Галерея (прев'ю) — 600×400, WebP
- Галерея (повнорозмірна) — 1600×1200, WebP з fallback на JPEG
У шаблоні компонента використовується тег <picture> з <source> для WebP та <img> для JPEG-фолбеку. Атрибут srcset із зазначенням розмірів дозволяє браузеру вибрати оптимальну версію.
Lazy loading — атрибут loading="lazy" на всіх зображеннях нижче першого екрану. Для меню це означає: перші 3–4 страви завантажуються одразу, решта — по мірі прокрутки. Intersection Observer API при необхідності кастомної поведінки.
Кешування: компоненти Бітрікс кешуються штатно (налаштування часу кешу в параметрах компонента). Статика (CSS, JS, шрифти) віддається з заголовками Cache-Control: max-age=31536000 через налаштування nginx. Для зображень — аналогічно, з інвалідацією через зміну імені файлу при оновленні.
Шрифти: один шрифт, два накреслення (regular, bold), підключення через font-display: swap, попереднє завантаження через <link rel="preload">. Ніяких Google Fonts — файли хостяться локально, виключаючи зайвий DNS-lookup.
Мініфікація та стиснення: CSS та JS об'єднуються та мініфікуються штатними засобами Бітрікс (налаштування в головному модулі). Gzip або Brotli — на рівні nginx.
Кейс з практики: На проекті кафе «Смаколик» ми зіткнулися з LCP 4.2 с через неоптимізовані фотографії страв. Після впровадження WebP з srcset, lazy loading та кешування статики вдалося знизити LCP до 1.8 с. CLS зменшився з 0.35 до 0.05 завдяки фіксованим розмірам зображень. Це призвело до зростання конверсії бронювань на 30% протягом першого місяця після запуску.
Результат: LCP < 2 секунд, CLS < 0.1, FID < 100 мс. Перевіряється через PageSpeed Insights та реальні дані з Chrome UX Report після накопичення статистики. Наші сертифіковані інженери гарантують відповідність цим метрикам.
| Метрика | Цільове значення | Метод досягнення |
|---|---|---|
| LCP | < 2.0 с | WebP, srcset, preload hero-image |
| CLS | < 0.1 | Фіксовані розміри зображень, font-display: swap |
| FID | < 100 мс | Мініфікація JS, відкладене завантаження некритичних скриптів |
| TTFB | < 600 мс | Кешування компонентів, композитний кеш Бітрікс |
Якщо ви хочете отримати сайт, який швидко завантажується та приносить броні, зв'яжіться з нами для консультації.
Що входить в розробку сайту кафе
- Документація: ТЗ, структура меню, маршрутизація форм
- Доступи: хостинг, домен, адмінка Бітрікс24
- Навчання: інструкція з оновлення меню та акцій
- Підтримка: 30 днів після запуску безкоштовно
Етапи роботи та терміни
| Етап | Зміст | Термін |
|---|---|---|
| Аналітика | Структура меню, вимоги до бронювання, аналіз конкурентів | 1 тиждень |
| Дизайн | Макети мобільної та десктопної версії, фотосесія (паралельно) | 2 тижні |
| Верстка | Адаптивна верстка, компоненти меню та галереї | 1.5 тижня |
| Бекенд | Інфоблоки, форми, інтеграція з CRM, Schema.org | 1.5 тижня |
| Контент та оптимізація | Наповнення меню, обробка фото, перевірка Core Web Vitals | 1 тиждень |
| Запуск | Деплой, фінальне тестування на реальних пристроях | 2 дні |
Усього: 6–8 тижнів. Основна затримка — зазвичай контент: фотосесія страв та узгодження текстів.
Для оцінки вашого проекту зв'яжіться з нами — ми підготуємо комерційну пропозицію із зазначенням термінів та вартості. Замовте розробку сайту кафе під ключ та отримайте консультацію інженера Бітрікс.