Скорость сайта и Core Web Vitals: как не терять позиции из-за медленной загрузки
Скорость загрузки — это не только удобство для пользователя. С 2021 года Google официально использует Core Web Vitals как фактор ранжирования. Яндекс тоже учитывает скорость через поведенческие факторы: медленный сайт = высокий процент отказов = падение позиций.
Исследования показывают: задержка загрузки в 1 секунду снижает конверсию на 7%, а 53% мобильных пользователей покидают сайт, если он не загружается за 3 секунды. Для интернет-магазина это прямые потери выручки.
Хорошая новость: большинство проблем со скоростью WordPress-сайта решаются плагинами и настройками без программиста. В этой статье — конкретный план действий от диагностики до результата.
1. Core Web Vitals: что это и почему важно
Core Web Vitals — три метрики, которые Google использует для оценки пользовательского опыта на сайте. С мая 2021 года они входят в алгоритм ранжирования.
| Метрика | Что измеряет | Хорошо | Нужно улучшить | Плохо |
| LCP | Скорость загрузки главного контента (текст, фото) | до 2.5 сек | 2.5 — 4 сек | более 4 сек |
| CLS | Стабильность layout — не прыгает ли контент при загрузке | менее 0.1 | 0.1 — 0.25 | более 0.25 |
| FID / INP | Отзывчивость — как быстро сайт реагирует на первый клик | до 200 мс | 200 — 500 мс | более 500 мс |
FID (First Input Delay) заменён на INP (Interaction to Next Paint) с марта 2024 года. INP измеряет отзывчивость на все взаимодействия, а не только первое.
Проверить свои показатели: Google Search Console -> Взаимодействие -> Core Web Vitals. Или быстрая проверка: pagespeed.web.dev — введите URL, получите оценку за 30 секунд.
2. Диагностика: с чего начать
Прежде чем что-то оптимизировать — измерьте текущее состояние. Без цифр непонятно, что улучшать и есть ли прогресс.
| Инструмент | Что проверяет | Как использовать |
| PageSpeed Insights | CWV, общий балл, конкретные рекомендации | pagespeed.web.dev — введите URL главной, категории и товара |
| Google Search Console | Реальные данные CWV от живых пользователей | Взаимодействие -> Core Web Vitals -> смотрите проблемные страницы |
| GTmetrix | Водопад загрузки — какой файл сколько весит | gtmetrix.com — бесплатно, выберите сервер в Европе |
| Chrome DevTools | Детальный анализ загрузки прямо в браузере | F12 -> вкладка Lighthouse -> Analyse page load |
✓ Проверяйте скорость именно страницы товара и страницы категории — они самые тяжёлые из-за фотографий. Главная страница часто быстрее, но не показательна для реального опыта покупателя.
3. Главные причины медленного WordPress: топ-7
| # | Причина | Влияние | Решение |
| 1 | Несжатые изображения (главная причина) | Критическое | Плагин Smush или ShortPixel, формат WebP |
| 2 | Нет кэширования страниц | Высокое | WP Rocket, LiteSpeed Cache, WP Super Cache |
| 3 | Медленный хостинг (shared hosting с перегрузкой) | Высокое | Переехать на LiteSpeed-хостинг (SpaceWeb, Beget) |
| 4 | Слишком много плагинов или тяжёлые плагины | Среднее | Деактивировать неиспользуемые, заменить тяжёлые |
| 5 | CSS и JS не минифицированы | Среднее | WP Rocket или Autoptimize |
| 6 | Нет CDN — файлы грузятся с одного сервера | Среднее | Cloudflare (бесплатный план) |
| 7 | Нет отложенной загрузки изображений (Lazy Load) | Среднее | Включить в Smush или WP Rocket |
4. Изображения: решаем главную проблему
Изображения — причина 60–80% лишнего веса страниц интернет-магазина. Фотографии товаров в исходном качестве с телефона весят 3–8 МБ каждая. Страница с 20 товарами = 60–160 МБ только на фото. Это катастрофа для скорости.
Формат WebP: обязательный переход
WebP — современный формат изображений от Google. Весит на 25–35% меньше JPEG при том же визуальном качестве. Поддерживается всеми современными браузерами.
- Установите плагин ShortPixel или Smush PRO.
- Включите конвертацию в WebP при загрузке новых изображений.
- Запустите bulk-конвертацию всех существующих изображений.
- Плагин автоматически подаёт WebP браузерам, которые его поддерживают, и JPEG — старым браузерам.
Lazy Load: загружать только видимое
Lazy Load — изображения загружаются только тогда, когда пользователь доскролливает до них. Страница с 50 товарами загружает сначала только 5–6 фото, остальные — по мере скролла.
- Включите в Smush: Smush -> Lazy Load -> включить.
- Или в WP Rocket: Media -> Lazy Load Images.
- Не применяйте Lazy Load к главному изображению на странице — это замедляет LCP.
Правильные размеры
Загружать изображение 4000×3000 px для отображения в 400×400 px — распространённая ошибка. Настройте максимальный размер загружаемых изображений.
- WordPress -> Настройки -> Медиафайлы -> установите максимальный размер 1200×1200 px для магазина.
- WooCommerce автоматически создаёт несколько размеров изображений — убедитесь, что используется нужный.
5. Кэширование: самый быстрый способ ускорить сайт
Кэширование — создание статических HTML-копий страниц, которые отдаются пользователю мгновенно без обращения к базе данных. Это самый эффективный способ ускорить WordPress без смены хостинга.
WP Rocket — лучший кэш-плагин
WP Rocket ($59/год) — самый функциональный плагин для ускорения WordPress. Настраивается за 5 минут, работает сразу после активации.
- Кэширование страниц: включить сразу после установки.
- Сжатие GZIP: уменьшает размер передаваемых файлов.
- Минификация CSS/JS: убирает лишние пробелы и комментарии из кода.
- Отложенная загрузка JavaScript: JS-файлы загружаются после основного контента.
- Предзагрузка кэша: робот WP Rocket обходит сайт и прогревает кэш заранее.
✓ WP Rocket окупается за 1–2 месяца за счёт роста конверсии от ускорения сайта. Но если бюджет ограничен — бесплатный LiteSpeed Cache даёт 80% тех же результатов на LiteSpeed-хостинге.
LiteSpeed Cache — бесплатная альтернатива
Если ваш хостинг работает на LiteSpeed-сервере (SpaceWeb, многие тарифы Beget) — LiteSpeed Cache бесплатен и работает на уровне сервера, что быстрее любого PHP-плагина.
- Установите плагин LiteSpeed Cache из каталога WordPress.
- LiteSpeed Cache -> Общее -> включите кэширование.
- LiteSpeed Cache -> Оптимизация страниц -> включите минификацию CSS и JS.
- LiteSpeed Cache -> Медиа -> включите Lazy Load и WebP.
6. Минификация и объединение файлов
Каждый CSS и JS файл — это отдельный запрос к серверу. Чем больше запросов — тем медленнее загрузка. Минификация убирает лишний код, объединение сокращает количество запросов.
- Минификация CSS: убирает пробелы, переносы, комментарии — файл становится меньше на 20–30%.
- Минификация JS: то же для JavaScript-файлов.
- Объединение CSS/JS: несколько файлов сливаются в один — меньше запросов к серверу.
⚠ Объединение JS может сломать работу некоторых плагинов. После включения — обязательно проверьте все функции сайта: корзину, оформление заказа, фильтры. При проблемах — отключите объединение JS, оставьте только минификацию.
7. CDN: доставка контента по всему миру
CDN (Content Delivery Network) — сеть серверов по всему миру. Статические файлы вашего сайта (изображения, CSS, JS) хранятся на ближайшем к покупателю сервере и загружаются быстрее.
Для СНГ-магазина CDN особенно важен при продажах в разные страны: покупатель из Казахстана будет получать файлы с ближайшего сервера, а не из Москвы.
Cloudflare: бесплатный CDN
- Зарегистрируйтесь на cloudflare.com — добавьте ваш домен.
- Cloudflare покажет текущие DNS-записи — проверьте, что они совпадают с реальными.
- Смените NS-серверы домена на серверы Cloudflare (в панели регистратора домена).
- Дождитесь распространения DNS (1–24 часа).
- В Cloudflare: Speed -> Optimization -> включите Auto Minify для CSS, JS, HTML.
- Caching -> Caching Level -> Standard.
✓ Бесплатный план Cloudflare даёт CDN, защиту от DDoS и SSL-сертификат. Для большинства магазинов МСБ этого достаточно без платного тарифа.
8. База данных: чистка и оптимизация
WordPress хранит в базе данных историю изменений страниц, спам-комментарии, временные данные плагинов. Со временем база «распухает» и замедляет запросы.
- Плагин WP-Optimize — очистка базы данных в 1 клик: удаляет черновики, спам, временные данные.
- Ограничьте количество хранимых ревизий: добавьте в wp-config.php строку define( «WP_POST_REVISIONS», 3 );
- Запускайте очистку базы раз в месяц — или настройте автоматически в WP-Optimize.
9. Результаты: каких показателей добиться
| Метрика | До оптимизации (типично) | После оптимизации | Как добиться |
| PageSpeed Mobile | 20–45 баллов | 60–85 баллов | WebP + кэш + Lazy Load |
| PageSpeed Desktop | 50–70 баллов | 85–95 баллов | Минификация + CDN |
| LCP | 5–8 секунд | 1.5–2.5 секунды | WebP + кэш + хостинг |
| Размер страницы | 3–8 МБ | 0.5–1.5 МБ | Сжатие изображений |
| Время до первого байта (TTFB) | 0.8–2 сек | 0.2–0.5 сек | Кэш + хороший хостинг |
Показатель 100/100 в PageSpeed — не цель. Реальная цель для магазина: 60+ на мобильных и 80+ на десктопе. Это достижимо без потери функциональности WooCommerce.
10. Пошаговый план оптимизации: порядок действий
- Замерьте текущие показатели в PageSpeed Insights — зафиксируйте цифры.
- Установите Smush — сожмите все существующие изображения, включите WebP и Lazy Load.
- Установите WP Rocket или LiteSpeed Cache — включите базовое кэширование.
- Включите минификацию CSS — проверьте что сайт работает корректно.
- Включите минификацию JS — проверьте корзину и оформление заказа.
- Подключите Cloudflare — настройте CDN и Auto Minify.
- Очистите базу данных через WP-Optimize.
- Замерьте показатели повторно — сравните с исходными.
✓ Делайте по одному изменению за раз и проверяйте результат. Если что-то сломалось — легко найти причину и откатить конкретный шаг.
11. Что НЕ поможет (популярные мифы)
- «Поставлю ещё 3 плагина для ускорения» — каждый плагин добавляет нагрузку. Один хороший кэш-плагин лучше пяти посредственных.
- «Куплю самый дорогой тариф хостинга» — без оптимизации изображений даже VPS не спасёт.
- «Сменю тему на более лёгкую» — да, тема влияет, но изображения и плагины важнее.
- «PageSpeed 100 поднимет меня в топ» — скорость важна, но контент и ссылки важнее. Цельтесь в 60–80+, не в 100.
Что делать дальше
Скорость оптимизирована. Переходим к блоку технических настроек: SSL, безопасность и резервные копии. Читайте: «SSL-сертификат, HTTPS и безопасность: базовый минимум для магазина» — следующая статья.
под контролем
