Самое важное вкратце
- Большинство гостей открывают ваш сайт с телефона и на ходу, часто при нестабильной связи. Для них важна каждая секунда до часов работы, меню и бронирования.
- Google измеряет пользовательский опыт тремя показателями Core Web Vitals: время загрузки самого крупного элемента (LCP), реакция на действия (INP) и сдвиги макета (CLS).
- Главный тормоз почти всегда слишком большие фотографии. Правильно обрезанные и сохранённые в WebP или AVIF, они становятся в разы меньше и не выглядят хуже.
- Меню в PDF, встроенные ленты соцсетей, слайдеры, фоновые видео и множество плагинов в конструкторах сайтов особенно сильно замедляют загрузку на телефоне.
- Бесплатным инструментом Google PageSpeed Insights вы проверите страницу за минуту. Важен вид для мобильных устройств, а не для компьютера.
Эта статья носит общий информационный характер и не заменяет юридическую или налоговую консультацию. Правила меняются и частично различаются по федеральным землям: уточняйте детали в своей Wirtschaftskammer (WKO) или IHK, в компетентном ведомстве или у налогового консультанта.
Почему скорость загрузки так важна для заведений
Место, где поесть, обычно ищут прямо перед решением: по дороге из офиса, на прогулке по старому городу, в машине перед целью поездки. Гости видят ваше заведение в Google Картах или в профиле компании в Google, нажимают «Сайт» и ждут ответа сразу. На телефоне связь часто хуже, чем дома: между высокими домами, в подвальных заведениях, в долинах или в перегруженной сети во время городского праздника.
Поэтому медленная страница напрямую стоит вам гостей. Тот, кто десять секунд смотрит на белый экран, не позвонит и не забронирует, а выберет следующее заведение в списке. К этому добавляется поисковик: Google рекомендует хорошие Core Web Vitals и учитывает пользовательский опыт в своих системах ранжирования. Содержание и релевантность остаются важнее, но среди одинаково хороших страниц скорость может стать решающей. Как скорость, контент и записи в каталогах работают вместе, объясняет руководство по локальному SEO.
Core Web Vitals простыми словами
С помощью Core Web Vitals Google описывает, как страница ощущается для реальных посетителей. Это три показателя, у каждого есть целевое значение, которое Google считает «хорошим». Измеряется не одно посещение, а множество: страница считается хорошей, если не менее 75 процентов посещений достигают цели, отдельно для телефонов и компьютеров.
| Показатель | Что измеряет | Хорошо по данным Google | Типичная причина у заведений |
|---|---|---|---|
| LCP (Largest Contentful Paint) | Когда полностью загружен самый крупный видимый элемент, обычно большое фото в шапке | До 2,5 секунды | Огромное фото в шапке, медленный хостинг, слайдер с несколькими фото |
| INP (Interaction to Next Paint) | Как быстро страница реагирует на касание, например на меню или кнопку | До 200 миллисекунд | Много сторонних скриптов, тяжёлые плагины конструктора |
| CLS (Cumulative Layout Shift) | Насколько сильно содержимое смещается при загрузке | До 0,1 | Изображения без заданного размера, поздно появляющиеся баннеры и всплывающие окна |
Если перевести на повседневный язык: фото вашего зала или фирменного блюда должно появиться быстро, кнопка «Забронировать столик» должна срабатывать сразу, а номер телефона не должен в последний момент съехать вниз, чтобы гость вместо него нажал на баннер с подарочным сертификатом. Последний пункт раздражает многих гостей сильнее, чем несколько десятых секунды загрузки.
Проверка в PageSpeed Insights
Бесплатный инструмент Google PageSpeed Insights за минуту покажет, насколько быстр ваш сайт и что его тормозит. Для этого не нужны ни аккаунт, ни технические знания.
Введите адрес
Откройте pagespeed.web.dev, вставьте адрес главной страницы и нажмите «Анализировать». Затем проверьте также меню и страницу бронирования.
Выберите вид «Мобильные»
PageSpeed Insights сначала показывает результаты для мобильных устройств. Значения для компьютера обычно выглядят лучше, но меньше говорят о гостях в пути.
Прочитайте полевые данные
Вверху, если посещений достаточно, видны значения реальных пользователей Chrome за последние 28 дней. Именно эта оценка важна для Core Web Vitals.
Лабораторные данные и оценка производительности
Ниже Google моделирует посещение со среднего телефона и выставляет оценку производительности от 0 до 100. Она немного меняется от теста к тесту и полезна прежде всего для поиска проблем.
Выполните рекомендации
В разделе «Диагностика» видно, что тормозит страницу, например слишком большие изображения или блокирующие отрисовку скрипты. Начните с пунктов, которые экономят больше всего времени.
Сжатие фото: самый сильный рычаг
Фотографии продают блюда, атмосферу и номера, и они нужны на любом гастрономическом сайте. Но фото прямо с телефона или с камеры фотографа часто весит несколько мегабайт и имеет ширину 4000 пикселей и больше. На телефоне оно показывается шириной около 400 пикселей. То есть гость загружает в разы больше, чем видит. На главной странице с фото в шапке, галереей и фотографиями команды это быстро складывается в объём данных, который в мобильной сети грузится заметно долго.
Обрежьте
Перед загрузкой уменьшите фото до размера, в котором оно показывается. Для большого фото в шапке обычно хватает около 2000 пикселей в ширину, для фото в галерее значительно меньше.
Современный формат
Используйте WebP или AVIF вместо JPEG или PNG. По данным Google, изображения WebP обычно примерно на 25–35 процентов меньше сопоставимых файлов JPEG и PNG.
Сожмите
В графическом редакторе или бесплатном онлайн-инструменте снижайте качество, пока не перестанете видеть разницу на экране.
Отдавайте несколько размеров
Хорошие системы сайтов автоматически создают уменьшенные версии для телефонов и крупные для больших экранов. Спросите, умеет ли это ваша.
Загружайте нижнее позже
Изображения ниже на странице загружайте только тогда, когда гость до них прокрутит (lazy loading). Фото в самом верху, наоборот, загружайте сразу, иначе пострадает LCP.
Также задайте каждому изображению фиксированные ширину и высоту в коде страницы, чтобы место было зарезервировано ещё до загрузки и ничего не сдвигалось. Как вообще сделать хорошие фото, даже на телефон, показывает руководство по фотографии еды.
Меню в PDF: медленно и неудобно
Многие заведения выкладывают печатное меню на сайт в виде PDF. Это быстро, но для гостей с телефона часто худший вариант. PDF с фотографиями и встроенными шрифтами может весить несколько мегабайт, в зависимости от телефона открывается в отдельном приложении или скачивается, а текст почти не читается без увеличения. Тот, кто на ходу хочет лишь быстро проверить, есть ли вегетарианские блюда, здесь часто сдаётся.
| Меню в PDF | Меню текстом на сайте | |
|---|---|---|
| Загрузка на телефоне | Часто медленно, особенно с фото | Быстро, грузится вместе со страницей |
| Читаемость | Нужно увеличивать и листать | Подстраивается под экран |
| Google и ИИ-ассистенты | Содержимое плохо считывается | Блюда и слова легко найти |
| Доступность | Для экранных дикторов часто сложно | Хорошо доступно при аккуратной вёрстке |
| Изменения | Сделать и загрузить новый файл | Изменить одно блюдо или цену напрямую |
Меню текстом быстрее, удобнее для чтения и находится в Google. Как его построить и поддерживать, рассказывает руководство по цифровому меню. Если вы хотите дополнительно предложить версию для печати для банкетов или кейтеринга, дайте ссылку на PDF как на дополнение, а не как на единственное меню. Для столов с помощью инструмента QR-код для меню создайте настольную табличку, которая ведёт прямо на текстовое меню.
Лишний груз в конструкторах и шаблонах
Конструкторы сайтов и готовые шаблоны удобны, но часто несут много кода, который вашей странице вовсе не нужен. Каждая дополнительная функция загружает свои скрипты, шрифты и стили, даже если используется лишь на одной подстранице. На быстром офисном компьютере это почти незаметно, на недорогом телефоне в мобильной сети очень даже. Типичные тормоза на сайтах заведений:
- Слайдеры с фото и фоновые видео на главной: несколько больших файлов, прежде чем гость сможет что-то прочитать.
- Встроенные ленты Instagram или Facebook: загружают сторонние скрипты и часто десятки изображений. Ссылка на ваш профиль быстрее.
- Встроенные карты: интерактивная карта, загружаемая сразу, отнимает время. Обычно хватает изображения карты со ссылкой на маршрут.
- Множество плагинов и виджетов: окна чата, виджеты отзывов, погода, всплывающие окна с рассылкой или сертификатами.
- Несколько шрифтов во многих начертаниях, каждый с чужого сервера.
- Скрипты аналитики и рекламы: каждый сервис замедляет страницу и часто требует ещё и пункта в cookie-баннере. Подумайте, какие цифры вам действительно нужны; подробнее в руководстве по статистике сайта.
Как сделать правильно
- Одно сильное, хорошо сжатое фото в шапке вместо слайдера
- Ссылка на Instagram вместо встроенной ленты
- Один или два шрифта, лучше с собственного сервера
- Оставлять только те плагины, которыми гости действительно пользуются
- Хостинг с серверами рядом с вашими гостями и кешированием
Лучше не надо
- Видео с автозапуском как фон главной страницы
- Загружать фото прямо с камеры
- Меню только в PDF или на фото
- Всплывающее окно при первом визите, закрывающее содержимое
- Скрипты сервисов, которыми уже никто не пользуется
Некоторые тормоза в конструкторе не отключить, потому что они часть платформы. Тогда остаётся держать страницу лёгкой или сменить систему. Какие есть варианты и сколько они стоят, сравнивает руководство Сколько стоит сайт ресторана?.
Как сайт остаётся быстрым надолго
Сайт редко становится медленным сразу, обычно постепенно: здесь новое фото в полном размере, там виджет для акции, которая давно закончилась. Поэтому дважды в год планируйте короткую проверку, например перед летним сезоном и перед предрождественским периодом, когда особенно много гостей ищут место для праздника и подарочные сертификаты.
Чек-лист быстрого сайта заведения
- PageSpeed Insights проверен для главной, меню и бронирования, в мобильном виде
- LCP до 2,5 секунды, INP до 200 миллисекунд, CLS до 0,1
- Все фото обрезаны, сжаты и сохранены в WebP или AVIF
- Изображения с заданным размером, ниже на странице с lazy loading
- Меню текстом, PDF максимум как дополнение
- Нет слайдера и видео с автозапуском на главной
- Нет встроенных лент соцсетей, вместо них ссылки
- Удалены неиспользуемые плагины, виджеты и скрипты аналитики
- Часы работы, телефон и кнопка бронирования видны на телефоне без прокрутки
- Собственный тест на телефоне в мобильной сети
В Meine-Gastro-Website скорость заложена в основу: фото автоматически отдаются в подходящих размерах и современных форматах, меню стоит на странице текстом, а лишние скрипты не загружаются. Как это может выглядеть для вашего заведения, вы увидите в наших примерах сайтов или сразу в бесплатном превью.
Ваш быстрый сайт в превью
Посмотрите бесплатно, как может выглядеть ваш собственный сайт заведения: быстрый на телефоне, с меню текстом и кнопкой бронирования.
Бесплатный макет сайта вашего заведения, сделанный нами.
