Cumulative Layout Shift (CLS) — это показатель визуальной стабильности сайта

Core Web Vitals появились в мае 2020 года как новый набор показателей от Google. Эти основные метрики были созданы, чтобы помочь владельцам сайтов и разработчикам лучше понимать и повысить качество взаимодействия пользователей с сайтом.

При их разработке Google опирался на огромное количество исследований, анализ поведения пользователей и советы экспертов в области веб-разработки. Core Web Vitals помогают делать сайты быстрее, отзывчивее и стабильнее, что делает их использование намного удобнее для посетителей.

Как измерить CWV: данные от пользователей и тестовые проверки

Google предлагает разные инструменты для проверки Core Web Vitals. Измерения делаются двумя способами: через анализ поведения настоящих пользователей (полевые данные) и через проверки в тестовой среде (лабораторные данные).

Полевые данные

Данные о реальных пользователях собираются через Chrome User Experience (CrUX) — открытую базу данных, которая хранит показатели производительности от пользователей Chrome.

Лабораторные данные

Тестовые измерения позволяют разработчикам проверять работу сайта при разных условиях подключения к интернету. Это помогает находить и исправлять проблемы с медленным JavaScript и элементами, которые мешают правильной загрузке страницы.

Для полноценной оценки эффективности веб-ресурса специалисты рекомендуют интегрировать результаты как лабораторных, так и полевых исследований. Комплексный метод анализа позволяет выявить все возможные проблемы, которые могли бы остаться незамеченными при использовании только одного способа тестирования.

Метрики Core Web Vitals

Core Web Vitals представляет собой гибкую систему показателей, которая непрерывно развивается и адаптируется. На текущий момент существует ряд основных метрик, заслуживающих особого внимания.

Largest Contentful Paint (LCP)

LCP измеряет время от начала загрузки страницы до момента отрисовки крупнейшего контентного элемента в видимой области экрана, включая текст или изображение. Этот параметр оценивает воспринимаемую скорость загрузки контента. Оперативное отображение содержимого позволяет пользователю быстро оценить соответствие страницы его запросу.

Пример: при загрузке страницы главный элемент может изменяться. Сначала это может быть заголовок H1, но после загрузки крупного изображения именно оно становится основным контентным элементом.

LCP оценивается как в реальных условиях, где измерение останавливается при первом взаимодействии пользователя, так и в лабораторных тестах, где определение наибольшего элемента завершается при достижении страницей состояния интерактивности.

Как оценивается LCP

• Хорошо: менее 2,5 секунд.
• Требуется улучшение: от 2,5 до 4 секунд.
• Плохо: превышает 4 секунды.

First Input Delay (FID)

FID определяет временной интервал между первым взаимодействием пользователя с веб-страницей и началом обработки этого действия браузером. Метрика учитывает специфические типы взаимодействий, такие как клики мышью, касания сенсорного экрана и ввод с клавиатуры, намеренно исключая действия вроде прокрутки или масштабирования. Главное назначение FID заключается в оценке скорости отклика страницы на пользовательские действия.

Как оценивается FID

• Хорошо: до 100 миллисекунд.
• Требуется улучшение: от 100 до 300 миллисекунд.
• Плохо: превышает 300 миллисекунд.

Cumulative Layout Shift (CLS)

CLS – метрика, которая оценивает визуальную стабильность веб-страницы. Она измеряет смещения элементов в видимой области экрана на протяжении всего жизненного цикла страницы. Оценка осуществляется посредством измерения области просмотра и отслеживание перемещений элементов внутри этой области во время преобразования страницы.

Как оценивается CLS

• Хорошо: менее 0,1.
• Требуется улучшение: от 0,1 до 0,25.
• Плохо: превышает 0,25.

Существует несколько других важных метрик, которые играют ключевую роль в оптимизации пользовательского опыта:

• First Contentful Paint (FCP);
• Speed Index (SI);
• Total Blocking Time (TBT);
• Time to Interactive (TTI).

Все эти метрики в совокупности создают полную картину взаимодействия пользователя с веб-страницей и помогают определить области, требующие оптимизации.

First Contentful Paint (FCP)

FCP – важный показатель производительности веб-страницы. Метрика определяет временной интервал между началом загрузки страницы и моментом отображения первого значимого элемента контента. Параметр нужен для оценки качества удобства пользователя, поскольку напрямую влияет на первое впечатление посетителя.

Как устроен FCP

• «First» – обозначает первое появление контента в окне браузера.
• «Contentful» – относится к HTML-элементам, содержащим информацию: текст, изображения (включая фоновые), SVG или canvas-элементы, исключая вспомогательные элементы оформления).
• «Paint» – описывает процесс обновления контента браузером, включающий сложные вычисления параметров элемента.

