Как ускорить загрузку сайта

Быстрый сайт удобнее посетителям и лучше воспринимается поисковыми системами. Скорость измеряют метриками Core Web Vitals: LCP (скорость показа главного контента), INP (отзывчивость на действия) и CLS (визуальная стабильность).

Сначала измерьте

Используйте Lighthouse в Chrome DevTools, PageSpeed Insights и отчёты Core Web Vitals в Google Search Console. Лабораторные тесты показывают причины проблем, полевые данные — реальный опыт пользователей. Оптимизируйте то, что действительно медленно, а не то, что кажется очевидным.

Изображения

• Используйте современные форматы (AVIF, WebP) и адаптивные размеры.
• Указывайте ширину и высоту, чтобы избежать сдвигов макета.
• Загружайте отложенно изображения вне первого экрана.
• Главное изображение первого экрана загружайте с приоритетом.

Шрифты

Подключайте не больше нужных начертаний, используйте формат WOFF2 и font-display: swap, размещайте шрифты на своём домене. Для переменных шрифтов один файл заменяет несколько начертаний.

JavaScript и CSS

• Убирайте неиспользуемые библиотеки и плагины
• Разделяйте код и подгружайте тяжёлые компоненты по требованию
• Откладывайте сторонние скрипты (аналитика, чаты) до взаимодействия или согласия пользователя
• Минимизируйте и сжимайте ресурсы
• Не блокируйте отрисовку критическим CSS и скриптами

Сервер и кеширование

Серверный рендеринг или статическая генерация страниц отдают готовый HTML быстрее, чем клиентская сборка. Настройте кеширование статических файлов, сжатие (Brotli/gzip) и CDN, если аудитория распределена географически.

Тяжёлая графика и анимации

3D и анимации можно использовать без вреда для скорости: подгружать динамически, останавливать вне экрана, упрощать на слабых устройствах и уважать настройку «уменьшить движение». Так устроен и этот сайт.

Как это связано с SEO

Скорость — один из факторов пользовательского опыта, который учитывается при ранжировании. Подробнее — в статье что такое SEO-продвижение. Быстрый сайт закладывается на этапе разработки.