Клиент открывает ваш сайт с телефона в метро. Первая картинка появляется через 4 секунды. Он уже ушёл в другую вкладку, к конкуренту, в Instagram. И вы даже не узнаете, что он был. Google знает и учитывает. Разбираем три метрики, которые сейчас решают, попадает ваш сайт в поисковую выдачу или нет, и как починить то, что сломано.

Почему скорость стала важнее дизайна

В 2020 году Google ввёл метрики Core Web Vitals три числа, которыми измеряется реальное ощущение от сайта на стороне пользователя. Не «красиво ли», не «есть ли форма записи», а именно насколько быстро пользователь может получить то, за чем пришёл. К 2022 году эти метрики стали одним из факторов ранжирования в Google. К 2026 году они влияют не только на позицию в выдаче, но и на то, попадает ли сайт в ИИ-ответы вообще.

Параллельно то же самое произошло у Яндекса: «Качество сайта», данные Поискового индекса, поведенческие метрики. Терминология другая, суть та же: быстрый сайт виден, медленный постепенно вытесняется.

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

Три метрики простым языком

LCP — Largest Contentful Paint (скорость появления главного)

Время от момента, когда пользователь нажал на ссылку, до момента, когда на экране появилась главная крупная картинка или главный блок текста. Не «сайт начал грузиться», а «сайт уже показал самое важное».

Зелёная зона: до 2.5 секунд.
Жёлтая: 2.5–4 секунды.
Красная: больше 4 секунд — и Google начинает понижать сайт в выдаче.

На студийных сайтах главное? - это обычно крупный баннер галереи или портретная фотография мастера. Если исходная фотография весит 4 мегабайта, если она JPEG вместо WebP или AVIF, если хостинг без CDN и сервер физически далеко от пользователя LCP почти гарантированно в красной зоне.

INP — Interaction to Next Paint (скорость реакции)

Сколько проходит от момента, когда пользователь на что-то нажал, до момента, когда страница на это отреагировала. Нажал «Открыть галерею» — за сколько миллисекунд она начала открываться.

Зелёная зона: до 200 миллисекунд.
Красная: больше 500 миллисекунд пользователь уже воспринимает сайт как «тормозит».

INP портится от тяжёлого JavaScript: сторонние виджеты, чаты, трекеры, анимации, загруженные «на всякий случай». Сайт студии, на котором подключены 8 скриптов сразу (Metrika, Analytics, чат, попап подписки, видеофон, карта, виджет отзывов, баннер акции) почти всегда в красной зоне по INP.

CLS — Cumulative Layout Shift (стабильность вёрстки)

Насколько содержимое «прыгает», пока страница догружается. Пользователь хочет нажать на «Записаться», в этот момент догрузился баннер и кнопка уехала вниз. Пользователь нажимает мимо, злится, уходит. CLS измеряет именно это ощущение «меня обманули».

Зелёная зона: до 0.1.
Красная: больше 0.25 сайт считается визуально нестабильным.

На тату-сайтах CLS ломают обычно: нефиксированные размеры у картинок портфолио, нестандартные шрифты, которые меняют высоту блоков, попапы и уведомления о cookie, которые появляются сверху и двигают всё остальное.

Где эти числа смотреть

Google предоставляет бесплатный инструмент PageSpeed Insights. Открываете, вводите адрес своего сайта, получаете отчёт с цифрами и подсказками. Отчёт показывает две версии «мобильная» и «десктопная». Ориентироваться нужно на мобильную: именно там большинство ваших потенциальных клиентов.

Для Яндекса аналог Яндекс.Вебмастер, раздел «Качество сайта». Данных там меньше, но направление то же.

Проверьте прямо сейчас. Большая часть студийных сайтов, сделанных в 2016–2020 годах, получает оценку мобильной версии в диапазоне 25–45 баллов из 100. Это не приговор, но это сигнал, что сайт работает против себя.

Что чаще всего ломает скорость на тату-сайтах

  1. Тяжёлые фотографии портфолио. Мастер выкладывает исходник с телефона — 4000×3000 пикселей, 5 мегабайт. На странице она показывается 400×300. Пользователь всё равно скачивает все 5 мегабайт.
  2. Старые форматы изображений. JPEG и PNG уступают WebP и AVIF в 2–3 раза по размеру при том же качестве. На сайтах без оптимизации вся галерея до сих пор в JPEG.
  3. Отсутствие ленивой загрузки. Сайт пытается загрузить все 80 работ сразу, хотя пользователь видит только 6. Решается одним атрибутом loading="lazy" у всех картинок.
  4. Большое количество сторонних скриптов. Каждый подключённый чат, аналитика, виджет отзывов, попап это дополнительные 100–500 килобайт кода.
  5. Шрифты, подключённые неправильно. Нестандартный шрифт без font-display: swap блокирует отрисовку текста. Пользователь видит пустой экран, пока шрифт загружается.
  6. Хостинг без CDN. Сервер физически стоит в одном городе. Пользователь из другого региона получает ответ с большой задержкой. CDN решает это кардинально.
  7. Устаревший протокол. HTTP/1.1 или HTTP/2 вместо HTTP/3 лишнее время на установку соединения. Об этом в следующей, четвёртой статье цикла.

Что конкретно делать по порядку

  1. Прогнать сайт через PageSpeed Insights. Записать три числа: LCP, INP, CLS. Это ваша точка отсчёта.
  2. Пересохранить все фотографии портфолио в WebP, с разумным размером (ширина 1200–1600 пикселей для главных, 800 для превью). Это одно действие обычно поднимает оценку на 20–30 баллов.
  3. Добавить loading="lazy" ко всем картинкам ниже первого экрана.
  4. Проверить, сколько сторонних скриптов на сайте. Всё, что не критично для записи клиента, отключить или отложить.
  5. Проверить шрифты: все нестандартные должны подключаться через font-display: swap.
  6. Если сайт на старом хостинге подключить CDN. Бюджетные варианты начинаются от нескольких сотен рублей в месяц и дают прирост скорости мгновенно.
  7. Через неделю после изменений снова прогнать PageSpeed. Зафиксировать новые числа.

Для студийного сайта средней сложности эта работа — два-три дня разработчика. Для самописного «сайта мечты» 2015 года, к которому не осталось документации, — иногда проще сделать заново, чем чинить.

Коротко

Три числа — LCP, INP, CLS — решают, увидит ли вас поиск и ИИ-ассистент. Красная зона по этим метрикам не косметическая проблема, а постепенная потеря клиентов, которые уходят до того, как сайт успел им что-либо показать. В следующей статье цикла - как к этой проблеме добавляется ещё и устаревший протокол HTTP, и почему переход на HTTP/3 во многих случаях стоит дешевле, чем кажется.

TattooToday проводит бесплатные публичные технические разборы сайтов мастеров и студий в форумной рубрике Tech Review. Замер PageSpeed, комментарий по конкретным проблемам, список приоритетов.