За последние несколько месяцев Google развернул отчет Core Web Vitals в Google Search Console, фактически заменив предыдущий отчет о скорости.

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

Что было заменено в отчете Core Web Vitals?

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

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

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

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

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

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

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

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

  • Самый большой Contentful Paint (LCP ): измеряет производительность загрузки. Чтобы обеспечить удобство работы пользователей, LCP должен сработать в течение 2,5 секунд после того, как страница впервые начнет загружаться.
  • Задержка первого входа (FID) : измеряет интерактивность. Чтобы обеспечить удобство работы пользователей, страницы должны иметь FID менее 100 миллисекунд.
  • Накопительное смещение макета (CLS) : измеряет визуальную стабильность. Чтобы обеспечить удобство работы пользователей, страницы должны поддерживать CLS менее 0,1.

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

Как измерить Core Web Vitals

Самый простой способ увидеть ваши Core Web Vitals — войти в свою учетную запись Google Search Console и перейти к нужному ресурсу.

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

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

Как оптимизировать самую большую нагрузку на контент (LCP) 

В отличие от First Contentful Paint (FCP), которая измеряет, сколько времени требуется для отображения первого бита контента, Largest Contentful Paint (LCP) определяет, как долго и когда становится видимым самый большой элемент контента на вашей веб-странице.

Хорошей оценкой будет загрузка LCP менее 2,5 секунд, тогда как значение, превышающее 4,0 секунды, считается плохим.

Наиболее частые причины плохой оценки LCP:

  • Медленное время ответа сервера

Более быстрое время ответа от вашего сервера улучшает этот показатель LCP и почти все остальные. Вам следует по возможности оптимизировать свой сервер, что может включать в себя реализацию CDN для обслуживания мультимедиа, кэширование ресурсов, обслуживание HTML-страниц с предварительным кешированием или установление сторонних подключений (например, платежных шлюзов или маркетинговых интеграций).

  • JavaScript и CSS с блокировкой рендеринга

В то время как HTML обеспечивает структуру вашей веб-страницы, JavaScript и CSS делают ее удобной для глаз. Однако слишком ранняя загрузка этих элементов может помешать правильному отображению веб-страницы, что приведет к ненужной задержке. Вы можете сделать несколько улучшений, в том числе сократить время блокировки JavaScript и CSS, уменьшить или отложить некритичный CSS или встраивать важные стили CSS, чтобы уменьшить количество повторных запросов для одних и тех же стилей.

  • Медленное время загрузки ресурсов

Элементы изображения и видео, а также другие медиа могут влиять на скорость загрузки. Оптимизация, изменение размера и сжатие изображений — один из наиболее эффективных способов повышения производительности, о котором часто забывают. Вы также можете реализовать CDN для обслуживания мультимедиа, по возможности предварительно загружать важные ресурсы, использовать прогрессивные форматы изображений, такие как JPEG 2000 или WebP, или просто не использовать изображения, если они не имеют отношения к контенту.

  • Клиентский рендеринг

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

Как оптимизировать задержку первого входа (FID) 

Задержка первого ввода (FID) измеряет скорость отклика веб-страницы, от момента, когда пользователь впервые взаимодействует со страницей, до того момента, когда браузер может ответить и обслужить взаимодействие. Это может быть щелчок по ссылке или нажатие на нее, или ввод строки текста в поле.

Хорошим временем будет FID менее 100 мс, тогда как значение более 300 мс будет показателем плохой оценки.

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

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

  • Уменьшить время выполнения Javascript

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

  • Разбивайте длинные задачи

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

  • Оптимизируйте свою страницу для готовности к взаимодействию

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

Как оптимизировать совокупный сдвиг макета (CLS)

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

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

Накопительный сдвиг макета (CLS) предназначен для измерения стабильности веб-сайта путем измерения элементов на странице, которые все еще перемещаются после 500 мс щелчка, прокрутки или другого ввода пользователя.

Хорошим баллом будет CLS менее 0,1, тогда как значение выше 0,25 будет показателем плохого балла.

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

  • Изображения и медиа без размеров

Это не только включает в себя обеспечение наличия достаточных тегов высоты и ширины на вашем носителе в вашем коде, но и управление соотношением сторон, требуемым в CSS, чтобы гарантировать, что при начальной загрузке достаточно места для обслуживания изображения без нарушения области просмотра. . То же самое относится к внешнему контенту из iframe или встроенных элементов — подумайте о Google Maps, видео с YouTube, встраиваниях сообщений в Twitter и т. Д.

  • Динамический внешний контент

Чтобы легко объяснить этот элемент, представьте себе всплывающее окно согласия GDPR. Вы попадаете на веб-сайт только для того, чтобы быть перемещенным вниз по странице навязчивым всплывающим окном, которое нарушает макет остальной страницы. Опять же, обеспечение того, чтобы для него было зарезервировано место в CSS, может снизить риск перепрыгивания страницы.

  • Проблемы с веб-шрифтами

Веб-шрифты становятся все более популярными, но если ваши шрифты загружаются неправильно, вы можете столкнуться с риском того, что ваши пользователи увидят либо текст без стиля, либо невидимый текст, пока ваш шрифт загружается и отображается. Правило ‘font-display’ позволяет снизить риск их возникновения, но в идеале вы должны стремиться предварительно загрузить веб-шрифт и подавать его при первой отрисовке.

Что произойдет, если вы не примете меры

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

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

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

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

Полезные инструменты для повышения производительности

Google Search Console — бесплатный инструмент от Google, который позволяет вам составлять отчеты и измерять различные показатели, связанные с вашим сайтом, включая эффективность поиска, проблемы на сайте и удобство работы пользователей.

PageSpeed ​​Insights — еще один бесплатный инструмент от Google, PageSpeed ​​Insights анализирует содержание вашего веб-сайта или веб-страницы и предоставляет предложения по повышению производительности на мобильных устройствах и настольных компьютерах.

Инструменты разработчика в Chrome — встроенные непосредственно в браузер, вы можете видеть различные элементы веб-страницы для более тщательного анализа ее производительности. Самый быстрый способ получить доступ — через элемент Inspect при щелчке правой кнопкой мыши. Раздел «Время» на панели «Производительность» в Chrome DevTools включает маркер LCP и показывает, какой элемент связан с LCP, при наведении курсора на поле «Связанный узел». В разделе «Опыт» отображается оценка CLS с выделенными затронутыми элементами, чтобы вы могли увидеть, где находятся ваши проблемные области.

GTMetrix — бесплатный сервис с опцией премиум-класса для анализа производительности вашего сайта, который позволяет вам использовать несколько инструментов для создания общего представления о том, какие элементы вызывают проблемы с загрузкой, в виде каскадного отчета.

Упаковать…

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

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

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

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

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

Готовность вашего веб-сайта к будущему

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

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

    Задать вопрос

      Узнать стоимость

      В ближайшее время наш менеджер свяжется с Вами для обсуждения деталей проекта

        Сделать заказ