Что такое Core Web Vitals (и как вы можете их улучшить)?

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

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

Выходит обновление интерфейса Google для настольных компьютеров https://t.co/gQn2cwDkiz

— Барри Шварц (@rustybrick) 22 февраля 2022 г.

Давайте погрузимся!

Каковы 3 основных показателя Web Vitals?

Core Web Vitals — это инициатива Google, призванная помочь издателям и владельцам веб-сайтов оценить качество их взаимодействия с пользователем (UX) и определить, что им нужно улучшить.

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

Самая большая содержательная краска

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

LCP — это одна из нескольких метрик, используемых Google для оценки производительности веб-страницы.

Как правило, страницы с временем LCP менее 2,5 секунд считаются хорошо работающими, а страницы со временем LCP более 4 секунд считаются плохо работающими. Страницы со временем LCP более 10 секунд считаются очень плохими.

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

Совокупный сдвиг макета

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

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

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

Задержка первого входа

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

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

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

Чтобы улучшить показатели FID, разработчикам необходимо сосредоточиться на сокращении времени выполнения JavaScript.

Есть также некоторые дополнительные жизненные силы

• Время до первого байта (TTFB) : Время до первого байта — это количество времени, которое требуется браузеру для получения первого байта данных с сервера. На время, необходимое для этого, могут повлиять несколько факторов, в том числе расстояние между браузером и сервером, размер пакетов данных и скорость соединения.
• Первая отрисовка по содержанию (FCP) : Первая отрисовка по содержанию — это количество времени, которое требуется браузеру для отображения первого контента со страницы. Это содержимое может быть изображением, текстом или другим элементом. Другими словами, это воспринимаемое время загрузки.
• Общее время блокировки (TBT) : общее время блокировки — это количество времени, которое требуется веб-сайту, чтобы перейти от первой отрисовки контента к полностью интерактивному.
• Время до интерактивности (TTI) : Время до интерактивности — это время, необходимое для того, чтобы страница стала полностью интерактивной. Это включает в себя возможность реагировать на пользовательский ввод и загружать новый контент в ответ на взаимодействие с пользователем.

Core Web Vitals находится под общим термином Google Page Experience, который также включает в себя другие аспекты:

• Мобильное удобство: это относится к тому, насколько легко пользователям взаимодействовать с вашим сайтом на мобильных устройствах. Веб-сайт, не оптимизированный для мобильных устройств, может оказаться сложным для использования на маленьком экране и даже может помешать пользователям получить доступ к определенным функциям.
• HTTPS: это относится к тому, использует ли ваш сайт безопасное соединение. Веб-сайты, использующие HTTPS, с меньшей вероятностью перехватят свои данные третьими лицами и поэтому считаются более безопасными.
• Навязчивые межстраничные объявления. Это всплывающие окна или другие формы рекламы, которые могут быть навязчивыми и мешающими, особенно на мобильных устройствах. Их часто бывает трудно закрыть, и они могут помешать пользователям увидеть существующий контент, который они искали.

Влияют ли Core Web Vitals на ранжирование?

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

Обновление интерфейса страницы теперь медленно развертывается для настольных компьютеров. Оно будет завершено к концу марта 2022 года. Узнайте больше об обновлении: https://t.co/FQvMx3Ymaf.

— Google Search Central (@googlesearchc) 22 февраля 2022 г.

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

Так почему же важны Core Web Vitals?

Больше органического трафика

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

Превосходный UX

Пользовательский опыт (UX) является неотъемлемой частью успеха любого веб-сайта. Это то, что определяет, останутся ли пользователи на вашем сайте или разочарованно уйдут.

По данным HubSpot, 93% клиентов уходят, если сайт загружается недостаточно быстро. А Core Web Vitals — это прямое измерение скорости страницы и косвенное измерение UX. Учитывая важность UX, важно убедиться, что весь ваш сайт быстрый и отзывчивый.

Улучшенный коэффициент конверсии

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

Как? Ну, все это связано с пользовательским опытом. Если веб-сайт загружается быстро и эффективно, пользователи с большей вероятностью останутся и исследуют его. Они также с большей вероятностью совершат покупку или предпримут другие желаемые действия. С другой стороны, если веб-сайт медленный и неудобный в использовании, вероятность конверсии пользователей гораздо ниже.

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

Как проверить свои основные веб-показания в Google?

Измерить Core Web Vitals довольно просто.

Во-первых, вы можете начать с Google Search Console:

Консоль поиска Google

Чтобы получить доступ к Core Web Vitals из GSC, войдите в свою панель управления и щелкните здесь:

Вы увидите два отчета, один для мобильных устройств:

Другой для рабочего стола:

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

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

Существует также второй способ измерения Core Web Vitals — с помощью PageSpeed ​​Insights.

Статистика PageSpeed

