Как подготовить сайт к 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 – обновленный фактор ранжирования в Google. Как подготовиться и на что обратить внимание
Привет всем! В данном материале, я хочу рассказать про новый (обновленный) фактор ранжирования в поисковой системе Google и на что обратить внимание, если вам важен органический трафик.
Анонс Core Web Vitals
В мае 2020 компания Google объявила об обновлении фактора ранжирования Core Web Vitals. Они заявили, что положительный опыт взаимодействия пользователя с сайтом, напрямую влияет на конверсию и поэтому с мая 2021 данный фактор будет влиять на ранжирование вашего сайта в поисковой системе Google. Как по мне, и без анонса, данный фактор применялся и бывалые оптимизаторы всегда обращали внимание на пользовательский опыт.
Что такое Core Web Vitals
Core Web Vitals – обновленный фактор ранжирования в поисковой системе Google. Он состоит из нескольких параметров пользовательского взаимодействия с конкретной страницей вашего сайта. Простыми словами, это то, насколько просто и удобно пользователю взаимодействовать с вашим сайтом.
Из чего состоит данный фактор:
Largest Contentful Paint (LCP) – отрисовка наибольшего элемента на странице. В зависимости от вашего контента, это может быть блок текста, фоновая картинка или другой ёмкий контент. Это показатель загрузки страницы, и по рекомендации Google, он не должен превышать 2,5с с момента начала загрузки страницы
First Input Delay (FID) – параметр интерактивности. На сколько быстро пользователь сможет сделать какое-либо действие на сайте (проскролить контент, нажать на ссылку и тд.). Значение FID должно по возможности составлять менее 100 мс.
Cumulative Layout Shift (CLS) – смешение элементов при загрузке страницы. Отражает визуальную стабильность.
Чтобы страницей было удобно пользоваться, значение CLS должно, по возможности, составлять менее 0,1. Этот показатель отображается в Google Search Console и вычисляется по внутренней формуле.
Google рассчитывает эти показатели для конкретной страницы вашего сайта и эти данные можно посмотреть в Google Search Console.
Выше перечисленные параметры являются основными в CWV. Но данный фактор, так же включает уже известные параметры, которые будут оказывать влияние на ранжирование сайта и на них стоит обратить внимание, если вы этого не сделали раньше.
Наличие адаптивной или мобильной версии сайта;
Проблемы с безопасностью (наличие вредоносного ПО, вирусов и тд на сайте);
Отсутствие межстраничных объявлений (всплывающие окна и тд.).
Как улучшить показатели CWV
Каждый из показателей имеет свои рекомендации к улучшению и многое зависит от того, на какой CMS, какие технологии использует ваш сайт и что можно в конкретном случае улучшить.
Рекомендации можно найти в Google Search Console и перейти на Page Speed Insights.
Page Speed Insights
Инструменты
Список инструментов с которыми можно работать для определения CWV показателей
Показатель LCP можно вручную проанализировать, конкретную страницу, с помощью Chrome DevTools. Там можно увидеть, какие элементы дольше всего грузят сайт.
Чтобы ускорить загрузку LCP-элемента и контента на первом экране, подумайте об использовании таких методов, как предварительная загрузка, чтобы браузеры получали эти ресурсы в первую очередь.
Проверить сайт на мобайл френдли можно тут.
Проверка сайта на безопасность можно в Google Search Console
Проверить, содержит ли ваш сайт HTTP заголовки, можно с помощью программы Screaming Frog или ее аналогами, которые сканирует сайт и показывает множество параметров, в том числе и наличие HTTP заголовков.
Чтобы пользователи могли безопасно просматривать сайт, убедитесь, что на нём установлен актуальный SSL-сертификат, и перенесите все URL-адреса и ресурсы на HTTPS.
Важные дополнения от представителей Google
Google не делает различий в оценках по типам веб-сайтов. Не имеет значения, относится сайт к новостным, коммерческим или другим типам.
Для того, что б данные метрики отображались, должны достигаться минимальные пороговые значения по трафику. Google рассчитывает Core Web Vitals на основе данных о пользовательском опыте реальных посетителей. В частности, для этого используются данные отчёта Chrome User Experience. По этому, данные показатели стоит отслеживать, в больше степени, для важных и трафиковых страниц.
Google опубликовал полезный FAQ, в котором вы можете найти много ответов по Core Web Vitals
Зачем вам нужно отслеживать данные показатели
Если вы раньше не задумывались о конверсии на вашем сайте, то Google подталкивает вас начать думать в этом направлении. Вводя, официально, данный фактор, вам будут показываться страницы, которые плохо грузятся, имеют проблемы с версткой, не безопасны, все это сказывается на пользовательском опыте и отталкивает пользователей от сайта. По сути, это техническое качество страницы, но так же не стоит забываем про UX\UI и путь пользователя к конверсии.
Заключение
Описанное выше, в большей степени технические факторы. По прежнему будет важен качественный контент на странице, который будет удовлетворять пользовательскому запросу и по словам представителей Google, контент будет превышать по важности CWV.
«Наши системы будут, как и раньше, отдавать приоритет страницам, на которых содержится лучшая информация в целом, даже если некоторые аспекты Page Experience не будут соответствовать требованиям. Удобство не отменяет требований к отличному и релевантному контенту.» – говорится в справке Google.
Не забывайте, что это всего лишь один фактор из 200+, поэтому к SEO оптимизации необходимо подходить комплексно.
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). Кстати, о какой? Но в целом все корректно, при скроллинге и подгрузке рекламного баннера оценивается смещение блоков. ред.
