Как оптимизировать для Google Core Web Vitals

Как подготовиться к развертыванию Core Web Vitals

Обновлено 15.10.2021

Исправление плохого взаимодействия с пользователем на сайте компании переместилось на вершину многих списков приоритетов.

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

Что такое Google Core Web Vitals?

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

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

5 октября 2021 г. Google загрузил полезные советы в презентацию на YouTube под названием « Как улучшить Largest Contentful Paint для более удобного просмотра страниц» .

Советы от Google о том, как получить лучший показатель Largest Contentful Paint (LCP):

Изображения обычно являются причиной проблем с Largest Contentful Paint. Каждый сохраненный фрагмент может ускорить загрузку страницы. Используйте современные форматы изображений, такие как AVIF и WebP. Есть много пограничных случаев, связанных с тем, как рассчитывается ваша оценка LCP.

Что такое опыт страницы Google?

Опыт страницы — это подмножество пользовательского опыта.

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

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

Давайте немного вернемся и посмотрим, как мы сюда попали.

История скорости сайта и Google Core Web Vitals

Каковы сроки развертывания Google Page Experience?

10 ноября 2020 г. Google объявил: «Сигналы качества страницы при ранжировании появятся в мае 2021 г. Новые сигналы качества страницы сочетают Core Web Vitals с нашими существующими поисковыми сигналами, включая удобство для мобильных устройств, безопасный просмотр, HTTPS-безопасность, и навязчивые межстраничные правила».

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

Начиная с 2015 года Google продвигает удобство для мобильных устройств в качестве сигнала ранжирования. К 2018 году процесс Mobile-First Index был запущен как официальный. Веб-мастера и владельцы сайтов получают уведомление в Search Console, когда Google определяет, что сайт готов к индексации для мобильных устройств. Это происходит, когда Google оценивает мобильную версию вашего веб-сайта в процессе ее оценки для целей поиска; вы не можете вызвать его.

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

Внедрение Web Core Vitals предупреждает любых отстающих владельцев веб-сайтов, не заботящихся об удобстве для мобильных устройств, о том, что это явно важно. Хотя обновление Mobilegeddon развертывалось медленно, теперь необходимо учитывать важность улучшения работы сайта для мобильных пользователей.

Инвестиции Google в инструменты и отчеты по скорости сайта и мобильным устройствам являются сигналом для владельцев веб-сайтов о том, что им нужно упростить использование своих веб-сайтов или они ожидают, что они станут только визитной карточкой в ​​Интернете. Сегодня мы объявляем, что в мае 2021 года появятся сигналы ранжирования страницы.

Какие основные показатели определяют удобство страницы поиска Google?

Объяснение трех основных показателей качества страницы поиска Google:

• Загрузка: LCP оценивает, сколько времени требуется для того, чтобы самый большой элемент контента (такой как избранное изображение, главное изображение или текст заголовка H1) на конкретной веб-странице стал видимым в области просмотра посетителей. Стремитесь получить LCP 1,2 секунды или меньше.
• Интерактивность: FID (задержка первого ввода): часы отсчитывают время от момента, когда пользователь впервые взаимодействует с вашей страницей (например, при нажатии на ссылку, нажатии кнопки и т. д.), до момента, когда браузер отвечает на это взаимодействие. Это измерение получено из любого интерактивного элемента, на который человек щелкнул первым. Это важно на страницах, где посетителю нужно что-то сделать, потому что именно тогда страница становится интерактивной. Также называется отчетами TBT (в GTmetrix); он показывает, сколько времени заблокировано сценариями, которые вызываются в процессе загрузки страницы. Стремитесь получить TBT 150 миллисекунд или меньше.
• Визуальная стабильность: CLS показывает, насколько макет страницы меняется, когда посетитель загружает страницу. Ищите показатель CLS 0,1 или меньше.

