Летом 2021 года компания Google запустила обновление сервиса проверки скорости загрузки и качества сайта – Core Web Vitals (CWV). Это один из многих сотен различных алгоритмов, которые так или иначе влияют на ранжирование сайтов в поисковой выдаче, повышают органический трафик и увеличивают конверсию сайта. Он построен на реальном пользовательском опыте, что позволяет с помощью полученных данных улучшить качество сайта и сделать его более дружелюбным по отношению к пользователям.

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

Что такое Core Web Vitals

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

Основные данные, на которые обращает внимание CWV:

• весь важный контент, текстовый и графический, визуализируется в браузере быстро;
• формы захвата и кнопки подгружаются сразу;
• все элементы дизайна отображаются корректно в десктопной и мобильной версии для разных гаджетов, не «прыгают», не перекрывают основной контент.

Для чего нужны метрики Core Web Vitals

Каждый сайт с помощью алгоритма CWV будет оцениваться постранично. И чтобы ресурс прошел проверку и появился в поисковой выдаче на высоких позициях, релевантных запросу, необходимо, чтобы хорошие показатели были не менее чем у 75% страниц (75 процентиль). В противном случае сайт начнет падение в ТОПе и может окончательно из него пропасть. Оценка производится на основании месячного пользовательского опыта. Чем лучше показатели Core Web Vitals, тем выше сайт будет находиться в поисковой выдаче.

Какие метрики входят в CWV

Прежде чем ответить на вопрос “как оптимизировать сайт”, рассмотрим метрики Core Web Vitals и их параметры.

В Core Web Vitals входят:

• Largest Contentful Paint (LCP) – скорость загрузки основных текстовых и визуальных объектов.
• First Input Delay (FID) – время, потраченное пользователем на ожидание перед взаимодействием с контентом (клики по ссылкам, запуск видео и т.д.).
• Cumulative Layout Shift (CLS) – совокупная стабильность объектов или смещение макета.

Рассмотрим каждую метрику подробнее.

LCP

Largest Contentful Paint (примерный перевод с англ.: «скорость загрузки основного контента») – эта метрика позволяет оценить, насколько быстро грузится в браузере основной контент, текстовый и визуальный, в сравнении с остальными элементами. Имеется в виду прорисовка самого форматного визуального объекта или текстового блока, который виден в области просмотра на данный момент. При этом в размер визуального объекта не входят части элемента, не отображаемые на экране, и те элементы, в которых присутствует невидимое переполнение. В текстовых блоках учитывается только самый малый прямоугольник, в котором размещаются текстовые узлы. Значения, указанные для объектов в CSS (дополнительные поля, границы элемента и отступы), на показатели не влияют.

Лучший показатель LSP – меньше двух секунд. 2,5 секунды – оптимальный показатель, средний – 4 секунды, худший – от 4 и более секунд. Чем меньше времени на загрузку, тем больше шансов, что пользователь останется на странице и она будет для него полезна.

FID

First Input Delay (примерный перевод с англ.: «Время задержки до первого взаимодействия») – метрика, которая измеряет время, затраченное пользователем при загрузке страницы и первым взаимодействием с контентом. Не время обработки события, а только «задержку» до него. Чем дольше пользователь ждет загрузку интерактивных элементов (ссылок, кнопок, элементов на основе JavaScript, видео- или аудио контента), тем выше риск, что он уйдет с сайта.

Лучший показатель FID – 100 миллисекунд. 300 миллисекунд – средний показатель (рекомендуется улучшение). Более 300 – плохой результат.

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

CLS

Cumulative Layout Shift (примерный перевод с англ.: «Совокупный сдвиг макета») – метрика, фиксирующая время, в течение которого каждый элемент занимает на странице заданное положение. Это важный показатель, который напрямую влияет на восприятие пользователем страницы. Чем больше «летающих», смещающихся с места на место элементов, тем больше это раздражает, особенно, когда при попытке взаимодействовать с элементом пользователь кликает по совсем другому объекту. Так происходит, когда визуальный объект, например, сторонний баннер или виджет, подгружается дольше всех. Причиной этому может быть асинхронная загрузка или прописанные элементы DOM, которые динамически добавляются поверх макета.

