Scalenut становится лидером G2 Fall 2022 в категории «Создание контента»

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

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

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

Core Web Vitals — это показатели скорости, которые являются частью сигналов Google Page Experience и используются для оценки взаимодействия с пользователем. Метрики оценивают визуальную нагрузку с помощью параметра «Наибольшая содержательная отрисовка» (LCP), визуальную стабильность с использованием совокупного смещения макета (CLS) и интерактивность с использованием задержки первого ввода (FID).

Core Web Vitals учитывает следующие показатели для улучшения взаимодействия со страницей:

• Скорость загрузки страницы
• Простота взаимодействия
• Визуальная стабильность страницы

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

Почему Core Web Vitals важны?

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

Некоторые распространенные способы улучшить основные веб-жизненные факторы включают в себя:

- Увеличение скорости загрузки LCP за счет оптимизации изображений и уменьшения запросов к серверу.

- Улучшение зрительной стабильности.

- Улучшение интерактивности за счет минимизации задержки первого ввода.

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

Основные показатели Web Vitals

Алгоритм Google рассматривает три основных элемента основных веб-показателей в качестве фактора ранжирования. Это:

• Самая большая содержательная краска (LCP)
• Задержка первого ввода (FID)
• Совокупный сдвиг макета (CLS)

Тем не менее, есть и некоторые дополнительные важные для сети факторы. Это «Время до первого байта (TTFB) и Первая отрисовка содержимого (FCP)». «Общее время блокировки (TBT) и время до взаимодействия (TTI) помогают измерять интерактивность».

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

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

Большие страницы потребуют больше ресурсов от браузера для правильной загрузки и отображения.

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

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

1.1 Что измеряет LCP?

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

Оптимальный LCP для страницы должен составлять 2,5 секунды.

1.2 Как улучшить LCP?

Статистика Page Speed ​​дает правильные рекомендации по оптимизации вашей страницы для LCP. Вот несколько советов по улучшению LCP:

• Оптимизируйте свои изображения: убедитесь, что ваши изображения поставляются в более легких форматах и ​​сжатых изображениях. Включите сжатие на своем веб-сервере, настроив ускорение GZIP.
• Вы можете использовать плагин сжатия изображений, который доставляет изображения в нужных форматах и ​​сжимает изображения.
• Почти все веб-сайты индексируются Google с помощью индексации для мобильных устройств. В результате оптимизация LCP для мобильных устройств важнее, чем для настольных компьютеров. Каждое изображение должно быть уменьшено в соответствии со спецификациями макета.

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

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

• Удалите ресурсы, блокирующие рендеринг: браузер анализирует дерево DOM, когда получает HTML-документ с вашего сервера. Если DOM содержит какие-либо внешние таблицы стилей или JS-файлы, браузер должен остановиться, прежде чем продолжить синтаксический анализ остальной части дерева DOM. Ресурсы, блокирующие рендеринг, — это файлы JS и CSS, которые вызывают задержку времени LCP.

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

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

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

2.1 Что измеряет CLS?

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

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

Владельцы сайтов должны поддерживать CLS на уровне 0,1 или меньше.

2.2 Как улучшить CLS?

Ниже приведены рекомендации по минимизации CLS.

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

Задержка первого ввода (FID)

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

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

3.1 Что измеряет FID?

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

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

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

3.2 Как улучшить FID?

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

• Отложить JavaScript: многие пользователи отключают JavaScript, изменяя настройки своего браузера, чтобы «заблокировать Java». Это влияет на вашу оценку в FID. Если вам нужно заблокировать или отложить скрипты, сделайте это как можно скорее после загрузки страницы в верхней части экрана.
• Удалите некритические сторонние скрипты. Удалите все сторонние скрипты, которые не являются необходимыми для работы вашего сайта. Сюда входят «плагины для социальных сетей», реклама и скрипты Google Analytics. Если сценарий необходим, но его можно отложить, отложите его как можно раньше в процессе загрузки страницы, чтобы пользователям было удобнее. Минимизируйте загрузку изображений и Flash.
• Используйте кеш браузера: это позволяет вашей странице быстрее загружать материалы. Это ускоряет загрузку задач JS в браузере вашего пользователя.

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

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

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

Первая содержательная краска (FCP)

First Contentful Paint (FCP) — это количество времени, которое требуется браузеру пользователя для отображения элементов DOM (изображений, небелых компонентов холста и SVG).

Этот показатель доступен в диапазоне оценок FCP, как указано:

• 0–2 секунды: зеленый (быстро)
• 2–4 секунды: оранжевый (умеренный)
• 4+ секунды: красный (медленно)

Время до интерактивности (TTI)

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

Оценки для Time To Interactive следующие:

• 0–3,8 секунды: зеленый (быстро)
• 3,9–7,3 секунды: оранжевый (умеренный)
• 7,3+ секунды: красный (медленно)

Общее время блокировки (TBT)

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

• 0–300 мс: зеленый (быстро)
• 300–600 мс: оранжевый (умеренный)
• 600+ мс: красный (медленно)

Часто задаваемые вопросы

В. Влияют ли Core Web Vitals на SEO?

Ответ: Да, согласно Google, Core Web Vitals — это сигнал ранжирования. Web.dev от Google предоставляет отличные рекомендации по оптимизации LCP, FID и CLS для повышения удобства пользователей и повышения рейтинга.

В. Является ли Core Web Vitals только для мобильных устройств?

Ответ: Нет, Core Web Vitals одинаково влияет как на настольные, так и на мобильные сайты. Но вы можете получить обновление интерфейса страницы как для ПК, так и для мобильных устройств отдельно.

Вопрос. Когда Google представила Core Web Vitals?

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

В. Как мне проверить наличие веб-сайта в моих основных веб-показателях?

Ответ: Chrome DevTools — это инструмент разработчика, который предустановлен в браузере Chrome. Просто щелкните правой кнопкой мыши и выберите «Проверить», после чего запустится Chrome DevTools. Вы можете найти некоторые показатели Core Web Vitals с помощью панели производительности Chome DevTools. Просто следите за Web Vitals.

В. Влияет ли совокупное изменение макета на SEO?

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

Вывод

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

Вы можете использовать такие инструменты, как GTMetrix или Lighthouse, чтобы абсолютно бесплатно проверить информацию о скорости страницы.