FCP можно измерять как через полевые данные, так и используя специальные инструменты, например, Lighthouse.

Как оценивается FCP

• Хорошо: менее 1,8 секунд.
• Требуется улучшение: 1,8-3 секунды.
• Плохо: более 3 секунд.

Speed Index (SI)

SI – это метрика оценки визуальной скорости загрузки контента в видимой области веб-страницы. Она концентрируется исключительно на визуальном прогрессе загрузки, не учитывая фоновые процессы и элементы вне зоны видимости пользователя. Speed Index определяет время, которое требуется для полного визуального восприятия контента посетителем веб-ресурса.

В сравнении с другими показателями производительности, фокусирующимися на конкретных моментах загрузки страницы.

Как оценивается SI

• Хорошо: от 0 до 3,4 секунды.
• Требуется улучшение: от 3,4 до 5,8 секунд.
• Плохо: более 5,8 секунд.

Time To Interactive (TTI)

TTI измеряет временной интервал, необходимый веб-странице для достижения полной интерактивности и готовности к взаимодействию с пользователем.

Страница считается полностью интерактивной при выполнении следующих условий:

• пользователь видит полезный контент (определяется через First Contentful Paint);
• ключевые элементы страницы обновлены и готовы к взаимодействию;
• время отклика на действия пользователя не превышает 50 миллисекунд.

Как оценивается TTI

• Хорошо: до 3,8 секунд.
• Требуется улучшение: от 3,8 до 7,3 секунд.
• Плохо: свыше 7,3 секунд.

Total Blocking Time (TBT)

TBT – метрика, которая измеряет совокупное время блокировки основного потока между FCP и TTI, когда страница не способна реагировать на действия пользователя. Она позволяет точно определить продолжительность периода, в течение которого веб-страница остается неотзывчивой, прежде чем достигнет состояния интерактивности. TBT рассчитывается посредством суммирования всех временных промежутков блокировки длительных задач.

Рассмотрим конкретный пример с тремя продолжительными задачами:

• задача A продолжительностью 75 мс (блокирующее время 25 мс сверх порога 50 мс);
• задача B продолжительностью 60 мс (блокирующее время 10 мс сверх порога 50 мс);
• задача C продолжительностью 85 мс (блокирующее время 35 мс сверх порога 50 мс).

Суммарный TBT составляет 70 мс (25+10+35). Низкие значения TBT являются более предпочтительными.

Как оценивается TBT

• Хорошо: менее 200 мс.
• Требуется улучшение: 200-600 мс.
• Плохо: более 600 мс.

Как улучшить Core Web Vitals

Оптимизация Core Web Vitals важна для повышения позиций сайта в результатах поиска. Эффективные методы оптимизации метрик определяются на основе детального анализа конкретного веб-сайта.

1. Оптимизировать изображения на сайте

Это одна из наиболее частых проблем сайтов, которую можно решить посредством корректной оптимизации графического контента.

Рекомендации:

• оптимизацию параметров и качественных характеристик изображений;
• преобразование GIF-анимаций в видеоформаты;
• внедрение прогрессивных форматов изображений, включая WebP.

Эти действия значительно ускоряют загрузку и благоприятно воздействуют на показатель LCP.

2. Внедрить отложенную загрузку изображений

При традиционной загрузке все изображения загружаются единовременно, включая невидимые элементы, что может замедлять загрузку критически важного контента. Механизм отложенной загрузки (lazy loading) обеспечивает подгрузку изображений только при их появлении в области видимости. Этот подход ускоряет процесс загрузки и существенно улучшает метрику LCP.

Важно! Не стоит применять lazy loading к элементам, видимым при первоначальной загрузке.

3. Применять CDN для медиаконтента

CDN обеспечивает передачу контента без потери качества и положительно влияет на производительность сайта.

4. Оптимизировать структуру сервера

Производительность сервера существенно влияет на скорость работы сайта. Медленная обработка запросов увеличивает время отклика и обновления страниц. Бюджетные хостинг-провайдеры зачастую предоставляют перегруженные серверы с ограничениями ресурсов.

Рекомендуется отдавать предпочтение надежным хостинг-провайдерам, которые обеспечивают гибкую настройку серверных мощностей, включая оптимальное дисковое пространство и достаточный объем оперативной памяти.

5. Адаптировать изображения под различные устройства

Эффективное решение заключается в создании нескольких версий изображений с различным разрешением и их грамотной интеграции в HTML-код. Такой подход обеспечивает автоматическую загрузку оптимального варианта с учетом характеристик устройства пользователя.