Разница здесь в том, что вы можете получить доступ к отчету для любого сайта, а не только для тех, к которым у вас есть доступ GSC. Но он не покажет вам, какие URL-адреса во всем домене нуждаются в улучшении. Вам придется идти один за другим, что слишком утомительно. PageSpeed ​​Insights предлагает тот же источник данных, что и Chrome User Experience Report.

PageSpeed ​​Insights в основном используется для более глубокого изучения конкретных URL-адресов, поскольку Google Search Console показывает только более полную картину того, какие страницы необходимо исправить.

Search Console даже направит вас к PageSpeed ​​Insights:

А вот что открывается после входа на сайт:

Полный отчет о том, что не так.

Ниже вы найдете возможности:

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

Далее идет диагностика:

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

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

Вот что вы можете сделать!

Что такое оптимизация Core Web Vitals?

Оптимизация Core Web Vitals полностью зависит от веб-сайта и его конкретных проблем. Тем не менее, давайте рассмотрим некоторые из наиболее распространенныхи исправимые .

Самая большая содержательная краска

Оптимизация изображения

Изображения являются неотъемлемой частью любой веб-страницы, но они также могут быть причиной медленной загрузки. Один из способов исправить это — оптимизировать изображения, чтобы они загружались быстро и эффективно. Одним из форматов, который особенно хорош для изображений веб-страниц, является webp. Изображения Webp обычно меньше по размеру, чем изображения других форматов, поэтому они загружаются быстрее. Другой вариант — использовать формат mp4 для ваших видеоресурсов. Видеофайлы MP4 легче, чем другие форматы видеофайлов, поэтому они быстрее загружаются на веб-страницах.

Плагины для WP:

• Оптимус
• вмиг
• EWWW Оптимизатор изображений

Предварительная загрузка ресурсов

Один из способов повысить производительность сайта — предварительно загрузить ресурсы. Это означает, что HTML-код может указать браузеру начать загрузку определенных ресурсов (таких как изображения или сценарии) до того, как они потребуются. Делая это, браузер может более эффективно использовать свое время и ресурсы, что приводит к более быстрой работе веб-сайта в целом.

Плагины для WP:

• Автооптимизация
• Производительность

Блокировка рендеринга

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

Есть несколько способов исправить блокировку рендеринга.

• Один из них — встраивание небольших файлов JavaScript и CSS. Это означает добавление кода непосредственно в файл HTML, а не ссылки на внешние файлы.
• Другой способ исправить блокировку рендеринга — отложить загрузку файлов JavaScript до тех пор, пока страница не будет отрендерена. Это можно сделать с помощью атрибута async или defer.
• Наконец, еще один способ уменьшить блокировку рендеринга — оптимизировать доставку CSS. Это означает, что для каждой страницы загружается только необходимый CSS.

Плагины для WP:

• Автооптимизация
• WP Ракета
• WP НитроПак

Совокупный сдвиг макета

Место для встраивания, iframe и рекламы

Когда веб-сайт содержит такие ресурсы, как видео, изображения или рекламные объявления, важно выделить для них достаточно места на странице. Это гарантирует, что макет страницы не будет нарушен при загрузке ресурса, и помогает предотвратить так называемое кумулятивное смещение макета (CLS). CLS — это мера того, насколько страница «покачивается» при загрузке контента, и это может сильно отталкивать пользователей. Заранее резервируя место для ресурсов, веб-разработчики могут помочь сократить CLS и создать более удобный и ориентированный на пользователя интерфейс.

Добавляйте размеры к изображениям

Проще говоря, добавление размеров к вашим изображениям помогает с Cumulative Layout Shift (CLS). Убедившись, что ваши изображения имеют правильные размеры ширины и высоты, вы можете избежать их смещения при изменении макета страницы. Это особенно важно для изображений, которые находятся рядом или выше сгиба, так как CLS с большей вероятностью повлияет на них.

Предварительно загрузить шрифты

Даже самый лучший веб-сайт может пострадать от кумулятивного смещения макета (CLS). Это часто происходит, когда веб-шрифты не загружаются должным образом, что приводит к «вспышке нестилизованного текста» (FOUT) или «вспышке невидимого текста» (FOIT). В то время как FOUT обычно считается более разрушительным с эстетической точки зрения, FOIT на самом деле может быть более вредным для пользователя, поскольку может привести к переупорядочению контента на странице. Предварительная загрузка шрифтов помогает избежать как FOUT, так и FOIT, гарантируя загрузку веб-шрифтов до того, как они потребуются. Это не только улучшает визуальную стабильность страницы, но и снижает вероятность смещения содержимого во время загрузки.

Задержка первого входа

Асинхронные задачи

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

Ленивая загрузка

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

Контент на стороне сервера

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

Сторонний код

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

Вывод

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

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

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