Чтобы проверить свой контент, чтобы определить, соответствует ли он пороговому значению Core Web Vitals для маркировки значком быстрой страницы, используйте инструменты разработчика Google для оценки скорости загрузки. Чтобы помочь с этими задачами оптимизации, GTmetrix стал более сложным. В GTmetrix Reports добавлена ​​новая методология оценки. Прежние отчеты PageSpeed ​​и YSlow были обновлены до общей оценки GTmetrix. Благодаря Lighthouse пользователи GTmetrix теперь получают оценку производительности и структуры.

Что такое задержка первого ввода (FID)?

FID — это оценка, которая оценивает, сколько времени потребовалось браузеру для управления другими задачами, прежде чем он смог обработать действия человека, такие как касание или щелчок. Это сигнализирует о том, насколько пользовательский интерфейс реагирует на пользователя, и измеряет нагрузку на ЦП при обработке JavaScript.

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

Способы улучшить задержку первого ввода:

• Задержите или удалите сторонние файлы или пиксели отслеживания.
• Отложите все несущественные сценарии.
• Улучшить выполнение JavaScript.

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

Что такое новый индикатор качества страницы Google?

Google покажет пользователям качество веб-страницы Core Web Vitals с помощью нового индикатора Page Experience. Это уже отображается в некоторых SERPS. По размеру и форме он похож на значок AMP, указывающий на статус ускоренной мобильной страницы. Поскольку Google отлично справляется с тестированием и созданием промежуточных вариантов, это может выглядеть иначе, поскольку оно более широко распространено.

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

Как определить самые важные ключевые веб-задачи

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

1. Сначала решите все, что помечено как «Плохо».

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

3. Вопросы «Требует улучшения» теперь находятся на втором месте в списке приоритетов.

Необходимость резкого улучшения в Layout Content Shift меня очень удивила, но это явно влияет на получение лучших результатов SEO. На странице нет объявлений с задержкой загрузки над контентом, нет навязчивых межстраничных объявлений, а ширина и высота всех изображений правильно определены. Однако исходный размер изображения был 1280 на 860 пикселей. Это вызывало проблему изменения размера изображения; когда браузеры загружали его, они изменяли его размер до 1200 на 800 пикселей. Это вызывает сдвиг макета и последующую задержку загрузки. Убедитесь, что ваши изображения имеют правильный размер для разметки JASON-LD Schema.

Когда вы исправите конкретную проблему во всех своих URL-адресах, вы можете подтвердить, исправили ли вы проблему для всех URL-адресов. Нажмите « Начать отслеживание» , чтобы начать 28-дневный сеанс мониторинга для проверки экземпляров этой проблемы на вашем сайте. Если в течение 28 дней эта проблема не возникает ни на одном URL-адресе вашего сайта, проблема считается исправленной. Присутствия этой проблемы в любом URL-адресе достаточно, чтобы пометить проблему как нерешенную; однако статус отдельных URL-адресов оценивается в течение полных 28 дней, независимо от статуса проблемы.

ОБЩИЕ ЧАСТО ЗАДАВАЕМЫЕ ВОПРОСЫ О CVW

Изучение, устранение неполадок и тестирование/настройка множества параметров для улучшения результатов CWV может занять много времени. Вот ответы:

Как рассчитать балл CLS?

Оценка CLS страницы вычисляется путем умножения доли экрана пользователя, которая неожиданно сместилась при загрузке, на пройденное расстояние. Сайты иногда даже сталкиваются с тем, что половина экрана затрагивается смещением контента. Это раздражает зрителей. В то же время учитывается расстояние, которое контент должен был пройти на экране. Поэтому, чтобы рассчитать показатель CLS, умножьте пораженную площадь экрана (0,5) на пройденное расстояние (0,15), и вы можете получить полезную оценку.

Каковы распространенные причины проблем со сдвигом макета контента?

