Оптимизация скорости сайта: LCP ниже 2 секунд и зелёные Core Web Vitals

Оптимизация скорости загрузки сайта

Медленный сайт --- это не техническая проблема. Это проблема бизнеса.

Если страница грузится дольше 3 секунд, 53% мобильных пользователей уходят. Не на другую страницу вашего сайта --- к конкуренту. Google и Яндекс учитывают скорость в ранжировании. Медленный сайт проигрывает быстрому при прочих равных.

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

Что такое Core Web Vitals

Core Web Vitals --- это метрики Google, которые измеряют пользовательский опыт загрузки страницы. С 2021 года они являются фактором ранжирования.

Три ключевые метрики:

LCP (Largest Contentful Paint) --- время до отрисовки самого крупного элемента на экране. Обычно это главное изображение или заголовок. Норма: до 2.5 секунд.

INP (Interaction to Next Paint) --- задержка между действием пользователя (клик, нажатие) и визуальным откликом. Норма: до 200 мс.

CLS (Cumulative Layout Shift) --- визуальная стабильность. Насколько сильно «прыгают» элементы страницы во время загрузки. Норма: до 0.1.

Если хотя бы одна метрика в красной зоне --- сайт теряет позиции. Мы доводим все три до зелёной.

Типичные причины медленной загрузки

За годы работы мы видели сотни медленных сайтов. Проблемы в 90% случаев одни и те же.

Неоптимизированные изображения

Главный враг скорости. Фотограф прислал картинку 4000x3000 пикселей и 5 МБ --- менеджер загрузил её на сайт как есть. На странице с 10 такими картинками пользователь загружает 50 МБ данных.

Что делаем:

• Конвертация в WebP/AVIF (в 2-3 раза легче JPEG при том же качестве)
• Ресайз до нужных размеров (зачем грузить 4000px, если на экране 800px?)
• Lazy loading --- изображения ниже первого экрана загружаются только когда до них доскроллят
• Responsive images --- разные размеры для разных устройств
• Placeholder (blur или цвет) --- вместо пустого места во время загрузки

Тяжёлый JavaScript

Сайт подключает 15 библиотек, 3 чата, 5 счётчиков аналитики и виджет погоды. Каждый скрипт --- это HTTP-запрос, парсинг и выполнение. Всё это блокирует рендеринг.

Что делаем:

• Аудит подключённых скриптов --- убираем ненужные
• Defer и async для некритичных скриптов
• Code splitting --- разбиваем JavaScript на чанки, загружаем только нужные
• Tree shaking --- удаляем неиспользуемый код из бандла
• Перенос тяжёлых скриптов (чаты, аналитика) на загрузку по событию

Отсутствие кэширования

Каждый визит --- сервер заново генерирует страницу, заново отдаёт CSS, JS, картинки. Хотя контент не менялся неделями.

Что настраиваем:

• Браузерное кэширование (Cache-Control заголовки) --- статика кэшируется на стороне пользователя
• Серверное кэширование --- сгенерированные страницы кэшируются на стороне сервера
• CDN --- раздача статики с ближайшего к пользователю сервера
• Redis --- кэширование результатов запросов к базе данных

Медленный сервер

Дешёвый shared-хостинг, на котором сидят 200 сайтов. Или VPS с 1 ГБ оперативной памяти, на котором крутится Битрикс.

Варианты решения:

• Миграция на более мощный сервер
• Настройка Nginx для отдачи статики
• Оптимизация конфигурации PHP/Node.js
• Настройка OPcache для PHP-сайтов
• Gzip/Brotli сжатие на уровне сервера

Блокирующий CSS

Весь CSS загружается одним файлом в head. Пока он не загрузится и не распарсится --- ничего не отрисуется.

Что делаем:

• Critical CSS --- инлайним стили первого экрана
• Остальной CSS загружаем асинхронно
• Удаляем неиспользуемые стили (PurgeCSS)
• Минификация CSS

Проблемы со шрифтами

