Что именно мы измеряли

LCP показывает, когда в видимой области появился крупнейший значимый элемент. На проверенных страницах таким элементом был заголовок h1. Это удобный случай: смысл первого экрана можно отдать в исходном HTML и не заставлять человека ждать фотографию, видео, веб-шрифт или ответ клиентского приложения.

Перед публикацией каждый маршрут production-кандидата открывался три раза с отключённым кэшем в профиле Pixel 7. Сеть ограничивалась до 1,6 Мбит/с с задержкой 150 мс, процессор замедлялся в четыре раза. В отчёт попадала медиана, а не самый красивый результат. Одновременно фиксировались FCP, CLS, TTFB, LCP-элемент и начальная передача ресурсов. Это лабораторная проверка той же сборки, которая затем работает на VPS, а не замер скорости интернета между всеми будущими посетителями и сервером.

  • Главная — 1600 мс LCP, 0 CLS.
  • Контакты — 1488 мс LCP, 0 CLS.
  • Страница услуги — 1516 мс LCP, 0 CLS.
  • Полный протокол хранится вместе с исходниками и повторяется после значимых изменений.

Что делает маленький production-сервер

mvpm.pro работает на VPS с одним виртуальным процессором и 956 МБ доступной оперативной памяти. На нём одновременно запущены Nginx, приложение Next.js с Payload, PostgreSQL и небольшой процесс доставки Telegram-обновлений. Дополнительный swap страхует от резкого исчерпания памяти, но сам по себе сайт не ускоряет.

Главное ограничение принято архитектурно: production-сервер не собирает приложение. Проверенная Docker-сборка создаётся на рабочей машине и передаётся уже готовой. VPS выполняет только постоянную работу — принимает HTTPS, отдаёт страницы, обращается к базе и проходит health-check. Так слабая машина не тратит память и процессор на тяжёлую сборку во время выпуска.

  • Сборка и тесты выполняются до публикации, а не на боевом сервере.
  • Next.js слушает только loopback; наружу смотрит Nginx с HTTPS.
  • PostgreSQL не публикует порт в интернет.
  • Предыдущий образ сохраняется как быстрый путь отката.

Сначала текст, который решает задачу

Быстрый пустой экран не имеет ценности. Первый HTML уже содержит единственный h1, вводный текст и основные ссылки. Поисковый робот и браузер получают один и тот же смысл без ожидания гидратации. Клиентские компоненты остаются только там, где действительно требуется взаимодействие.

Фирменный шрифт подключён с безопасной заменой и не блокирует появление текста. Если он не успевает загрузиться, браузер показывает системный вариант, а содержание остаётся доступным. Для LCP это важнее, чем попытка любой ценой показать идеальную типографику до первой буквы.

Второй экран не должен тормозить первый

На сайте есть настоящие интерфейсы проектов, фотографии, анимации и видео. Они не удалены ради лабораторной цифры, но получают правильное место в очереди. Изображения ниже первого экрана загружаются лениво, имеют известные размеры и подходящие варианты для разных ширин. Видео начинает загрузку только там, где оно действительно нужно.

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

  • У каждого изображения зарезервирована геометрия.
  • Один экран не загружает одновременно desktop- и mobile-герой.
  • Тяжёлое медиа ниже первого экрана не получает высокий приоритет.
  • Библиотека не попадает в общий пакет ради одного локального эффекта.

CLS 0 — это часть скорости, а не отдельная красота

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

Для этого размеры изображений, видео, демонстрационных рамок и интерактивных областей задаются заранее. Поздно появляющийся элемент не вставляется над уже прочитанным содержанием. Та же дисциплина помогает и поисковому роботу: структура страницы не зависит от случайного порядка сетевых ответов.

Чего эти цифры не доказывают

Лабораторная медиана — это воспроизводимый контроль выпуска, а не статистика всех посетителей. Она не означает, что каждый пользователь в любой сети увидит страницу ровно через 1,6 секунды. Для полевой оценки нужны накопленные данные реальных визитов и 75-й процентиль отдельно для мобильных и компьютеров.

Результат также нельзя навсегда приписать фреймворку или серверу. Новый шрифт, крупный первый экран, внешний виджет, аналитический сценарий или изменение кеширования способны передвинуть LCP. Поэтому performance-аудит встроен в выпуск и повторяется после изменений, которые могут затронуть начальную загрузку.

  • Не сравниваем разные сайты по одному случайному запуску.
  • Не называем лабораторный тест полевыми Core Web Vitals.
  • Не скрываем тяжёлое содержимое от теста, если его увидит пользователь.
  • Не оптимизируем цифру ценой смысла, доступности или надёжности.