• Удалите поля на избранном изображении : при запуске инструмента Lighthouse вместе с инструментами разработчика Chrome на одном веб-сайте код figure class=”featured-media” оказался проблемой. Добавив этот дополнительный код CSS .featured-media { img display: none; } .featured-media { img display: none; } , оценка производительности рабочего стола сразу улучшилась на два полных балла.
• Решите любые проблемы с загрузкой шрифтов : некоторые веб-дизайнеры предпочитают внешний вид причудливых веб-шрифтов для заголовков; однако часто то, как они загружаются, вызывает изменение макета. Проверьте, есть ли потенциальные проблемы разбавления кэша, которые необходимо решить, а также способ доставки общего размера шрифтов. Мы обнаружили, что, указав fallback font-display, добавив { font-display: fallback;} , мы можем улучшить поведение рендеринга элементов с помощью инструкции font face.
• Динамически внедряемый контент : это обычно происходит, когда баннеры или формы добавляются на страницу динамически. Кроме того, пользователи, которые не видят «x» для отказа от всплывающего окна, могут быть разочарованы. Кроме того, когда элементы на странице можно использовать, они по-прежнему являются виновником того, почему страница перестраивается и «сдвигается».
• Отсутствие спецификаций изображения : когда изображения на странице имеют неправильные, плохие или не указанные размеры изображения, браузерам требуется дополнительная работа и время для загрузки страницы без этой информации, а затем им необходимо выполнить сдвиг, чтобы вычислить ее.
• Встраивание на странице, реклама и фреймы без размеров . Сообщая браузерам о пространстве макета, необходимом для этих визуальных элементов на странице, вы можете избежать необходимости смещения браузера, когда каждый из них визуально находится на своем месте.

После применения описанных выше стратегий улучшения CLS показатель кумулятивного смещения макета того же сайта теперь составляет 0,01. Это имеет большое значение для улучшения результатов мобильного поиска сайта.

Какие основные показатели Web Vitals можно улучшить, загрузив CSS Async?

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

По словам Корая Тугберка (Koray Tugberk GUBUR), владельца Holistic SEO, «в отношении между загрузкой CSS-файлов в качестве асинхронного режима и ранним открытием веб-страниц для пользователя некоторые показатели Pagespeed оказывают более положительное влияние, чем другие. Более быстрая загрузка CSS-файлов особенно улучшает показатели First Paint, First Contentful Paint, Largest Contentful Paint и Speed ​​Index».

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

Как Google измеряет скорость загрузки?

Предложения по улучшению и диагностике, содержащиеся в PageSpeed ​​Insights, генерируются на основе лабораторных тестов; Показатели производительности более точны, если они получены из полевых результатов. Как только у вас появится общее представление о том, как улучшить PageSpeed, логика того, как Google оценивает это, может положительно повлиять на ваши жизненно важные результаты в Интернете.

Три новых показателя производительности объединяют этот мир веб-производительности. Они поддерживаются через API в браузерах Chrome, Chrome на Android, Chromium Edge. Данные, на которые Google опирается при измерении опыта страницы, получены из отчета Chrome UX Report (CRUX). Он состоит из анонимной статистики производительности, которую предоставляют реальные загрузки страниц в браузерах Chrome по всему миру.

Будучи независимым от состояния кеша, CRUX оценивает все регулярные загрузки страниц, включая как целевые, так и веб-страницы в середине сеанса. Он пропускает мягкую навигацию, также называемую изменением маршрута, в одностраничных приложениях. Мягкая навигация может быть оштрафована. Более низкие оценки CLS и значения LCP сигнализируют о снижении количества пользователей, столкнувшихся с неожиданными изменениями макета.

Насколько важно сжатие изображения для оценки CWV?

Вам не нужно жертвовать качеством изображения, чтобы получить хорошую оценку CWV.

Современные браузеры могут работать с изображениями высокого разрешения, если они предоставлены; в то время как вы все еще хотите сжать их, используйте только нужный размер, чтобы отлично выглядеть на дисплеях с высоким разрешением. Вы можете использовать CND и подумать о том, чтобы начать с менее сложного изображения или фона. Изучите и следуйте рекомендациям Google по изображениям.

@Jamsession18 спросил Джона Мюллера из Google 26 марта 2021 года:

