Важнейшие измерения пользовательского опыта от Google, влияющие на рейтинг страниц для веб-сайтов.
Есть много способов оптимизировать работу пользователей с веб-сайтами. Но знание самого лучшего и оптимального метода с самого начала может значительно сэкономить время и деньги.
Google представил Web Vitals для измерения пользовательского опыта веб-сайтов и использования этих показателей как части своего алгоритма ранжирования. Чтобы лучше понять, давайте посмотрим, что это за важные.
Core Web Vitals и Web Vitals
Вам не нужно быть экспертом в какой-либо области, чтобы понять Web Vitals. Это простые вещи, такие как удобство для мобильных устройств, безопасность просмотра, HTTPS, интерактивность, визуальная стабильность, время загрузки и т. Д.
Google выделил три основных показателя из этих показателей в Интернете как основные показатели в Интернете, общие для всех типов веб-сайтов.
- Самая большая Contentful Paint (производительность загрузки)
- Задержка первого входа (интерактивность)
- Накопительный сдвиг макета (визуальная стабильность)
Давайте подробнее рассмотрим Core Vitals.
LCP - Самая большая содержательная краска (производительность при загрузке)
LCP измеряет скорость загрузки веб-страницы с точки зрения реального пользователя. Это промежуток времени между первой точкой загрузки страницы и точкой, в которой отображается самый большой контент области просмотра.
Другими словами, LCP измеряет продолжительность визуализации видимой области на вашей веб-странице.
Давайте сравним LCP средней статьи с изображениями и без них.
Для статьи с изображением потребовалось 3,57 секунды, а для статьи без изображения - всего 2,32 секунды.
Google настаивает на том, чтобы все разработчики и владельцы продуктов регулярно измеряли эти Core Web Vitals своих приложений, и предоставили инструменты для помощи в этих измерениях.
FID - задержка первого входа (интерактивность)
FID относится к интерактивности между пользователем и веб-страницей. Он измеряет продолжительность времени, начиная с первого взаимодействия с пользователем до момента, когда браузер реагирует на это действие. Этим пользовательским взаимодействием может быть нажатие кнопки, щелчка ссылки или любого настраиваемого элемента управления на основе JavaScript.
Согласно тестам Google, оптимальная продолжительность интерактивности должна быть ниже 100 мс, тогда как все, что выше 300 мс, считается плохим.
Можно утверждать, что эти временные промежутки крошечные и не имеют значения, изменяя несколько сотен миллисекунд. Но на самом деле эти небольшие изменения могут существенно повлиять на конечных пользователей.
CLS - кумулятивное смещение макета (визуальная стабильность)
Иногда вы могли замечать движения элементов на веб-страницах при их загрузке, и я уверен, что это не лучший пользовательский опыт, который вы ищете. CLS пригодится в таких сценариях для измерения производительности веб-страниц.
CLS показывает, сколько раз компоненты перемещались туда и сюда во время загрузки страницы. Как вы все понимаете, CLS должен быть минимальным, чтобы обеспечить хорошее взаимодействие с пользователем.
На следующем изображении показано различие в CLS между medium.com и сайтом, которое визуально нестабильно.
В приведенном выше примере средний.com показал CLS 0,097.
Означает ли это, что главная страница medium.com при загрузке сместилась в 0,097 раза? → НЕТ !!!
Это значение рассчитывается с учетом размера области просмотра и перемещения нестабильных элементов в области просмотра между двумя визуализированными кадрами.
Оценка сдвига макета = доля удара * доля расстояния
Значения CLS (оценка сдвига макета) можно легко рассчитать, используя приведенное выше уравнение. Доля удара в этом уравнении относится к воздействию нестабильных элементов на окно просмотра, а доля расстояния относится к расстоянию, на которое перемещаются нестабильные элементы.
Например, предположим, что нестабильный элемент занимает 40% от общего размера области просмотра и перемещается на 20% вниз при загрузке страницы. В этом случае доля удара будет 0,6, поскольку нестабильный элемент занимает 60% всего окна просмотра. Доля расстояния составит 0,2, поскольку нестабильный элемент сместился вниз на 20%.
Итак, окончательная оценка сдвига макета = 0,6 * 0,2 = 0,12.
Совет: Делитесь своими повторно используемыми компонентами между проектами с помощью Bit (Github).
Bit упрощает совместное использование, документирование и повторное использование независимых компонентов в проектах . Используйте его, чтобы максимально увеличить повторное использование кода, сохранить единообразный дизайн, сотрудничать в команде, ускорить доставку и создавать масштабируемые приложения.
Bit поддерживает Node, TypeScript, React, Vue, Angular и другие.
Думаю, теперь вы хорошо понимаете Core Web Vitals и их обязанности. Итак, теперь пора научиться их измерять.
Измерять жизненно важные показатели в Интернете намного проще, чем вы думаете
Как я уже упоминал ранее, измерение Web Vitals - простой процесс, и это может сделать каждый. Фактически, есть много инструментов, которые вы можете использовать для измерения Web Vitals, включая расширения браузера.
Lighthouse, Chrome DevTools, PageSpeed Insights, Chrome UX Report и Web Vitals Extension возглавляют список.
Хотя эти инструменты служат той же цели, их можно разделить на 2 группы: инструменты лабораторного тестирования и инструменты полевого тестирования.
Инструменты лабораторного тестирования
Основная цель лабораторных инструментов - тестирование производительности одновременно с процессом разработки для обеспечения необходимых тестов перед выпуском. Chrome DevTools и Lighthouse можно использовать для измерения Core Web Vitals в средах разработки.
Но эти лабораторные инструменты не могут измерять FID, поскольку нет конечных пользователей, которые могли бы рассчитывать взаимодействия. Вместо этого в этих инструментах используется эквивалентное измерение под названием Общее время блокировки (TBT).
На изображении ниже показан результат теста производительности веб-страницы с использованием Lighthouse:
Инструменты для полевых испытаний
Результаты лабораторного тестирования не могут быть точными на 100%, поскольку реальные пользователи не взаимодействуют с веб-страницами. Чтобы заполнить эту лазейку, можно использовать инструменты полевых испытаний. Кроме того, в отличие от инструментов лабораторного тестирования, инструменты полевого тестирования могут измерять все 3 Core Web Vitals как есть.
PageSpeed Insights, Chrome UX Report и Web Vitals Extension - это некоторые инструменты полевого тестирования, которые мы можем использовать для измерения Core Web Vitals при взаимодействии реальных пользователей. Эти инструменты полевого тестирования анонимно собирают данные с веб-страниц в режиме реального времени, что позволяет нам проверять Vitals, не запуская ничего вручную.
Предположим, вы измерили основные параметры своего веб-сайта, и результаты не столь обнадеживающие, как вы ожидали. Итак, что вы можете сделать, чтобы улучшить эти результаты?
Шаги по улучшению Web Vitals
Поскольку вы теперь знаете, как измерять Web Vitals, давайте посмотрим, как вы можете улучшить свой веб-сайт, если есть пробелы.
Как вы все знаете, технические решения проблем, связанных с производительностью, не так просты. В большинстве случаев они сложны и требуют много времени. Однако есть общие рекомендации, которым вы можете следовать, чтобы улучшить эти Core Web Vitals.
Вы можете улучшить LCP своего веб-сайта:
- Удалите или избегайте использования больших элементов страницы, загрузка которых занимает слишком много времени. Вы можете легко найти эти элементы и их влияние, проанализировав результаты с помощью инструментов измерения, которые мы обсуждали ранее.
- Избегайте ненужных сторонних библиотек JavaScript. Последующий анализ показал, что использование сторонних библиотек заблокировало основной поток на 2700 мс.
- Настроив ленивую загрузку и отсрочку закадровых изображений.
- Уменьшение времени отклика сервера.
Как и в случае с LCP, есть несколько простых вещей, которым вы можете следовать, чтобы улучшить значения FID на своем веб-сайте:
- Использование эффективных политик кеширования для более быстрой загрузки содержимого страницы.
- Подобно LCP, вы можете улучшить значения FID, зафиксировав ненужные библиотеки JavaScript.
- Сведение к минимуму улучшит время загрузки страницы, и пользователи смогут мгновенно взаимодействовать со страницей.
Последним показателем Core Web Vitals является CLS, и вы можете улучшить его, выполнив следующие действия:
- Использование фиксированных размеров для изображений и видео.
- Если на вашем веб-сайте отображается реклама, не забудьте оставить для нее необходимое пространство.
Заключение
Надеюсь, вы поняли важность поддержания хороших показателей Web Vitals для своих веб-сайтов. Эти измерения обеспечивают столь необходимую поддержку, чтобы ваш сайт оставался удобным для пользователей.
Хотя эти измерения очень многообещающие, могут быть сценарии, в которых вам нужно импровизировать и выйти за рамки этих измерений, чтобы обеспечить необходимый пользовательский опыт. Поэтому следите за ними.
Спасибо за чтение!!!
