Damien Mugnier
97, 100, 100, 100: безупречный Lighthouse на сайте с большим количеством фотографий.
- Год
- 2026
- Разработка
- 3 недели
- Стек
- React · Vite · Tailwind · Vercel
- Дизайн
- Разработка
- Арт-дирекшн фото
- Локальное SEO
Демоверсия, размещённая KAYZEN на адресе Vercel; окончательный домен принадлежит клиенту.
- производительность в Lighthouse
- 97/100
- доступность, рекомендации, SEO
- 100/100
- приоритетное изображение, остальные — отложенно
- 1
Какую задачу нужно было решить.
Контекст
Дамьен Мюнье (Damien Mugnier) — плиточник и каменщик из Боваллона (Beauvallon) на юго-западе Лионской агломерации. Он работает с крупноформатной плиткой, мрамором, натуральным камнем и террасами для клиентов премиум-сегмента.
Ограничение
Премиальное позиционирование доказывается исключительно изображением: хорошо уложенная крупноформатная плитка видна в швах и подрезках, а не в тексте. Значит, нужен был очень фотографичный сайт — а это, как известно, рецепт медленного сайта.
Решение
Рассматривать производительность как ограничение проектирования, а не как финальную оптимизацию. Каждая фотография была обработана, откадрирована и подготовлена в нескольких ширинах ещё до вёрстки. Результат: 97 по производительности на сайте, контент которого почти исключительно визуальный, — и безупречные оценки по трём остальным осям.
Показатели на момент сдачи.
Оценки Lighthouse для сайта в рабочей среде. Мы публикуем их как есть: если какая-то оценка низкая, её причина и план исправления описаны ниже, а не замалчиваются.
Каждое решение — и его причина.
Материал как палитра
Бежевый камень, серый мрамор, глубокий чёрный. Палитра взята с уложенных материалов; сайт и работы говорят на одном языке.
Большие изображения, плотное кадрирование
Общие планы помещения растворяют работу. Кадры плотно сфокусированы на подрезках, швах и стыках — там, где видна разница между укладчиком и мастером.
Мало текста, но очень хорошего
При таком позиционировании длинный текст размывает. Каждая страница умещается в несколько точных фраз с правильной терминологией материалов.
Палитра проекта
Камень
#D9CFC0
Фон, поверхности
Серый мрамор
#7F8489
Структура
Глубокий чёрный
#151719
Текст, контраст
Латунь
#A3813F
Детали
Типографическая система
Заголовки
Cormorant Garamond 600
Основной текст
Inter 400
Тонкий высокий шрифт с засечками для позиционирования, неброский гротеск для информации. Типографика служит фотографиям, а не наоборот.
Что внутри.
- React
- Vite
- Tailwind
- Vercel
Бюджет изображений до вёрстки
Максимальный вес страницы определён в самом начале; изображения подготовлены так, чтобы в него уложиться. Это противоположно обычному подходу, при котором оптимизируют, уже столкнувшись с медлительностью.
Систематическая постепенная загрузка
Одно приоритетное изображение, все остальные — отложенно, размеры заданы, чтобы не было никаких сдвигов вёрстки.
Никаких библиотек анимации
Переходы — на чистом CSS. На сайте, где всё держится на изображении, лишние сто килобайт JavaScript для анимации стоили бы тех самых баллов производительности, которые решают дело.
Как сайт становится находимым.
Запросы по материалам
«Укладка крупноформатной плитки Лион», «мрамор в ванной юго-запад Лиона», «терраса из натурального камня». Клиент премиум-сегмента ищет материал, а не профессию.
Описанные и названные изображения
Описательные альтернативные тексты и понятные имена файлов. Поиск по картинкам — реальный канал для отделочных профессий.
Удобно для всех.
С июня 2025 года Европейский акт о доступности (European Accessibility Act) требует цифровой доступности для значительной части онлайн-сервисов. Мы закладываем её на этапе проектирования, а не исправляем задним числом.
100/100 на сайте из изображений
У каждой фотографии полезное описание — материал, формат, помещение, — а не пустой или повторяющийся альтернативный текст. Визуальный сайт не обречён быть недоступным.
Что было сдано.
- Главная
- Крупноформатная плитка
- Мрамор и натуральный камень
- Террасы
- Работы
- Смета
Ход проекта.
Бюджет производительности
Максимальный вес страницы определён до вёрстки.
Арт-дирекшн фото
Отбор, плотное кадрирование, подготовка в нескольких ширинах.
Дизайн
Палитра материалов, короткий и точный текст.
Разработка
Чистый CSS, постепенная загрузка, заданные размеры.
О чём нас часто спрашивают.
Другие проекты
Кибербезопасность & Кроссплатформенное приложениеSésame
Менеджер паролей, который не может прочитать ваши пароли: доказательством стала сама архитектура.
Кибербезопасность & Веб-приложениеSésame Éclair
Один секрет, одно прочтение, никаких следов: ключ никогда не покидает ссылку, сервер хранит лишь нечитаемый блок.
Соответствие GDPR & SaaSKonsent by Kayzen
Разработчик баннеров, который сам же их проверяет, — судья в собственном деле: независимость и была продуктом.
Тот же уровень требований — для вашего сайта.
Бесплатный аудит вашего текущего сайта, смета в течение 24 часов и письменное обоснование — такое же, как то, что вы только что прочитали. Оплата в три этапа без переплаты; местные программы поддержки проверяются до подписания.