Web vitals react что это

Метрики производительности WEB Vitals

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

Какие существуют метрики производительности?

Как оценить качество вашего приложения?

Как поднять метрики?

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

Прежде чем приступить к оптимизации вашего приложения, необходимо определиться с тем, что же такое хороший сайт? На сегодняшний день Google выделяет три основных критерия качества сайта: скорость его загрузки, отзывчивость и визуальная стабильность.

Ключевые критерии качества

В первую очередь содержимое должно грузиться быстро, причём вне зависимости от качества сети пользователя. Чем дольше пользователь ждёт загрузки, тем больше вероятность того, что он просто покинет наш сайт! Отзывчивость также очень важна: вы нажимаете на кнопку, а ничего не происходит! Нужно, чтобы содержимое не просто отображалось, но и было доступно для взаимодействия. И наконец, мы хотим, чтобы страница была стабильна и вела себя предсказуемо. Тут и приходит на помощь Core web vitals.

Core web vitals — это инициатива Google, представляющая из себя набор метрик и интервалов, позволяющих измерить те самые ключевые показатели Performance, о которых мы только что говорили.

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

Метрика LCP отражает скорость загрузки. Точнее, она показывает точку во время загрузки страницы, когда были загружены основные или самые большие элементы содержимого во view port. Это важное дополнение к метрике FCP (First Contentful Paint), которая фиксирует только самое начало загрузки. Иначе говоря, LCP позволяет измерить, как быстро пользователь сможет увидеть основное содержимое страницы.

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

Что влияет на LCP?

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

Вы можете увидеть все события загрузки страницы на вкладке Timings в Google Chrome DevTools, в том числе и метрику LCP.

Следующая метрика — FID (First Input Delay). Она отражает интерактивность приложения. FID измеряет время с момента, когда пользователь начал как-то взаимодействовать со страницей (нажимать на кнопки, заполнять формы и т.д.) до момента, когда браузер на самом деле был готов ответить на это взаимодействие.

Чтобы гарантировать хороший пользовательский опыт интерактивности, сайт должен иметь FCP менее 100 мс.

Что влияет на FID?

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

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

TBT показывает общее количество времени, когда основной поток заблокирован достаточно долго, чтобы реагировать на взаимодействия пользователя. Иначе говоря, TBT отражает время с FCP до Time to Interact.

Чтобы гарантировать положительный опыт взаимодействия пользователя, нужно стремиться к тому, чтобы каждая задача выполнялась не дольше 50 мс.

Вы можете увидеть метрику TBT в Chrome Dev Tools.

Наконец, третья метрика CLS (Cumulative Layout Shift) позволяет оценить визуальную стабильность страницы. CLS показывает, какое количество содержимого во viewport двигалось во время загрузки страницы. С её помощью можно убедиться, что взаимодействие пользователя с сайтом плавное и естественное.

Что влияет на CLS?

На рисунке ниже приведены основные факторы, влияющие на этот показатель.

Чтобы избежать CLS, необходимо резервировать место под динамически добавляемое содержимое.

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

На вкладке Experience метрика CLS отмечена красными прямоугольниками. При клике на них на вкладке Summary вы сможете получить более полную информацию о том, что за элемент вызвал CLS, откуда и куда произошел сдвиг и т.д

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

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

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

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

Обратите внимание, что метрику FID можно измерить только в полевых условиях. Чтобы измерить интерактивность, вам понадобятся реальные пользователи для кликов по странице. Но это не значит, что вы не можете использовать лабораторные инструменты для улучшения этого показателя. Как я уже говорил выше, TBT — это прокси-метрика, которая позволяет локально отладить и улучшить интерактивность вашего сайта.

Все инструменты, которые мы рассмотрим, можно включить в свой рабочий процесс. Начать можно с Page Speed Insides, так как он позволяет сравнить ваши полевые показатели с лабораторными. Google Search Console позволяет выявить группы страниц, требующих оптимизации. Затем с помощью Lighthouse и Chrome DevTools вы можете начать локально диагностировать и оптимизировать сайт. Далее вы можете предотвратить регрессию показателей производительности с помощью Lighthouse CI. И наконец, CrUX позволит создать кастомные дашборды для мониторинга. Для получения советов и инструкций можно использовать web.dev.

Как я уже сказал, Page Speed Inside позволяет получить как полевые данные из CrUX (чтобы убедиться, проходят ли 75 % показов сайта пороговые значения метрик; если да, то сайт классифицируется как оптимизированный, и это относится ко всем трём метрикам LCP, CLS, FID), так и лабораторные данные от Lighthouse.

С недавних пор в Lighthouse появились новые метрики, включая Core Web Vitals, а также новые проверки и отчеты.

