Скорость сайта критически влияет на SEO, конверсию и позиции в поиске. Вот пошаговая оптимизация для мобильных и десктопных версий.
📊 Что такое Core Web Vitals?
Google оценивает скорость сайта по 3 ключевым метрикам:
- LCP (Largest Contentful Paint) – загрузка основного контента (должно быть ≤ 2.5 сек).
- FID (First Input Delay) – время отклика на действия пользователя (≤ 100 мс).
- CLS (Cumulative Layout Shift) – стабильность верстки (≤ 0.1).
Проверить свой сайт: [PageSpeed Insights](https://pagespeed.web.dev/).
⚡ 10 способов ускорить сайт
- Оптимизируйте изображения
- Сжимайте через TinyPNG, Squoosh или плагин Smush.
- Конвертируйте в WebP (на 30% легче JPEG/PNG).
- Указывайте размеры (width/height) для предотвращения CLS.
```html
<img src="/photo.webp" width="800" height="600" alt="Описание" loading="lazy">
```
- Включите кэширование
- Плагины для WordPress: WP Rocket, W3 Total Cache.
- Настройки сервера:
```nginx
expires 1y;
add_header Cache-Control "public, no-transform";
```
- Используйте ленивую загрузку (Lazy Load)
- Для изображений, видео и iframe:
```html
<img src="/image.jpg" loading="lazy" alt="...">
```
- Минимизируйте CSS и JS
- Объедините файлы (Autoptimize, Fast Velocity Minify).
- Удалите неиспользуемый код (PurgeCSS, WP Rocket).
- Подключите CDN
- Бесплатные варианты: Cloudflare, BunnyCDN.
- Для медиа: Jetpack CDN, Imgix.
- Выберите быстрый хостинг
- Рекомендуем: SiteGround, FastComet, Timeweb (для РФ).
- Проверьте TTFB (Time To First Byte) – должно быть ≤ 500 мс.
- Оптимизируйте шрифты
- Подключайте только нужные начертания (Google Fonts).
- Используйте `font-display: swap`:
```css
@font-face {
font-family: 'Roboto';
src: url('/roboto.woff2') format('woff2');
font-display: swap;
}
```
- Включите предзагрузку ресурсов
- Добавьте в `<head>`:
```html
<link rel="preload" href="/style.css" as="style">
<link rel="preconnect" href="https://fonts.gstatic.com">
```
- Уменьшите количество редиректов
- Каждый редирект добавляет 100-300 мс задержки.
- Используйте HTTP/2 и Brotli-сжатие
- Проверить поддержку: [HTTP2 Test](https://http2.pro/).
- Brotli сжимает лучше Gzip (настройте в .htaccess).
📈 Как улучшить каждую метрику Core Web Vitals?
|
Метрика |
Как исправить |
|
LCP |
Оптимизируйте изображения, подключите CDN, используйте кэширование. |
|
FID |
Уменьшите JavaScript (дефер загрузку скриптов), выберите быстрый хостинг. |
|
CLS |
Укажите размеры изображений, избегайте рекламных баннеров вверху страницы. |
🔧 Инструменты для проверки
- [PageSpeed Insights](https://pagespeed.web.dev/) – основные метрики.
- [WebPageTest](https://www.webpagetest.org/) – детальный анализ.
- [GTmetrix](https://gtmetrix.com/) – рекомендации по оптимизации.
🚀 Пример до/после оптимизации
До:
- LCP: 4.2 сек
- CLS: 0.25
- Скорость загрузки: 5 сек
После:
- LCP: 1.8 сек
- CLS: 0.05
- Скорость загрузки: 2.3 сек
💡 Советы для WordPress
- Темы: Astra, GeneratePress, Neve.
- Плагины: WP Rocket, Perfmatters, FlyingPress.
- Отключите ненужные плагины (каждый добавляет нагрузку).
Итог
- Проверьте текущие показатели в PageSpeed Insights.
- Оптимизируйте изображения и код.
- Настройте кэширование + CDN.
- Контролируйте изменения 1-2 раза в месяц.
У вас остались вопросы? Готов помочь! 😊