Для мобильных устройств необходимо использовать сжатые версии изображений для улучшения показателя LCP и общей производительности.

6. Минимизировать блокирующие ресурсы

Элементы, блокирующие обновление, значительно влияют на оптимизацию страницы. К таким элементам относятся медленно загружаемые шрифты, избыточные медиафайлы, неоптимизированный HTML и CSS-код, а также ненужные плагины.

7. Очистить неиспользуемый код

CSS и JavaScript файлы часто содержат неиспользуемые фрагменты кода, которые обрабатываются при загрузке. Это создает дополнительную нагрузку, обычно возникающую из-за концентрации разработчиков на новом функционале в ущерб оптимизации.

8. Настроить серверную компрессию ресурсов

GNU zip (GZIP) – это мощный инструмент сжатия данных, который обеспечивает компрессию без потери качества. При использовании GZIP-сжатия существенно сокращается время загрузки веб-страниц.

Lighthouse помогает обнаружить файлы без кодировки содержимого (br, gzip или deflate), требующие компрессии. Применение серверного сжатия ресурсов существенно улучшает показатель FCP.

9. Минифицировать CSS и JS

Современные сайты включают множество файлов, где CSS и JavaScript являются основополагающими. Они содержат код, определяющий архитектуру и функциональность вашего веб-ресурса. Для достижения максимальной производительности требуется оптимизация кода в данных файлах.

Уменьшение исходного кода – эффективный способ сокращения объема файлов за счет устранения лишних пробелов, ненужных комментариев и неиспользуемого кода. Метод успешно удаляет все избыточные элементы, не влияющие на работоспособность.

10. Добавить атрибуты размера к изображениям и видео

Всегда указывайте размеры изображений в HTML-разметке. Это дает браузеру возможность заблаговременно резервировать пространство для загружаемых изображений, исключая визуальные смещения и оптимизируя метрику CLS.

11. Уменьшить конечный размер страниц

Контроль оптимального размера страниц – критический фактор производительности сайта.

Рекомендуется удерживать объем каждой страницы в пределах 500 КБ (с учетом всех ресурсов) и ограничивать количество ресурсов до 50, что критично для пользователей мобильных устройств.

12. Оптимизировать шрифты

Шрифты обрабатываются браузерами подобно изображениям. Их значительный объем может существенно замедлить загрузку страницы. Часто встречается ситуация, когда контент неожиданно смещается после полной загрузки – это результат окончательной загрузки шрифта, вызывающий реструктуризацию страницы и негативно влияющий на показатель CLS.

Для эффективной оптимизации веб-шрифтов следуйте двум ключевым принципам:

• применяйте исключительно необходимые варианты начертания шрифтов;
• минимизируйте количество различных шрифтов на странице.

Предварительная загрузка шрифтов позволяет хранить оптимизированные версии в кэше для быстрого доступа. Большинство плагинов кэширования автоматически выполняют предзагрузку и обслуживают шрифты с вашего сервера вместо серверов Google.

13. Минимизировать использование сторонних скриптов

Множество сайтов перегружены внешними сервисами или некорректно их оптимизируют: виджеты мессенджеров, пиксели отслеживания, инструменты социальных сетей, системы аналитики и другие.

Несмотря на их функциональность, данные инструменты могут существенно снизить скорость загрузки сайта. К примеру, если загрузка чата занимает 2 секунды, это пропорционально увеличивает время загрузки каждой страницы.

Рекомендация: оптимальным решением для управления внешними скриптами является внедрение Google Tag Manager (GTM). Практические исследования подтверждают значительное улучшение показателей производительности при использовании GTM в сравнении с прямой интеграцией кода на страницы сайта.

14. Внедрить статическое кэширование

Любой веб-сайт включает множество неизменных элементов – header, footer и другие компоненты, которые остаются идентичными на всех страницах. Внедрение статического кэширования исключает необходимость повторной загрузки этих компонентов при каждом визите.

Система статического кэширования позволяет серверу определять время хранения контента в браузере. При повторных посещениях браузер использует локальную версию вместо нового запроса к серверу. Данный метод значительно оптимизирует общую производительность ресурса.

Заключение

Оптимизация веб-сайта требует систематического подхода. При обновлении шаблона, внедрении новых функций или смене хостинг-провайдера важно отслеживать их воздействие на скорость работы ресурса. Использование инструментов аналитики, включая Google Search Console, Google Analytics, Lighthouse и GTmetrix, обеспечивает своевременное обнаружение и решение проблем производительности.