Метрики Lighthouse можно сгруппировать по трём основным критериям качества сайта

FCP, SI, LCP представляют загрузку сайта;

TBT отражает интерактивность;

CLS отражает визуальную стабильность.

Новые метрики позволяют убедиться в производительности загрузки, интерактивности и стабильности макета. Собственно, эти метрики и их веса и формируют Performance Score!

LightHouse — очень интересный инструмент, в котором существует огромное количество разных отчётов и проверок, но в рамках Core Web Vitals нас в первую очередь интересуют следующие.

По загрузке страницы: отчеты о скорости ответа сервера; блокирующие отрисовку ресурсы; отчеты об оптимизации загрузки ресурсов.

По интерактивности: отчеты о загрузке main thread и оптимизации качества загружаемых ресурсов (дублирующиеся модули, неиспользуемый код и др.).

Ну и отчеты, позволяющие предотвратить сдвиги макета!

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

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

Сам Chrome DevTools — тема отдельного разговора. Мы поговорим о нём сегодня именно в разрезе Core Web Vitals. И наибольший интерес у нас вызывает вкладка Performance. Также в этом инструменте можно увидеть задачи, которые ухудшают интерактивность (длятся более 50 мс), они помечаются красным треугольничком в правом верхнем углу. Кликнув на такую задачу, можно получить более подробную информацию о ней (трассировку стека и подзадачи).

Еще одна полезная вкладка в DevTools — Coverage. Всякий раз, как Lighthouse пишет «Удалите неиспользуемый код»

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

web.dev/measure — очень удобный способ получить отчёты наподобие Lighthouse, с той лишь разницей, что Measure отсортирует отчеты по приоритетам и к каждому из них даст ссылку на инструкции с более подробной информацией по каждой проблеме.

CrUX позволяет получить огромное количество данных по реальному пользовательскому опыту.

Также при разработке может помочь Web-vitals Chrome Extension, NPM-пакет web-vitals позволяет легко журналировать эти и другие метрики производительности.

Источник

Core Web Vitals: факторы ранжирования Google в 2021

В мае 2020 года компания Google рассказала о будущих нововведениях, касаемых поисковой системы. Речь шла о новых факторах ранжирования Page Experience – анализе удобства страницы, который включает в себя показатели Core Web Vitals, а также факторы E-A-T и многое другое. Ранее это были лишь разговоры, но сейчас уже названа дата выхода обновления – она назначена на май текущего года.

Если вы до сих пор не знаете, про что идет речь и на что в 2021 году Google будут обращать внимание при ранжировании сайта, читайте далее.

Что за новые факторы ранжирования и почему для Google это так важно?

Улучшение качества поисковой системы – главная цель компании Google. Для ее реализации она начинает применять новые факторы ранжирования. Сам термин «ранжирование» означает сортировку сайтов в поисковой системе. Находится сайт на первом месте или на десятом – за все это отвечают факторы ранжирования.

Для улучшения качества отображения поисковых запросов Google заявила о выпуске новых факторов ранжирования, именуемых как Core Web Vitals. Они состоят из десятка различных параметров, но сейчас важно обратить внимание лишь на 3 основных – это LCP (Largest Contentful Paint), FID (First Input Delay) и CLS (Cumulative Layout Shift).

Как мы видим, в основе CWV лежит опыт взаимодействия пользователя с веб-ресурсом. Google станет учитывать, насколько быстро происходит скорость загрузки страницы (показатель LCP), как быстро происходит взаимодействие с сайтом (показатель FID), корректно ли работают в совокупности все элементы (CLS).

Резюмируя вышесказанное и цитируя разработчиков, Google хочет, чтобы поисковая система уменьшила количество сайтов с некачественным контентом и увеличила количество тех, что оправдывают ожидания пользователей. Для владельцев сайтов – это улучшение качества, а для пользователей – быстрое решение проблемы.

Еще не поздно начать работать над улучшением сайта. Хоть осталось и не так много времени, подготовить свой ресурс к глобальному обновлению вы успеете.

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

Как я уже сказал ранее, новые показатели окажут сильное влияние на ранжирование сайта в поиске. Для их улучшения Google рекомендует использовать следующие инструменты:

На конференции Optimization-2020, которая прошла для маркетологов, оптимизаторов и других специалистов, Андрей Липатцев, партнер Google, рассказал о своем отношении к CWV:

Как работать с Core Web Vitals

Поговорим об инструментах, которые помогут в работе с CWV. Их можно использовать уже сейчас – это отличный способ внести изменения до выхода апгрейда. Список выглядит следующим образом:

Всех этих инструментов хватит для настройки сайта, который будет уверенно себя чувствовать с новыми факторами ранжирования.

