Оптимизация производительности веб-сайта: Core Web Vitals и ускорение загрузки

Что такое Core Web Vitals?

Core Web Vitals — это три ключевые метрики, определённые Google для измерения пользовательского опыта: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) и INP (Interaction to Next Paint).

LCP измеряет время загрузки крупнейшего элемента контента на странице (обычно hero-изображение или заголовок). Должен быть менее 2,5 секунд. Медленный LCP заставляет пользователей покидать страницу.

CLS измеряет неожиданные сдвиги макета при загрузке. Сдвиги, вызванные поздней загрузкой изображений или рекламы, раздражают пользователей. Должен быть менее 0,1.

INP измеряет время отклика на взаимодействия пользователя (клики, нажатия клавиш). Должен быть менее 200 миллисекунд. Медленный INP делает сайт непригодным для использования.

Хорошие Core Web Vitals полезны, но не гарантируют высоких позиций в поиске.

Оптимизация LCP

Быстро загружайте крупнейший элемент контента. Hero-изображение или главный заголовок обычно является элементом LCP. Приоритизируйте его загрузку.

Не откладывайте загрузку LCP-изображения. Lazy loading подходит для изображений вне начальной видимой области.

Уменьшите время отклика сервера (TTFB). Используйте CDN (Content Delivery Network), оптимизируйте запросы к базе данных, внедрите кэширование страниц.

async и defer относятся к JavaScript; некритичному CSS нужна отдельная стратегия загрузки.

Предзагружайте критические ресурсы с директивой preload: <link rel="preload" as="image" href="hero.webp">. Это помогает браузеру обнаруживать ресурсы раньше.

Оптимизация CLS

Добавьте атрибуты width и height к элементам изображений и видео. Это позволяет браузеру резервировать место и предотвращать сдвиг макета.

Резервируйте контейнеры фиксированного размера для рекламы и embeds. Поздно загружаемая реклама сдвигает макет страницы и увеличивает CLS.

Оптимизируйте веб-шрифты: используйте font-display: swap, предзагружайте критические шрифты. Минимизируйте проблемы FOUT и FOIT.

Элементы без зарезервированного места, добавленные над содержимым, могут сдвинуть макет.

Используйте transform и opacity в CSS-анимациях. Эти свойства не вызывают layout и не способствуют CLS.

Оптимизация INP

Уменьшите время выполнения JavaScript. Разбивайте длинные задачи на меньшие части. Задачи длиннее 50 мс негативно влияют на INP.

Оптимизируйте обработчики событий. Пишите обработчики, которые быстро реагируют на клики и нажатия клавиш. Переносите тяжёлые вычисления в Web Workers.

Тяжёлые сторонние скрипты могут увеличить INP. Удалите ненужные и измерьте снова.

Откладывайте тяжёлые операции с requestIdleCallback и setTimeout. Переносите некритичную работу в фоновый режим во время взаимодействий пользователя.

В фреймворках вроде React/Vue предотвращайте ненужные повторные рендеры. Пропускайте ненужные вычисления с useMemo, useCallback и memo.

Общая оптимизация скорости

Используйте HTTP/2 или HTTP/3. Они обеспечивают параллельную обработку множества запросов и сжатие заголовков. Современные хостинг-провайдеры поддерживают их по умолчанию.

Включите сжатие Gzip или Brotli. Текстовые ресурсы (HTML, CSS, JS) уменьшаются на 60-80%. Включите в конфигурации сервера.

Кэшируйте статические ресурсы. Устанавливайте сроки кэширования браузера и CDN с заголовками Cache-Control. Используйте длинный TTL для неизменяемых ресурсов.

Встраивайте критический CSS inline, остальное загружайте async. Встраивайте CSS, необходимый для above-the-fold контента, в начало страницы.

Разделяйте JavaScript с помощью code splitting. Загружайте только код, нужный для каждой страницы. Применяйте lazy loading с dynamic import().

Lazy load изображений. Загружайте изображения ниже fold только при их появлении на экране. Атрибута loading="lazy" достаточно.

Предзагружайте ресурсы с prefetch и preconnect. Устанавливайте DNS- и TCP-соединения заранее с <link rel="preconnect" href="https://fonts.googleapis.com">.

Инструменты измерения

Google PageSpeed Insights: Отчёт о производительности на основе Lighthouse. Предоставляет отдельные оценки для mobile и desktop. Предлагает рекомендации по улучшению.

Chrome DevTools Performance tab: Анализирует процесс загрузки страницы шаг за шагом. Показывает long tasks, layout shifts и paint timing.

Расширение Web Vitals больше не поддерживается. Используйте Performance в Chrome DevTools.

CrUX (Chrome User Experience Report): Собирает данные реальных пользователей. Появляется как отчёт Core Web Vitals в Search Console.

Отчёт Core Web Vitals в Search Console: Классифицирует URL как 'Хорошо', 'Требует улучшения' и 'Плохо'. Показывает, какие страницы нуждаются в оптимизации.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience