«Сайт медленный» — фраза, которую я слышу от каждого второго клиента. И почти всегда это связано с позициями в поиске. Вот практическое руководство по ускорению.
Core Web Vitals: что измерять
- LCP (Largest Contentful Paint) — как быстро загружается главный контент. Цель: < 2.5 сек.
- INP (Interaction to Next Paint) — как быстро сайт реагирует на клик. Цель: < 200 мс.
- CLS (Cumulative Layout Shift) — прыгает ли контент при загрузке. Цель: < 0.1.
Быстрые победы
- Изображения: WebP формат, lazy loading, srcset для разных экранов. Экономия: 40-60% трафика.
- CSS/JS: минификация, критический CSS инлайном, defer для скриптов. Экономия: 200-500ms.
- Шрифты: font-display: swap, preload для основного шрифта. Без этого текст не виден 1-3 секунды.
- Кеширование: правильные Cache-Control заголовки. Статика — на год, HTML — revalidate.
Серверная оптимизация
Gzip/Brotli сжатие. HTTP/2. CDN для статики. Database query optimization — каждый N+1 запрос добавляет 50-100ms.
Как это влияет на SEO
Google подтверждает: Core Web Vitals — фактор ранжирования. На практике я видел рост на 15-20 позиций после оптимизации скорости. Яндекс тоже учитывает скорость, хотя менее явно.
Нужна оптимизация? напишите мне. Мои кейсы — в мои проекты.
Реальные кейсы оптимизации
Кейс 1: Интернет-магазин (1200 товаров). LCP: 5.8s → 1.4s. Что сделал: 1) Конвертировал 3000 JPEG в WebP (экономия 65%), 2) Внедрил lazy loading для товарных карточек, 3) Критический CSS инлайном в <head>, 4) Перенёс JS в defer. Результат: +22 позиции в среднем по коммерческим запросам за 2 месяца.
Кейс 2: Блог (500 статей). INP: 450ms → 120ms. Проблема: тяжёлый JavaScript для комментариев загружался синхронно. Решение: lazy load комментариев (загружаются при скролле к ним). Дополнительно: виртуализация списка статей на главной.
Кейс 3: Лендинг. CLS: 0.35 → 0.02. Проблема: шрифты грузились с задержкой, текст «прыгал». Решение: font-display:swap + preload для основного шрифта + явные width/height для всех img.
Инструменты для измерения
PageSpeed Insights: Основной инструмент. Показывает реальные данные пользователей (CrUX) + лабораторные замеры. Тестирую каждую важную страницу после изменений.
WebPageTest.org: Детальные waterfall-диаграммы. Видишь, что именно тормозит: DNS, TTFB, скачивание, рендеринг. Бесплатно.
Chrome DevTools → Performance: Для профилирования JS. Flame chart показывает, какие функции блокируют main thread. Нашёл через него N+1 проблему с DOM-манипуляциями.
Lighthouse CI: Автоматическая проверка при каждом deploy. Если LCP > 2.5s или INP > 200ms — deploy блокируется. Настроил через GitHub Actions за 30 минут.