Кастомные шрифты загружаются с внешнего сервера. Пока шрифт не загрузится --- текст либо невидим (FOIT), либо отображается системным шрифтом и потом перескакивает (FOUT).

Что делаем:

• Хостинг шрифтов локально (не с Google Fonts)
• font-display: swap --- показываем текст сразу системным шрифтом
• Preload для критичных шрифтов
• Подмножества (subsetting) --- грузим только кириллицу, если латиница не нужна

Как мы работаем

Шаг 1. Аудит --- 1-3 дня

Проводим комплексную диагностику:

• Google PageSpeed Insights (мобильная и десктопная версия)
• Google Lighthouse (развёрнутый отчёт)
• WebPageTest (водопадная диаграмма загрузки)
• Chrome DevTools (профилирование рендеринга)
• Анализ Core Web Vitals из Search Console (реальные данные пользователей)
• Проверка серверного времени отклика (TTFB)

На выходе --- отчёт с конкретными проблемами и планом исправлений. Каждая проблема с оценкой влияния на скорость и сложностью исправления.

Шаг 2. Приоритизация

Не все проблемы одинаково критичны. Оптимизация изображений может дать прирост в 40%, а минификация CSS --- 2%. Начинаем с того, что даёт максимальный эффект при минимальных усилиях.

Обычно приоритеты такие:

1. Изображения (максимальный эффект)
2. Серверное кэширование и сжатие
3. JavaScript-оптимизация
4. CSS-оптимизация
5. Шрифты
6. Сторонние скрипты

Шаг 3. Оптимизация --- 1-3 недели

Вносим изменения поэтапно. После каждого этапа замеряем результат. Если что-то пошло не так --- откатываем.

Работаем на тестовой копии сайта. На боевой переносим только проверенные изменения.

Шаг 4. Проверка результатов

Замеряем те же метрики, что и на этапе аудита. Сравниваем «до» и «после». Формируем итоговый отчёт с доказательством улучшений.

Ждём 2-4 недели после оптимизации, чтобы Google собрал новые данные Core Web Vitals из CrUX (Chrome User Experience Report). Только реальные данные пользователей подтверждают результат.

Примеры результатов

Типичные результаты наших оптимизаций:

• Сайт на WordPress (медицинская тематика): PageSpeed Mobile с 23 до 78 баллов. LCP с 8.2 до 2.1 секунды. Основная работа --- оптимизация изображений и настройка кэширования.

• Интернет-магазин на Битрикс: PageSpeed Mobile с 15 до 62 баллов. Время загрузки каталога с 6 до 1.8 секунды. Основная работа --- серверное кэширование, оптимизация запросов к БД, lazy loading.

• Корпоративный сайт на Next.js: PageSpeed Mobile с 67 до 95 баллов. CLS с 0.25 до 0.02. Основная работа --- оптимизация шрифтов, critical CSS, image placeholders.

Стоимость

Что входит в базовую оптимизацию

• Оптимизация изображений
• Настройка кэширования
• Минификация CSS и JS
• Настройка сжатия (Gzip/Brotli)
• Оптимизация шрифтов

Что входит в комплексную оптимизацию

• Всё из базовой
• JavaScript-аудит и оптимизация
• Critical CSS
• Lazy loading и code splitting
• Оптимизация сторонних скриптов
• Настройка CDN
• Серверная оптимизация

Когда оптимизация не поможет

Бывает, что сайт медленный не из-за картинок или скриптов, а из-за архитектурных проблем. CMS генерирует 200 запросов к базе на каждую страницу. Или тема WordPress подключает 40 CSS-файлов, потому что так работает конструктор.

В таких случаях оптимизация даст ограниченный эффект. Мы честно скажем: «Потолок --- 60 баллов, чтобы выйти на 90+ --- нужна переработка». И предложим план действий.

Но в большинстве случаев оптимизация --- это самый выгодный способ улучшить сайт. Никаких переделок, никаких миграций. Те же страницы, тот же дизайн --- но в 2-3 раза быстрее.