Скорость загрузки напрямую влияет на конверсию и позиции в поиске. Если страница открывается дольше трёх секунд, четверть посетителей уходит, не дождавшись. Поисковые системы учитывают Core Web Vitals — метрики скорости и стабильности загрузки. Разберём конкретные шаги, которые мы применяем на каждом проекте.
Первый шаг — оптимизация изображений. Фотографии часто составляют 60–80% веса страницы. Конвертируйте PNG и JPEG в формат WebP — он легче на 25–35% при том же качестве. Для иконок и логотипов используйте SVG. Настройте ленивую загрузку через атрибут loading="lazy" — изображения ниже первого экрана будут подгружаться только при скролле.
Второй — минимизация и разделение кода. Удалите неиспользуемый CSS и JavaScript. Разделите бандл по маршрутам: пользователь, который открыл главную, не должен загружать код страницы каталога. В Nuxt это работает из коробки через динамические импорты и автоматический code splitting.
Третий — серверный рендеринг (SSR). Классический SPA отдаёт браузеру пустую HTML-страницу и рисует контент через JavaScript. Это медленно и плохо для SEO. SSR генерирует HTML на сервере — пользователь видит контент мгновенно, а поисковый робот получает готовую страницу для индексации.
Четвёртый — кеширование. Настройте заголовки Cache-Control для статических ассетов: шрифтов, иконок, стилей. Они не меняются между визитами, и повторная загрузка — пустая трата ресурсов. Для динамического контента используйте CDN и edge-кеширование — контент отдаётся с ближайшего к пользователю сервера.
Пятый — оптимизация шрифтов. Подключайте только нужные начертания и подмножества символов. Используйте font-display: swap, чтобы текст отображался сразу системным шрифтом, а кастомный подгружался в фоне. Предзагружайте критичные шрифты через link rel="preload".
Шестой — устранение сдвигов макета (CLS). Указывайте width и height для изображений и видео, чтобы браузер зарезервировал место до загрузки. Используйте скелетоны вместо спиннеров при загрузке контента. Избегайте вставки баннеров и виджетов, которые сдвигают контент после загрузки.
Седьмой — мониторинг. Проверяйте скорость через Google PageSpeed Insights и Lighthouse. Отслеживайте реальные метрики пользователей через Web Vitals. Оптимизация — это не разовое действие, а постоянный процесс: новый контент, сторонние скрипты и обновления могут снова замедлить сайт.