Лучший показатель CLS – 0,1 секунда. До 0,25 секунд – средний показатель. Все, что дольше – плохой результат.

Если изменение верстки и положения элементов происходит по инициативе пользователя, или смещение интуитивно понятно пользователем как взаимосвязанное с его действием – это не влияет на его восприятие. Плохо, если пользователь не готов к такому смещению.

Какие инструменты позволяют проанализировать метрики CWV

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

Инструменты для анализа показателей в полевых условиях:

• Core Web Vitals report в Search Console – отчет об основных интернет-показателях.
• Web Vitals – расширение для Chrome, которое динамически отображает изменение показателей.
• Chrome User Experience Report – отчет, отображающий реальные данные по всем метрикам CWV.
• PageSpeed Insights – объединяет теоретические замеры и реальные показатели на основе пользовательского опыта.
• JavaScript-библиотека web-vitals c отправкой данных в Google Analytics – все показатели измеряются с использованием базовых веб-API.

Инструменты для анализа в лабораторных условиях:

• AMP Page Experience Guide (для страниц с AMP-технологией)
• Lighthouse
• Chrome Dev Tools

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

Как улучшить сайт в соответствии с CWV

Как оптимизировать сайт, чтобы Google считал его релевантным запросам пользователей? Тема обширная, поэтому мы ограничимся рекомендациями, которые помогут значительно ускорить время загрузки сайта и повысить показатели по всем метрикам CWV.

Основные проблемы, которые влияют на качество сайта и скорость его загрузки, это:

• большое количество параллельных запросов;
• передача больших объемов данных;
• смещение верстки и «летающие» элементы макета;
• не модернизированная технология хеширования;
• загрузка текста до того, как подгрузятся все используемые шрифты.

Что нужно сделать, чтобы оптимизировать сайт

• проверить показатели сайта на предмет проблемных мест;
• проанализировать данные по десктопной и мобильной версиям;
• уменьшить размер файла всех изображений на сайте с помощью новых алгоритмов сжатия и новых форматов, поддерживаемых браузерами (WebP, JPEG 2000, JPEG XR). Например, для сжатия изображений без потери качества отлично подойдут инструменты Squoosh и Compressor.io;
• прописать в коде правильные размеры изображений и встроенных элементов в пикселах, чтобы избежать сдвигов в макете;
• адаптировать объемы кода, написанного на JavaScript и в CSS (например, с помощью алгоритма сжатия Brotli);
• реализовать для JS-файлов и изображений отложенную загрузку, при которой элементы будут подгружаться при скроллинге страницы, а не сразу все;
• предварительно кэшировать критические ресурсы, используя сервис-воркер (Service Worker).

Выбирая сервер для размещения сайта, обратите внимание на такие показатели:

• наличие модуля Google pagespeed для оптимизации изображений, каскадных листов стилей и Javascript-файлов;
• наличие SSD и NVMe SSD-дисков с высокой скоростью чтения для уменьшения задержек загрузки сайта;
• поддержка нового протокола HTTP/2 для одновременной передачи нескольких элементов;
• предоставление сертификата безопасности SSL;
• подключенная система CDN на основе нескольких серверов с равномерным распределением нагрузки и увеличением скорости сайта;
• сервера провайдера лучше использовать из того же региона, на который нацелена работа сайта;
• время отклика сервера должно быть менее 600 миллисекунд.

Итог

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

В отличие от других алгоритмов, действие которых обычно не разглашается, метрики о CWV могут быть изучены в Core Web Vitals в Search Console и PageSpeed ​​Insights. И на основе полученных данных разработчики могут улучшить показатели для каждой страницы.

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

Если вам нужна помощь с оптимизацией сайта под алгоритмы Core Web Vitals, обратитесь к специалистам компании New Line Technologies. Мы поможем вашему сайту достичь наилучших показателей эффективности в самые короткие сроки.

Поля не найдены.