Рестораны & Ночная жизнь

Au P'tit Zinc

95 по производительности и 100 по доступности на сайте, где главное — фотографии: в этом и была задача.

Год
2026
Разработка
3 недели
Стек
Next.js · React · Tailwind · Vercel
  • Дизайн
  • Разработка
  • Локальное SEO
  • Фотография (арт-дирекшн)
Перейти на сайт(в новой вкладке)Обсудить похожий проект

Демоверсия, размещённая KAYZEN на адресе Vercel; окончательный домен принадлежит клиенту.

https://au-ptit-zinc.vercel.app/
Главная страница сайта Au P'tit Zinc — Рестораны & Ночная жизнь, создан KAYZEN
производительность в Lighthouse
95/100
доступность в Lighthouse
100/100
SEO в Lighthouse
100/100
постоянных действия на мобильных
3
Отправная точка

Какую задачу нужно было решить.

Контекст

Au P'tit Zinc — бистро на набережной Пьер-Сиз (quai Pierre-Scize), в 5-м округе Лиона, открытое с 1992 года. Любимое место квартала, известное вечерней атмосферой не меньше, чем кухней.

Ограничение

Заведение продаёт атмосферу — а значит, фотографию: тёплый свет, барная стойка, полный зал. Но ресторанный сайт с обилием фото почти всегда медленный, а половина посещений приходится на телефон — на улице, в 19:30, чтобы найти адрес и забронировать столик.

Решение

Совместить погружение и скорость. Первый экран показывает широкое изображение с приоритетной загрузкой, всё остальное откладывается. Три реальных действия — забронировать, позвонить, проложить маршрут — доступны одним жестом из любой точки страницы.

Измерено, а не заявлено

Показатели на момент сдачи.

Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.

PageSpeed
95
Производительность: 95 из 100
100
Доступность: 100 из 100
96
Лучшие практики: 96 из 100
100
SEO: 100 из 100
Дизайн и арт-дирекшн

Каждое решение — и его причина.

  1. Тёплая тёмная тема

    Угольный фон, медные акценты, фотографии в янтарных тонах. Тёмная тема здесь не дань моде: она воспроизводит свет заведения в тот час, когда решают туда пойти.

  2. Три действия — всегда под рукой

    Забронировать, позвонить, маршрут. Закреплённая панель действий на мобильных держит их доступными при прокрутке. Это единственное, ради чего приходят 80 % посетителей.

  3. Карусель без ловушек

    Автопрокрутка по умолчанию отключена, управление с клавиатуры, пауза при наведении и полная остановка, если пользователь запросил уменьшение движения. Карусель, которая листается сама, — самый нелюбимый компонент в вебе.

Палитра проекта

  • Уголь

    #171412

    Фон

  • Медь

    #B4763A

    Акценты, действие

  • Слоновая кость

    #F3EDE4

    Текст

  • Бутылочный зелёный

    #2E4034

    Второстепенные разделы

Типографическая система

Заголовки

Playfair Display

Основной текст

Inter 400

Контрастный шрифт с засечками для названия и заголовков — дух цинковой стойки — и нейтральный гротеск для меню, которое должно читаться за секунду.

Разработка

Что внутри.

  • Next.js
  • React
  • Tailwind
  • Vercel

  1. Одно приоритетное изображение

    Изображение первого экрана предзагружается, его размеры заданы атрибутами; все остальные загружаются отложенно. Именно это даёт 95 по производительности на сайте, построенном на фотографиях.

  2. Современные форматы и нужные размеры

    Каждое фото существует в нескольких ширинах и отдаётся через srcset. Телефон не скачивает изображение для десктопа — это главный источник расточительства на ресторанных сайтах.

  3. Бронирование делегировано, но отложено

    Модуль бронирования стороннего сервиса весит несколько сотен килобайт. Он загружается только по нажатию «Забронировать», а не при загрузке страницы.

SEO-продвижение

Как сайт становится находимым.

  1. Запросы «рядом со мной»

    «Бистро Лион 5», «ресторан на набережной Пьер-Сиз», «где поужинать в Старом Лионе». Это запросы немедленного решения, которые часто задают менее чем в километре от ресторана.

  2. Полная разметка Restaurant

    JSON-LD Restaurant с адресом, координатами, часами работы, ценовой категорией, типом кухни и ссылкой на меню. Именно этот блок Google подхватывает в локальную панель.

  3. Согласованность с карточкой в Google

    Название, адрес и телефон на сайте и в карточке заведения совпадают до символа. Любое расхождение, даже в пунктуации, ослабляет локальное продвижение.

Доступность

Удобно для всех.

С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.

  1. 100/100 на тёмном фоне

    Ловушка тёмной темы — серый текст на угольном фоне. Все пары подняты выше 4,5:1, а тексты поверх фотографий идут по достаточно плотной подложке, чтобы держать порог при любом изображении.

Структура сайта

Что было сдано.

  • Главная
  • Меню
  • Заведение
  • Бронирование
  • Как добраться и часы работы
  • Контакты
Метод

Ход проекта.

  1. Арт-дирекшн фото

    Отбор и ретушь: сайт стоит ровно столько, сколько его изображения.

  2. Дизайн

    Тёмная тема, панель действий, управляемая карусель.

  3. Разработка

    Приоритетное изображение, srcset, отложенное бронирование.

  4. Локальное SEO

    Разметка Restaurant, согласованность с карточкой Google.

Вопросы

О чём нас часто спрашивают.

Да, если изначально загружать только одно. Оценка производительности измеряет не общий вес страницы, а время до первого полезного контента: одного правильно подобранного по размеру приоритетного изображения и отложенной загрузки остального достаточно, чтобы получить 95.

Другие проекты

Вернуться к портфолио

Тот же уровень требований — для вашего сайта.

Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.

Записаться на встречуПосмотреть цены
Поделиться