Как сделать сайт для сочинского кафе быстрым и приятным: дизайн-подход к восприятию скорости

Антон только что вернулся с прогулки по набережной Сочи: солнце, чайки, и масса табличек с QR-кодами — у каждого кафе теперь свой сайт. Он собрался сделать первый заказной проект: лендинг для маленькой кофейни в центре. Хозяева прислали фотографию для шапки, меню в Word и пожелание: «чтобы открывалось мгновенно, особенно на телефонах туристов». Антон — не только начинающий фронтендер, но и внимательный к дизайну человек: ему важно, чтобы сайт выглядел привлекательно, даже когда соединение нестабильно.

Проблема простая, но многогранная: не всегда выигрывает тот, у кого самый маленький размер страницы. Выигрывает тот, чей сайт кажется быстрым — ещё до того, как всё загрузилось. В этой статье — практическая дорожная карта, как с помощью дизайнерских решений (шрифты, иконки, скелеты, порядок контента) и простых инженерных приёмов сделать сайт «быстрым на ощупь», что особенно ценно для локального бизнеса в Сочи.

Короткий план, которому будем следовать:
— Быстрая проверка: эмпирика и метрики для локальных условий
— Приоритизация контента: что показывать первым и как
— Дизайн вместо тяжёлых картинок: шрифты, SVG, градиенты и LQIP
— Механизмы загрузки и кеширования, которые не требуют магии
— Тестирование, измерение и итерации — как убедиться, что всё работает

Ночная пробка на набережной, телефон в руке и холодный латте — так родилась идея сделать дизайн, который «работает» даже на 3G. Антон перестал думать только как разработчик: он задумался, что увидит глаз человека, пока остальное еще догружается. Поэтому его цель — настроить пользовательский опыт так, чтобы ключевой контент появлялся первым, выглядел аккуратно и не ломал композицию