Важность факторов E—A—T

Кроме Core Web Vitals, речь идет и о таких факторах, как Expertise, Authoritativeness и Trustworthiness (экспертность, авторитет и достоверность). Эти критерии тоже будут учитываться при ранжировании. Для поисковика это значит, что:

Высокий уровень E-A-T может быть у сайтов любой тематики, даже у онлайн-журналов с женскими сплетнями, новостных сайтов и подобных ресурсов.

Если сайты про хобби могут еще как-то быть «помилованы», то с сайтами, связанными со здоровьем и финансами, – все строго. E-A-T для них играет важную роль, так как от распространяемой информации могут зависеть жизни людей. Подобный контент должен быть написан профессиональными специалистами и опубликован в авторитетных источниках – только в этом случае сайт поднимется в топ поисковой выдачи.

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

Как E—A—T влияют на ранжирование

Такие критерии, как экспертность, авторитет и достоверность, сложно оценить – это довольно абстрактные понятия. Официальный представитель компании Google заявил, что факторы E-A-T не влияют на ранжирование в том плане, что их нельзя «потрогать», то есть алгоритмы не могут измерить такие критерии и получить какое-то число, как это происходит, например, со скоростью загрузки. Однако в то же время поисковая система использует определенные сигналы, чтобы понять, соответствует ли контент установленным критериям.

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

Важность AMP

AMP (от англ. Accelerated Mobile Pages) – это технология ускорения мобильных страниц, созданная Google в 2015 году. Скорость достигается предварительным рендерингом и кэшированием контента на серверах поисковой системы. Также подобные страницы могут быть отображены в блоке «Top Stories» или «Главные новости».

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

Как AMP влияет на ранжирование

Как заявил представитель Google Джон Мюллер в своем Твиттере, AMP не является фактором ранжирования. Несмотря на это, многие предпочитают использовать данную технологию. Все это из-за страницы «Главные новости», которая привлекает много трафика. Наверняка вы не раз на нее натыкались. Выглядит она так:

Как же это связано с предстоящим обновлением? На недавней конференции представители Google сообщили, что блок «Главные новости» может включать в себя сайты, которые не используют AMP. Так что AMP на данный момент – открытый вопрос. Совсем скоро даже обычные страницы смогут попадать в популярный блок, поэтому велика вероятность того, что через некоторое время технология перестанет использоваться.

Рекомендации по подготовке к нововведениям

Следующие советы помогут вам оптимизировать сайт для продвижения в Google в 2021 году:

Важно понимать, что не в интересах поисковой системы раскрывать все факторы ранжирования.

Заключение

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

Источник

Core Web Vitals: полная инструкция 2021

Существуют три основных показателя Core Web Vitals:

— загрузка сайта (loading);

— визуальная стабильность (visual stability).

Измерить Web Vitals

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

Cмотрите наш прямой эфир про Core Web Vitals с Михаилом Шакиным 👇

Краткий обзор

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

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

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

Core Web Vitals

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

Метрики, входящие в ядро Web Vitals, будут изменяться со временем. В 2021 году фокус будет на трех аспектах:

Что такое Largest Contentful Paint (LCP) или Элемент «Отрисовка самого крупного контента»

Largest Contentful Paint (LCP) измеряет производительность загрузки. Для получения хорошего показателя удобства сайта, необходимо, чтобы LCP наступил в течение 2,5 секунд с момента, когда страница впервые начинает загрузку.

First Input Delay (FID), или задержка первого ввода. Измеряет время с момента действия пользователя и до реакции на это действие браузера в момент загрузки страницы, когда основной поток может быть занят другими процессами. Низкий показатель FID помогает гарантировать, что страница является пригодной для использования, то есть быстро реагирует на действия посетителя. Чтобы понимать в цифрах, то для хорошего юзабилити необходимо стремиться к значению FID меньше 100 миллисекунд.

Cumulative Layout Shift (CLS), или неожиданные смещения макета из PageSpeed Insights, — параметр, который измеряет визуальную стабильность сайта. Самая критичная ошибка в юзабилити — это когда что-то происходит без желания и контроля посетителя сайта. CLS — это про тот случай, когда вы открыли страницу и начали изучать контент, как вдруг выехал баннер сверху и сдвинул контент вниз. То, что произошло без предупреждения и без вашего желания на странице. В данном случае, контент должен «уезжать», чаще всего это сдвиг вниз. Рекламные баннеры, меню, шрифты — эти и другие элементы могут быть причиной CLS. Чтобы UX был хорошим, вам надо держать показатель CLS ниже 0.1.

Чем замерить Web Vitals: три сервиса для теста

