Core web vitals что это
Что такое Core Web Vitals
Что такое Core Web Vitals? Это набор определенных моментов и факторов, в совокупности действительно имеющих значительное влияние на ранжирование.
На самом деле, Core Web Vitals уже работает на протяжении какого-то времени. Ни много ни мало, с 2018 года. Помимо прочего, существуют официальные подтверждения в документации корпорации.
До 2018 года существовал сервис PageSpeed, проводящий оценку производительности проектов. По сути, это был просто чек-лист, проверяющий наличие определенных технологий на проекте, за счет чего начислялись либо снимались определенные баллы. На тот момент была необходимость объективной оценки производительности проекта, хотя не всегда эта оценка была объективной. Множество факторов отделяли нас от объективности:
Удаленность от сервера, производящего измерения;
Нахождение сервера в сегменте сети, испытывающего определенные технические проблемы;
Тип браузера, на котором производится оценка;
Фрагментированность используемых средств.
Более того, к 2018 году мы видели некую тенденцию, оказавшуюся очевидной — веб в основной массе активно переходит в мобайл. В мобайле разброс мощностей устройств, которые были как невысокого уровня производительности, так и выше уровня производительности некоторых десктопов, был слишком большой. Что делать в такой ситуации?
На помощь приходит LightHouse. Они предложили метрики, не отличающиеся в зависимости от устройства. Выходит, до сегодняшнего момента, именно LightHouse с базовыми метриками является единственным объективным тестом, измеряющим то, что действительно будет полезно всем. LightHouse стал ответом на потребность в инструменте, который начинал объективно оценивать некоторую производительность. Производительность, на которой сосредоточился LightHouse, является оценкой скорости рендера первой области отображения. Причем именно области отображения, связанной с началом проекта. Оценивается при этом не вся область, а 75%, считающиеся алгоритмом, сравниваемым разность контрастов между скриншотами. И если разность между предыдущим и текущим составляет 75%, LightHouse говорит нам, что важная часть нашего изображения уже отрисована.
С 2016 по 2018 год начинается период ренессанса — Google начинает активно записывать информацию, поступающую от браузера Google Chrome, когда доля занимаемого рынка становится более 50%. Соответственно, можно осмелиться предположить, что данные, оцениваемые корпорацией диктовали некие тенденции.
В 2018 году появляется первое крупное и официальное Speed Update, заявляющее о новом факторе ранжирования — User Experience Metrics (UEM). И вот мы здесь — ровно эти же факторы сейчас имеют название Web Vitals. Единственным отличием является то, что UEM замерял временные метрики, сейчас входящие в состав Core Web Vitals. Core Web Vitals же является более обобщенной метрикой, хотя именно в 2018 году была представлена метрика, основные принципы которой используются сейчас. Согласно информации от самой корпорации Google, и согласно описанию работы UEM, документацию о которой можно найти на официальных источниках Google по сей день, образуется интересный вывод: Core Web Vitals действительно является тем же фактором ранжирования, что и UEM, но лишь с незначительным отличием в виде более обобщенного, или собирательного метода оценки, и отличающимся названием.
Core Web Vitals образца 2021 и 2022 года: чего стоит ждать?
Если обратиться к официальной документации или специалисту, можно узнать о множестве различных аббревиатур, каждая из которых мало влияет на функционирование системы и нередко то появляется в документации, то её покидает (LCP, FID, CLS и другие). Доминирующий фактор, стоящий внимания — скорость формирования первой области отображения, представляющая основной показатель. Этот показатель является определяющим суть всей системы.
Пример оценки работы страницы от Core Web Vital
В Core Web Vital грядут изменения, способные изменить понимание о том, как стоит относиться, обсуждать и объяснять работу Core Web Vitals. Технические специалисты отлично проинформированы о том, что, хотя Core Web Vitals в текущем его состоянии и является отличной мерой измерения и оценки ранжирования, взаимодействие со страницей не заканчивается на первой области отображения — логично, что целесообразнее и эффективнее будет проводить комплексную оценку ряда взаимодействий страницы и после рендера первой области отображения. Здесь нельзя не согласиться, пока мы не возьмем во внимание одну интересную новость — в Core Web Vitals следующих образцов начала 2022 года будут присутствовать характеристики, которые будут оценивать работу страницы после того этапа, на котором останавливается Core Web Vitals текущего образца.
Можно предположить, что при введении последующих крупных обновлений будут введены характеристики и инициативы, связанные с работой проекта после окончания работ Core Web Vitals. Среди таких инициатив:
privacy. анонимность пользователей;
accessibility. уровень соответствия проекта типичным требованиям доступа со стороны людей с альтернативными потребностями;
smoothness. плавность анимации страницы;
frame rate. количество кадров в секунду.
Также будет оцениваться загруженность процессора устройства, на котором будет производиться загрузка проекта, загруженность тредов и множество другого.
Вероятнее всего, в 2021 году в Core Web Vitals будут присутствовать два термина, которые выступят новыми факторами. Эти два фактора “перечеркивают” работу людей, связанную с Core Web Vitals. Первый фактор заключается в объеме потребляемой оперативной памяти, которую должен использовать браузер при рендере проекта в процессе его существования. Второй фактор заключается в плавности анимации или взаимодействия интерфейса пользователя с браузером (изменения количества кадров в секунду при идеальном показателе в 60 к/с).
Вся весомость факторов заключается в том, что в основной стратегии, к которой прибегают оптимизаторы под Core Web Vitals, заключается идея о том, что тесты Core Web Vitals когда-то закончат работу, отошлют результаты на сервер и предоставят полную свободу действий, хотя при измерении показателей и при оценке создаются ситуации, в которых проект показывает наивысший уровень производительности. В частности, существует официальный проект Nitro Pack, позволяющий резко повысить производительность проекта при измерении метрики с помощью Web Vitals. Стратегия подвергнется угрозе, ведь нередко оптимизации попросту нет — есть лишь изменение нагрузки на рендер в браузере, действующее непосредственно в момент проведения оценивания. Именно эти процессы и не будут иметь смысла при введении новых характеристик Core Web Vitals в 2022 году.
Тем не менее, уже существуют теоретически действенные методы, способные изменить влияние на метрики Core Web Vitals. Самый простой принцип — отрезать от проекта все, что возможно. Именно этим способом и пользуются оптимизаторы — все возможные детали “вырезаются” из проекта на момент проведения оценки, после — возвращаются обратно.
Пример диагностики с помощью Core Web Vital
Для полноценного понимания работы всей системы следует понимать то, как работает фиксация метрики. Следует подчеркнуть, что некоторые сервера Google вовсе не фиксируют метрики — они фиксируются статистикой, которую отправляют пользователи, использующие браузер в момент подключения к сайту. С одной стороны это не совсем хорошо, ведь в таком случае мы не способны прямым образом повлиять на характеристики, но с другой стороны — появляется усредненная оценка, не зависящая от удаленности пользователей. Подобная оценка более-менее объективна и на самом деле оценивает скорость рендера первой области отображения страницы.
Как подготовить сайт к Core Web Vitals
Еще не зарегистрированы?
Что такое Core Web Vitals?
Core Web Vitals (Кор веб вайтлс) — это набор показателей, используемых для измерения загрузки, интерактивности и стабильности сайта. Все три показателя так или иначе связаны со скоростью сайта, что очень важно как для поисковых систем, так и для пользователей.
Анонс Core Web Vitals от Google
В ноябре 2020 года Google сообщил, что обновление вступит в силу в мае 2021 года, поэтому для владельцев сайтов и специалистов по поисковой оптимизации по всему миру настало время принимать меры.
Важная особенность Core Web Vitals в том, что Google предоставил точные показатели, которые можно измерить и улучшить, и сообщил дату (май 2021 года), когда это обновление вступит в силу.
Это указывает на то, что Page Experience, безусловно, будет важным обновлением, к которому мы действительно можем подготовиться, если сделать процесс аудита подробным и точным.
Показатели Core Web Vitals
Ниже Гугл представил показатели, которые необходимо проанализировать в ходе оптимизации сайта под Core Web Vitals:
Largest Contentful Paint (LCP) — измеряет производительность загрузки (сколько времени требуется для загрузки самого большого элемента в области просмотра).
Чтобы обеспечить удобство работы пользователя, LCP должна срабатывать в течение 2,5 секунд после первой загрузки страницы и не позже 4 секунд; это поможет избежать низкой оценки.
First Input Delay (FID) измеряет интерактивность (сколько времени требуется сайту для ответа, когда пользователь куда-то нажимает).
Чтобы обеспечить удобство работы пользователя, страницы в идеале должны иметь FID менее 100 миллисекунд и не более 300 миллисекунд, иначе сайт заслужит низкую оценку. В процессе аудита, подробно описанном ниже, мы используем аналогичную оценку «Общее время блокировки (TBT)»
Cumulative Layout Shift (CLS) измеряет визуальную стабильность (смещается ли страница по мере того, как пользователь прокручивает содержимое).
Чтобы обеспечить удобство работы пользователей, страницы в идеале должны поддерживать CLS ниже 0,1 и не превышать значения 0,25.
Core Web Vitals аудит сайта с помощью Screaming Frog
Недостаточно знать, что такое Core Web Vitals. Поиск способа проверки и постановки ТЗ клиенту для исправления проблем, связанных с Core Web Vitals — вот основная проблема, с которой столкнулись оптимизаторы.
Процесс аудита предназначен для предоставления реальных деталей, примеров и данных, с которыми можно работать при решении проблем Core Web Vitals.
Для начала аудита вам потребуется:
Шаг 1. Подключаем ключ API PageSpeed Insights к Screaming Frog
Вам нужно подключить ключ API PageSpeed Insights в Screaming Frog. Это позволит вам получить доступ к данным и рекомендациям PageSpeed Insights для каждой страницы. У PageSpeed Insights есть лимиты — около 25 000 в день, которых должно хватить для небольших сайтов, а для более крупных проектов вы сможете реплицировать информацию, полученную с других типовых страниц.
После подключения нажмите « Metrics ». Здесь вы определите метрики, которые будут отображаться при сканировании. Для целей этого аудита я выбираю «Все группы показателей», но вы можете выбрать только те, по которым хотите составить отчет, и нажать «ОК».
Доступны следующие группы показателей:
Шаг 2: просканируйте сайт
Во время сканирования сайта вы заметите, что в правом верхнем углу появился индикатор выполнения «API». Вам нужно подождать, пока оба показателя достигнут 100%, прежде чем вы начнете анализировать данные.
Шаг 3. Анализ общего состояния сайта
Прежде чем углубляться в детали того, что необходимо исправить, стоит изучить масштабы проблемы. Для этого вам нужно посмотреть, какой процент страниц не соответствует каждому минимальному пороговому значению Core Web Vitals.
На верхней панели навигации выберите «PageSpeed», а затем «Экспорт».
Просматривая экспортированные данные, найдите следующие столбцы и отфильтруйте их соответствующим образом:
Добавьте эти данные в отдельную таблицу, чтобы вы или ваш клиент могли легко просматривать страницы, которые не соответствуют рекомендованным параметрам Core Web Vital. Затем вы можете указать процент страниц на сайте, которые не соответствуют минимальным порогам Core Web Vitals. Вот пример, который я недавно отправил клиенту:
Теперь у вас есть полный список (или примерный список, если сайт был слишком большим) страниц, которые не соответствуют минимальным пороговым значениям Core Web Vitals, а значит, разработчики точно знают, где искать отказавшие страницы. Если вы заметили какие-либо закономерности (например, проблемы встречаются только на страницах блога и т.д.), вы тоже можете сообщить об этом.
Шаг 4. Готовим ТЗ для исправления для каждой страницы
Результат аудита — превращение проблемы в решение. Мы знаем, что X страниц не соответствует минимальным пороговым значениям Core Web Vitals, но что мы можем с этим поделать? Вот где действительно творит свое чудо API PageSpeed Insights.
Справа на вкладке «Overview» прокрутите вниз до «PageSpeed». Здесь вы найдете список проблем/рекомендаций, касающихся скорости загрузки страниц и, по большей части, Core Web Vitals.
Важно отметить, что данные, доступные в Screaming Frog и PageSpeed Insights, могут не обеспечивать исчерпывающий список всех проблем, которые могут влиять на Core Web Vitals, но они точно помогут вам при анализе и улучшении сайта.
Кликните на проблему, чтобы просмотреть затронутые страницы и экспортировать их в таблицу. Теперь вы знаете, сколько страниц затронула конкретная проблема.
В приведенном ниже примере я экспортировал список всех страниц с ресурсами, блокирующими рендеринг, которые могут отрицательно повлиять на LCP. Теперь я могу порекомендовать клиенту просмотреть этот список и решить, возможно ли встраивание, отсрочка или удаление ресурсов на этих страницах.
Для каждой из рекомендаций, которые вы даете, также доступны данные об «экономии», которую можно было бы получить, исправив эту конкретную проблему, в байтах или миллисекундах.
В приведенном ниже примере экономия как в миллисекундах, так и в байтах намного больше для отложенных изображений вне экрана, чем при удалении неиспользуемых CSS, поэтому отложенные изображения вне экрана будут более приоритетными.
Шаг 5. Анализ проблем, которые характерны для каждой страницы
Следуя примеру ресурсов с блокировкой рендеринга, теперь вам нужно выбрать один из URL-адресов, затронутых этой проблемой, и выбрать вкладку «PageSpeed Details» на нижней панели навигации.
В нижней левой панели теперь будет отображаться информация о скорости страницы, относящаяся к выбранной странице. Перейдите к возможностям —> Устранение ресурсов, блокирующих рендеринг.
В правом нижнем углу панели вы увидите URL-адреса ресурсов, блокирующих рендеринг на этой странице, их размер (в байтах) и потенциальную экономию загрузки страницы, которая может быть достигнута (в миллисекундах), если эти ресурсы, блокирующие рендеринг, будут устранены.
Вы можете массово экспортировать конкретные проблемы:
Reports —> PageSpeed —> Конкретная проблема.
PageSpeed —> Конкретная проблема» src=»https://www.rush-analytics.ru/sites/all/themes/stat/front/img/emailimages/CoreWebVitals/Pic_17_Reports.jpg» style=»width:600px» />
После того, как вы собрали все данные по проблемам на сайте, вы можете предоставить письменный отчет с рекомендациями по каждой проблеме в порядке приоритета со ссылкой на данные своей таблицы.
Шаг 6. После внесения изменений повторно проверьте сайт
Чем раньше вы проведете этот аудит, тем лучше, поскольку для решения всех или хотя бы основных проблем потребуется время. Как только задачи будут решены, вы должны вернуться к первому шагу и повторно просмотреть сайт, чтобы отследить динамику изменений.
Здесь вам пригодится процентное соотношение страниц, не соответствующих минимальным пороговым значениям Core Web Vitals: это быстрый и простой способ понять, удалось ли добиться желаемого эффекта в результате сделанных изменений или нет.
Владельцы сайтов, которые будут соответствовать пороговым значениям, получат явное преимущество с точки зрения видимости результатов поиска. Хотя мы и не можем точно предсказать, что произойдет в день выхода обновления Page Experience Update, но описанный процесс аудита поможет вам хорошо подготовиться
Core Web Vitals: Полное Руководство Глава 1 (Перевод книги)
Это перевод книги с ресурса searchenginejournal.com.
Перевод сделан в режиме machine translation + постредактура.
Это мой небольшой проект, с помощью которого я обучаю движок машинного перевода и переводческую память.
Это перевод Первой главы
Издано Search Engine Journal®
(позже здесь будут активные ссылки на каждую из глав)
Новый Фактор Ранжирования Google: Core Web Vitals — Вы Готовы? Анна Леа Кроу
Как Измерить Core Web Vitals Мэтт Саутерн
Core Web Vitals Частые вопросы: Советы и рекомендации от Google Роджер Монти
Cumulative Layout Shift (CLS) — Обзор фактора ранжирования Google в 2021 году Роджер Монти
Как оптимизировать Медиа и Уменьшить Largest Contentful Paint (LCP) Натан Келли, Управляющий директор, Оптимизатор медиа, Cloudinary
Что Такое Largest Contentful Paint (LCP): Простое Объяснение Роджер Монти
Техническое руководство по SEO для определения показателей производительности Lighthouse Джейми Индиго и Рэйчел Андерсон
28 мая 2020 года Google представила то, что они назвали Core Web Vitals. И теперь Core Web Vitals становятся новым фактором ранжирования Google. Core Web Vitals, предоставляют возможность для повышения рейтинга — но только для тех, кто делает это правильно. Это руководство поможет вам узнать все, что вам нужно знать, чтобы воспользоваться преимуществами Core Web Vitals.
Google дали нам Панду и Пингвина.
На самом деле, крупнейшая в мире поисковая система предоставляет нам сотни обновлений каждый год.
Некоторые более эффективны, чем другие, и одни из них являются подготовкой к внедрению Core Web Vitals в июне 2021 года.
Если вы специалист по SEO или цифровому маркетингу, вам нужно прочитать это.
И когда Google так подробно рассказывает нам, чего именно он хочет, нам лучше прислушаться.
Определяя показатели Core Web Vitals, Google стремится предоставить четкие указания относительно сигналов качества, которые, по его словам, «необходимы для обеспечения отличного пользовательского опыта в Интернете”.
Производительность веб-страниц важна для издателей, потому что быстрые страницы генерируют больше потенциальных клиентов, больше продаж и больше доходов от рекламы.
Готовы ли вы воспользоваться преимуществами Core Web Vitals и наслаждаться повышением рейтинга, которое обеспечивает достижение хороших результатов по этим показателям?
Измерение ваших параметров Core Web Vitals настолько просто, что вы, вероятно, могли бы сделать это во сне.
Продолжайте прокручивать наше руководство, чтобы добраться до сути вопросов производительности на вашем веб-сайте.
К концу этого руководства вы получите более четкое представление о том, что означают Core Web Vitals и как диагностировать проблемы.
Google определил набор показателей, на которые владельцы сайтов должны ориентироваться при оптимизации для удобства пользователей.
Определяя Core Web Vitals, Google стремится обеспечить единое руководство по качественным сигналам, которые, по словам Google, «необходимы для обеспечения отличного пользовательского опыта в Интернете”.
Google подчеркивает важность Core Web Vitals по сравнению с другими показателями, поскольку они имеют решающее значение для всего веб-взаимодействия.
«Оптимизация качества пользовательского интерфейса является ключом к долгосрочному успеху любого сайта в Интернете.
Являетесь ли вы владельцем бизнеса, маркетологом или разработчиком, Web Vitals может помочь вам количественно оценить качество работы вашего сайта и определить возможности для улучшения”.
Ожидания пользователей относительно работы в Интернете могут варьироваться в зависимости от сайта и контекста, но некоторые остаются неизменными независимо от того, где они находятся в Интернете.
Core Web Vitals — это потребности пользователей, к удовлетворению которых должны стремиться все веб-сайты.
В частности, Google определяет основные потребности пользователей в таких областях, как загрузка, интерактивность и визуальная стабильность.
Вот как измеряются эти потребности пользовательского опыта.
Google говорит, что владельцы сайтов могут измерять качество пользовательского интерфейса своего сайта с помощью этих показателей:
Largest Contentful Paint (LCP): время, необходимое для загрузки самого «тяжелого» элемента, видимого в области просмотра пользователем содержимого страницы. Идеальное значение LCP составляет менее или равно 2,5 секундам.
First Input Delay (FID): время, необходимое для того, чтобы страница стала интерактивной. Идеальное значение составляет менее или равно 100 мс.
Cumulative Layout Shift (CLS): величина неожиданного сдвига макета визуального содержимого страницы. Идеальное значение меньше или равно 0,1.
Google объясняет, почему эти три показателя, в частности, так важны:
«Все эти показатели отражают важные результаты, ориентированные на пользователя, поддаются измерению на местах и имеют вспомогательные эквиваленты лабораторных диагностических показателей и инструментария.
Например, в то время как Largest Contentful Paint (LCP) является показателем загрузки верхней строки, она также сильно зависит от First Contentful Paint (FCP) и Time to First Byte (TTFB), которые по-прежнему критичны, когда дело доходит до мониторинга и улучшений на сайте”.
Google включает способы измерения Core Web Vitals во многие из своих существующих инструментов.
Core Web Vitals теперь можно измерить с помощью:
Web Vitals Extension
Ниже подробнее рассмотрим информацию об использовании каждого из этих инструментов для измерения Core Web Vitals.
В консоли поиска появился новый отчет «Core Web Vitals», который поможет владельцам сайтов оценивать страницы всего сайта.
В отчете определены группы страниц, требующих внимания, на основе реальных данных из отчета Chrome UX.
При работе с этим отчетом имейте в виду, что URL-адреса будут опущены, если они не содержат минимального объема отчетных данных.
PageSpeed Insights был обновлен до версии Lighthouse 6.0, что позволяет измерять основные показатели веб-сайта как в лабораторных, так и в полевых разделах отчета.
Core Web Vitals помечены синей лентой, как показано ниже.
Lighthouse был недавно обновлен до версии 6.0, включая дополнительные аудиты, новые показатели и недавно составленный показатель производительности.
Две из этих новых добавленных метрик — это Largest Contentful Paint (LCP) и Cumulative Layout Shift (CLS).
Эти показатели являются лабораторными реализациями Core Web Vitals и предоставляют диагностическую информацию для оптимизации работы пользователей.
Все продукты, которые поддерживает Lighthouse, обновлены в соответствии с последней версией.
Также называемый CrUX, этот отчет представляет собой общедоступный набор данных о реальном пользовательском опыте на миллионах веб-сайтов.
Chrome UX Report измеряет полевые версии всех основных веб-функций, что означает, что он сообщает реальные данные, а не лабораторные данные.
Google недавно обновил отчет новым лэндингом Core Web Vitals.
С отчетом можно ознакомиться здесь.
Chrome DevTools был обновлен, чтобы помочь владельцам сайтов находить и устранять проблемы с визуальной нестабильностью на странице, которые могут способствовать Cumulative Layout Shift (CLS).
Выберите Layout Shift (сдвиг макета), чтобы просмотреть его сведения на вкладке Сводка. Чтобы визуализировать, где произошел сам сдвиг, наведите курсор на поля «Перемещено из» и «Перемещено в».
Chrome DevTools также измеряет Total Blocking Time (TBT), что полезно для улучшения First Input Delay (FID).
TBT теперь отображается в нижнем колонтитуле панели производительности Chrome DevTools при измерении производительности страницы.
Оптимизация производительности, улучшающая TBT в лаборатории, также должна улучшить FID.
Новое расширение, теперь доступное для установки в интернет-магазине Chrome, измеряет три основных показателя веб-показателей в режиме реального времени.
Вы можете скачать и установить расширение здесь.
Какими бы важными ни были Core Web Vitals, они не являются единственными показателями пользовательского опыта, на которых следует сосредоточиться.
По мере того, как Google будет улучшать свое понимание пользовательского опыта в будущем, он будет ежегодно обновлять Core Web Vitals.
Google также предоставит обновленную информацию о будущих функциях на включение в список Core Web Vitals, о причинах их выбора и статусе внедрения.
На данный момент, по крайней мере, компания вкладывает значительные средства в улучшение понимания скорости страницы:
«Заглядывая в будущее на 2021 год, мы инвестируем в улучшение понимания и способности измерять скорость страницы и другие важные характеристики пользовательского опыта.”
«Например, расширение возможностей измерения задержки ввода во всех взаимодействиях, а не только в первом; новые показатели для измерения и количественной оценки плавности; примитивы и вспомогательные показатели, которые позволят предоставлять мгновенные и сохраняющие конфиденциальность возможности в Интернете; и многое другое.»
Это конец первой главы.
Следующая глава будет здесь.
Спасибо, что прочитали до конца.
Если вы нашли какие-то неточности в переводе или ошибки, пишите в комментариях.
Contentful Paint (LCP): время, необходимое для загрузки основного содержимого страницы. Идеальное значение LCP составляет менее или равно 2,5 секундам.
Самый большой и тяжёлый элемент на странице имеется в виду. «Основной» трактуется неоднозначно.
First Input Delay (FID): время, необходимое для того, чтобы страница стала интерактивной. Идеальное значение составляет менее или равно 100 мс.
Это разница во времени, когда пользователь начинает взаимодействие со страницей/элементом и когда браузер может «ответить» на это взаимодействие. «Скоростью интернета» эффект часто называют. Возможно это и прямой перевод, но смысл «интерактивный» не понятен из контекста.
Cumulative Layout Shift (CLS): величина неожиданного сдвига макета визуального содержимого страницы. Идеальное значение меньше или равно 0,1.
Тут не очень понимаю о какой величестве идёт речь (0,1). Кстати, о какой? Но в целом все корректно, при скроллинге и подгрузке рекламного баннера оценивается смещение блоков.
Я на эту тему подкаст записывал для Топвизор в момент анонса Core Web Vitals: