Почему скорость = деньги
Метрики скорости определяют итоговый PageSpeed
Скорость загрузки сайта влияет на бизнес напрямую и измеримо:
- Каждая секунда задержки снижает конверсию на 7% (Akamai).
- 53% мобильных пользователей уходят, если страница грузится дольше 3 секунд (Google).
- Сайты с PageSpeed 90+ имеют на 15-25% выше конверсию при равном трафике ([данные Primo Agency на 50+ проектах]).
- Core Web Vitals — фактор ранжирования Google и Яндекса.
Инвестиции в скорость окупаются быстрее, чем в рекламу. Ускорение сайта с 50 до 90 баллов даёт обычно +20-40% к заявкам без увеличения бюджета на трафик.
Core Web Vitals 2026: новые цели
LCP — Largest Contentful Paint
Что измеряет: время до отрисовки самого крупного видимого элемента (обычно — главное изображение или заголовок).
- Хорошо: менее 2,5 с.
- Нужно улучшить: 2,5–4 с.
- Плохо: более 4 с.
INP — Interaction to Next Paint
Что измеряет: задержку между взаимодействием пользователя (клик, тап) и визуальным откликом интерфейса. С марта 2024 заменил FID.
- Хорошо: менее 200 мс.
- Нужно улучшить: 200–500 мс.
- Плохо: более 500 мс.
CLS — Cumulative Layout Shift
Что измеряет: суммарный сдвиг контента во время загрузки.
- Хорошо: менее 0,1.
- Нужно улучшить: 0,1–0,25.
- Плохо: более 0,25.
TTFB и FCP
Дополнительные метрики:
- TTFB (Time to First Byte) — время до первого байта от сервера. Цель: менее 800 мс.
- FCP (First Contentful Paint) — первый отрисованный пиксель. Цель: менее 1,8 с.
Стек оптимизации: 5 уровней
Уровень 1: Серверная инфраструктура
Хостинг и сервер
- Качественный хостинг — критическая основа. Дешёвый shared-хостинг = заведомо проигранная партия.
- Локализация серверов — для российской аудитории сервер в РФ + CDN с EU/RU узлами.
- HTTP/2 или HTTP/3 — параллельная загрузка ресурсов, мультиплексирование.
- Brotli или Gzip-сжатие — экономия 30-70% веса HTML/CSS/JS.
CDN (Content Delivery Network)
- Cloudflare (бесплатный план уже даёт 80% эффекта).
- Yandex Cloud CDN (для российского рынка).
- Selectel CDN.
CDN сокращает TTFB на 200-500 мс для удалённых регионов.
Кеширование
- Cache-Control headers:
- Статика (CSS, JS, шрифты): max-age=31536000, immutable. - Изображения: max-age=2592000 (30 дней). - HTML: no-cache, must-revalidate (для динамики) или короткий TTL.
- CDN-кеширование — настройте правильные правила в Cloudflare/Yandex Cloud.
- ISR (Incremental Static Regeneration) — для Nuxt/Next: страница генерируется при первом запросе и хранится в кеше.
Уровень 2: Изображения
Изображения — самый тяжёлый ресурс на 90% сайтов и самая быстрая оптимизация.
Современные форматы
- WebP — на 25-35% легче JPEG, поддержка 95%+ браузеров.
- AVIF — на 30-50% легче WebP, новейший формат, поддержка 90%+.
- Использование: через
<picture>с fallback на JPEG/PNG.
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="..." width="1200" height="630">
</picture>Lazy loading
- Атрибут
loading="lazy"на изображениях ниже первого экрана. - Для критичных изображений (LCP-элемент) —
loading="eager"+fetchpriority="high".
Адаптивные изображения
- Используйте
srcsetиsizesдля разных разрешений. - Не отдавайте 1920×1080 на мобильный экран 375 пикселей.
- В Nuxt 3 используйте
@nuxt/image, в Next.js —next/image.
Width / Height
- Всегда указывайте атрибуты width и height — это предотвращает CLS.
- Можно через aspect-ratio в CSS.
Уровень 3: JavaScript и CSS
Code Splitting
- Загружайте только нужный JS на текущей странице.
- В современных фреймворках (Nuxt, Next, SvelteKit) — из коробки.
- Динамический импорт тяжёлых компонентов через
import().
Tree Shaking
- Удаление неиспользуемого кода при сборке.
- Импортируйте именованные экспорты, а не весь модуль:
// плохо — тянет всю lodash
import _ from 'lodash'
// хорошо — только нужная функция
import debounce from 'lodash/debounce'Critical CSS
- Инлайните критичный CSS (для первого экрана) в
<head>. - Остальное загружайте асинхронно.
- Plugin: critters в Nuxt/Next.
Минификация
- CSS, JS, HTML — обязательно минифицировать в production.
- Современные сборщики (Vite, Turbopack, esbuild) делают это автоматически.
Сторонние скрипты — главный убийца INP
Аналитика, чаты, виджеты, ретаргетинг — каждый сторонний скрипт добавляет нагрузку.
Правила работы:
- Откладывайте загрузку до момента, когда они нужны (cookie consent, скролл, действие).
- Используйте атрибуты
asyncилиdeferгде возможно. - Грузите через Web Worker (Partytown — отличное решение).
- Удаляйте неиспользуемые скрипты.
- Подключайте аналитику через серверную обёртку, чтобы загружать минимум на клиенте.
На сайтах Primo Agency сторонние скрипты грузятся только после клика на cookie banner — это даёт +30-50 баллов PageSpeed на старте.
Уровень 4: Шрифты
Веб-шрифты часто становятся скрытым тормозом.
Оптимизация
- Используйте только нужные веса (regular + bold, не все 9 weights).
- Подключайте через self-hosting (быстрее CDN-чужого).
- Используйте font-display: swap — текст показывается дефолтным шрифтом до загрузки кастомного.
- Preload критичных шрифтов:
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>- Subsetting — оставьте только нужные диапазоны символов (кириллица + латиница).
Уровень 5: Архитектура и стек
Современный фреймворк с правильной архитектурой обходит легаси-CMS на голову:
- SSR + ISR (Nuxt 3 / Next.js) — мгновенная загрузка.
- Headless CMS — никакого тяжёлого backend на каждый запрос.
- Edge Functions — обработка ближе к пользователю.
Сайт на Nuxt 3 + Strapi с правильной настройкой даёт PageSpeed 95-100 из коробки, в то время как WordPress без оптимизации редко поднимается выше 60.
Чек-лист быстрой оптимизации
| Задача | Влияние | Сложность | Приоритет | |---|---|---|---| | Перевод изображений в WebP/AVIF | Очень высокое | Низкая | 1 | | Lazy loading изображений | Высокое | Низкая | 2 | | Минификация CSS/JS | Среднее | Низкая | 3 | | Подключение CDN | Высокое | Средняя | 4 | | Brotli-сжатие | Высокое | Средняя | 5 | | Откладывание сторонних скриптов | Очень высокое (INP) | Средняя | 6 | | HTTP/3 | Среднее | Средняя | 7 | | Critical CSS | Среднее | Высокая | 8 | | Code splitting | Высокое | Высокая | 9 | | Миграция на современный стек | Очень высокое | Очень высокая | 10 |
Реальный кейс: с 32 до 96 за 6 недель
Оптимизация загрузки в 2-3 раза повышает конверсию
Клиент: интернет-магазин на 1С-Битрикс, 5000 SKU.
Исходное состояние:
- PageSpeed Mobile: 32, Desktop: 58.
- LCP: 4,8 с, INP: 480 мс, CLS: 0,18.
- Bounce rate: 64%.
Что мы сделали
- Изображения — массовый перевод 25 000 файлов в WebP, lazy loading, адаптивные размеры.
- CDN — Cloudflare с правилами кеширования.
- Brotli — на сервере + CDN.
- Сторонние скрипты — отложены до cookie consent, выгружены через Partytown.
- Шрифты — self-hosting + preload + font-display swap.
- Critical CSS — извлечение и инлайн.
- Удаление мёртвого CSS — чистка через PurgeCSS.
Результат
- PageSpeed Mobile: 87, Desktop: 96.
- LCP: 1,8 с, INP: 140 мс, CLS: 0,03.
- Bounce rate: 38% (-26 пп).
- Конверсия выросла на 22%, при том же трафике.
Как мерить и отслеживать
Инструменты
- PageSpeed Insights — главный инструмент, использует данные CrUX (полевые) + Lighthouse (лабораторные).
- Search Console → Core Web Vitals — реальные данные ваших пользователей.
- Web Vitals Extension для Chrome — мониторинг в реальном времени.
- WebPageTest — детальный анализ waterfall.
- Sentry Performance — production-мониторинг производительности.
Что отслеживать
- Полевые Core Web Vitals (CrUX) — сверять раз в неделю.
- LCP-элемент — какой именно элемент тормозит.
- Тяжёлые страницы — выявление аномалий.
- Регрессии после деплоев.
Распространённые ошибки
Ошибка 1: оптимизация только Desktop.
Mobile-First Index — Google смотрит на мобильную версию. Ускоряйте сначала мобилку.
Ошибка 2: доверие только лабораторным данным.
Lighthouse 95 на ноутбуке разработчика ≠ 95 у реального пользователя. Сверяйтесь с CrUX.
Ошибка 3: «оптимизация» через тяжёлые SEO-плагины.
Некоторые SEO-плагины WordPress сами становятся узким местом. Аудит производительности должен включать аудит самих оптимизаторов.
Ошибка 4: забыть про шрифты.
Кастомные шрифты с font-display: block без preload часто дают LCP 4-5 с на пустом месте.
Заключение
Оптимизация скорости — технически решаемая задача. Большинство проблем стандартные: тяжёлые изображения, не оптимизированные сторонние скрипты, плохой хостинг, отсутствие CDN.
Минимальная программа для бизнеса:
- Раз в неделю — мониторинг Core Web Vitals в Search Console.
- Раз в месяц — экспресс-аудит критичных страниц.
- Перед каждым релизом — Lighthouse-проверка.
- Раз в квартал — полный аудит производительности.
Если ваш сайт ниже PageSpeed 80 — вы теряете деньги. В Primo Agency мы делаем ускорение как разовую услугу или как часть разработки сайтов и SEO-продвижения. Стандартный аудит + внедрение — 4-8 недель. Обсудить ваш проект →.