В Гугл абсолютно уверены, что Core Web Vitals критичен для каждого посетителя сайта. Именно поэтому Web Vitals интегрирован в каждый сервис от Гугл.

Отчет Chrome User Experience Report собирает анонимизированные данные реальных посетителей с замером по каждому параметру Core Web Vitals. Эти данные дают быстрый доступ к показателям производительности сайта без необходимости делать ручные замеры. Эти же данные выводятся в PageSpeed Insights и в отчете Search Console Core.

Chrome User Experience Report: +LCP +FID +CLS

PageSpeed Insights: +LCP +FID +CLS

Search Console (Core Web Vitals report): +LCP +FID +CLS

Данные из отчета Chrome User Experience Report — это быстрый доступ к пониманию производительности сайтов. Но это не подробные данные, которые можно собрать, используя технологию real-user monitoring. Рекомендуем настроить живой мониторинг. Обратитесь к нам за консультацией.

Как измерить Core Web Vitals, используя JavaScript

Каждый параметр Core Web Vitals может быть измерен JavaScript’ом, используя стандартные web APIs.

Самый простой метод измерить всё из Core Web Vitals — использовать JavaScript библиотеку «web-vitals». Маленькая и готовая библиотека, которая аккуратно сделает все замеры и передаст их, куда надо.

С библиотекой web-vitals замерить каждую метрику так же просто, как вызвать функцию. Для полной инструкции использования смотрите документацию API:

const body = JSON.stringify(metric);

// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.

(navigator.sendBeacon && navigator.sendBeacon(‘/analytics’, body)) ||

Проверить, как это работает в реальном времени, можно при помощи расширения для браузера. В этом случае не придется писать ни одной строки кода. Это расширение использует библиотеку «web-vitals», измеряя каждый параметр в реальном времени, и показывает данные в браузере, как они есть.

Это расширение CWV поможет понять производительность вашего сайта и изучить сайты ваших конкурентов.

web-vitals: +LCP +FID +CLS

Web Vitals Extension: +LCP +FID +CLS

Для тех, кто предпочитает измерять каждую метрику через API, есть отдельные гайды на все случаи жизни:

Синтетический замер Core Web Vitals

Считается, что Core Web Vitals работает только для живых замеров. Но его также можно замерять и в лабораторных условиях. Это называется синтетический замер, когда для получения метрик мы берем настроенный определенным образом сервер, с браузером Chrome. При этом скорость соединения тоже ограничена для эмуляции мобильного посетителя.

Синтетические замеры помогают увидеть узкие места еще до того, как их получат посетители вашего сайта, а вы увидите их спустя время в отчетах Search Console или PageSpeed Insights.

Сервисы для синтетического замера Core Web Vitals:

Такие сервисы, как Lighthouse, которые загружают страницу в эмулированном окружении без реального посетителя, измеряют FID, имитируя действия пользователя, что может вызывать некорректные значения показателя. Поэтому синтетическая метрика Total Blocking Time (TBT) — это отличная замена параметру FID. Ускорение сайта, при котором улучшается параметр TBT в лабораторных замерах, должен исправить к лучшему FID в живых замерах. Про то, как улучшать каждый из параметров, мы напишем отдельные статьи.

Синтетические замеры — важнейшая часть при оценке производительности сайта. Но это не замена живых данных.

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

Рекомендации для исправления ваших показателей Core Web Vitals

После измерений метрик Core Web Vitals и определения узких мест для исправлений — самое время для оптимизации скорости сайта.

Скачайте нашу инструкцию по улучшению показателей Core Web Vitals.

Другие параметры Core Web Vitals

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

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

Например, показатели Time to First Byte (TTFB), или время ответа сервера, и First Contentful Paint (FCP), или отрисовка первого контента, — два важнейших показателя для скоростной загрузки. Оба показателя очень помогают в диагностике проблем с LCP.

То же самое с метриками Total Blocking Time (TBT) и Time to Interactive, TTI — время до полной интерактивности. Это синтетические метрики, которые важно измерять, чтобы поймать узкие места в наступлении интерактивности, которые будут влиять на FID. TBT и TTI не входят в Core Web Vitals, потому что они не отражают опыт, полученный пользователями в реальном времени.

Развитие Core Web Vitals в 2021 году

Web Vitals и Core Web Vitals — это лучший инструмент для разработчика, чтобы измерять показатель впечатлений посетителей от вашего сайта. Но эти сигналы не идеальны, и будущие изменения не за горами.

Показатели Web Vitals актуальны для каждого сайта в интернете и представлены в каждом инструменте от Гугл. Любое изменение в этих метриках затронет очень большой массив данных. В то же время, разработчики должны понимать, что необходимо держать показатели Web Vitals в определенной стабильности при каждом обновлении на вашем сайте.

Источник