«Не могли бы вы ответить на мой вопрос относительно качества используемых изображений? Я работаю на новостном сайте, который в настоящее время оптимизируется для CWV, и для этого наша технология сжимает изображения до экстремального уровня за счет качества изображения (теперь изображения размыты). Стоит ли это затрат?»

«Звучит как плохая идея. Опыт страницы — это лишь один из многих факторов, на которые мы обращаем внимание при ранжировании, но если пользователям не нравится ваш контент, они вряд ли совершат конверсию (как бы вы этого ни хотели) и вряд ли захотят вернуться». -???? Джон ???? @ДжонМу

Чем отличаются полевые и лабораторные данные?

Одно отличие состоит в том, что лабораторные данные полезны для тестирования, а полевые данные лучше подходят для ранжирования.

Лабораторные данные — это данные о производительности, обнаруженные в уникальной среде. Инструменты Chrome Dev Tools и webpagetest.org обычно используются для получения лабораторных данных. Полевые данные охватывают данные, собранные из коллекции пользователей, которые посещают страницы вашего сайта с помощью браузера Chrome. Полевые данные — это то, что заполняет ваши отчеты Google Search Console, а также Google Page Speed ​​Insights (который использует как лабораторные, так и полевые данные для своих отчетов о страницах).

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

Почему важно улучшать все три основных веб-показателя?

Все три теста Core Web Vitals (CWV) сигнализируют о ключевом компоненте того, что необходимо для обеспечения хорошего взаимодействия с пользователем. Каждый из 3 показателей должен быть выполнен, чтобы претендовать на соответствующее повышение рейтинга Google, которое начнется в мае 2021 года. Google предлагает нам 6 способов измерения этих основных веб-показателей. Как мы узнали от Джона Мюллера, старшего аналитика тенденций веб-мастеров в Google, все минимальные требования должны быть выполнены, чтобы воспользоваться этим обновлением алгоритма, которое скоро появится.

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

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

Я не знаю, каким будет подход, когда есть что-то нормальное, а что-то не совсем нормальное, например, как это будет уравновешиваться». — Джон Мюллер

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

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

Сможет ли человек, проводящий поиск, сказать, какие сайты проходят тест Core Web Vitals?

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

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

Основные инструменты тестирования Web Vitals

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

Сейчас доступно несколько инструментов; мы предпочитаем Маяк. Используя многие из них, вы можете получить больше общей перспективы. Однако они значительно различаются по своим приложениям, требуемым уровням навыков для технического мастерства и отчетам. Консоль поиска очень удобна тем, что является информационной панелью Core Web Vitals каждого сайта. Получение обзора всего веб-сайта с высоты птичьего полета — согласно Google — жизненно важно для успеха. Расширение Chrome и PageSpeed ​​Insights лучше подходят для быстрой оценки страниц. Со временем мы добавим сюда больше.

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

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

Google был свидетелем этой борьбы и годами прислушивался к вопросам SEO, как получить поддержку. Технический гигант разумно подчеркивает важность производительности, делая ее прозрачной в своих отчетах Google Search Console и используя ее в качестве дополнительного сигнала ранжирования. Опыт Google Page Experience лучше всего описать как набор факторов, которые измеряют, насколько удовлетворительно для человека взаимодействие с веб-страницей. Сосредоточьтесь на своих клиентах и ​​посетителях сайта и на том, как сделать их работу с вашим сайтом максимально удобной для них.

РЕЗЮМЕ

Оптимизация показателей производительности Core Web Vital, измеренных Google в CRUX, может дать большой импульс в будущем. Но даже до того, как эти жизненно важные веб-элементы станут фактором ранжирования, они окажут положительное влияние на пользовательский опыт вашего сайта. Потребители хотят более быстрого опыта. Улучшение проблем со скоростью загрузки приводит к снижению показателя отказов, увеличению продолжительности сеанса страницы, улучшению показателей удовлетворенности пользователей, повышению рейтинга конверсии и увеличению SEO-трафика. В конечном итоге все это приводит к увеличению доходов.

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

Hill Web Creations может возглавить ваши усилия по оптимизации, начав с комплексного технического SEO-аудита .