Как использовать отчет Chrome UX для повышения производительности вашего сайта

Измерение эффективности веб-сайта — непростая задача для владельцев малого бизнеса.

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

Черно-белые, жесткие и быстрые числа. Полученные результаты.

Правда о производительности веб-сайта заключается в многоуровневом исследовании RUM (измерения реальных пользователей) в контексте Интернета в целом.

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

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

Суть дела: состояние Интернета глазами реальных пользователей

Чтобы быть по-настоящему информативным и предоставлять полезные данные, вы должны сбалансировать опыт пользователей на вашем сайте с возможностями пользователей в Интернете.

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

Именно здесь вступает в бой отчет Chrome UX.

Делаем данные о веб-производительности в широком масштабе доступными для широких масс

Отчет Chrome UX, впервые созданный Google в 2017 году, представляет собой общедоступный набор данных реальных измерений пользователей.

Также известный как отчет CrUX, он собирает данные о производительности веб-сайтов для пользователей Chrome с миллионов веб-сайтов.

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

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

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

Пришло время рассмотреть основные веб-жизненные показатели Chrome.

Опыт страницы и пользовательский опыт являются прямым результатом здоровья веб-сайта

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

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

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

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

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

Это были его основные веб-жизненные показатели.

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

Для этого Google сузил оценку пользовательского опыта веб-сайта до трех основных показателей:

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

Основные веб-жизненные показатели основаны на решающей роли взаимодействия со страницей в более обширном пользовательском опыте.

Как Google определяет опыт страницы?

Для своих целей опыт страницы измеряет, как пользователи воспринимают свой опыт взаимодействия с отдельной веб-страницей.

Исходя из этого, они определяют CWV как:

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

При объединении три элемента Core Web Vitals — LCP, FID и CLS — обеспечивают мощное понимание.

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

Этот опыт страницы в конечном итоге определяет их пользовательский опыт в целом при использовании поисковой системы Google.

Через год после первоначального объявления он стал постоянным.

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

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

Алгоритм поиска Google постоянно развивается, и эта задача требует бдительности со стороны профессиональных SEO-операторов.

Сообщается, что когда-то существовало более 200 факторов ранжирования.

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

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

Лучшей практикой является пересмотр факторов ранжирования из года в год.

Разбираем алгоритм поиска Google

Несмотря на то, что на протяжении многих лет его покрывали многочисленные знания, поисковый алгоритм Google имеет прочную основу.

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

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

Алгоритм поиска Google фокусируется на большом количестве факторов, которые постоянно колеблются.

В ответ индустрия SEO постоянно оттачивает ключевые элементы, на которых следует сосредоточиться каждый год.

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

Они могут включать, но не ограничиваться:

Глубокое погружение в основные веб-жизненные показатели

Замечательно понимать роль страницы и взаимодействия с пользователем в формировании показателей, составляющих CWV.

Для тех, кто хочет максимально использовать отчет Chrome UX Report на благо своих компаний, всестороннее понимание имеет решающее значение. Важно понимать роли отдельных элементов CWV.

LCP

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

Метрика LCP определяет это количественно, оценивая количество времени, которое требуется для загрузки самого большого фрагмента контента (видео, изображения, текстового блока и т. д.) с момента запроса пользователем URL-адреса.

Google рекомендует веб-сайтам поддерживать LCP менее 2,5 секунд для 75% загрузок их страниц.

FID

Задержка первого ввода измеряет интерактивность страницы.

Точнее, это время между действием и ответом браузера на это действие.

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

Google рекомендует веб-сайтам поддерживать FID менее 100 миллисекунд для 75% загрузок страниц.

CLS

Совокупный сдвиг макета измеряет каждое изменение макета, происходящее на сайте.

Он начинается с нуля (без сдвига) и увеличивается до положительного числа (в зависимости от общего количества смещений).

Факторы, которые приводят к смещению диапазона, от появления кнопок, изображений, которые заставляют перемещаться текстовый блок, и выпадающих рекламных баннеров.

Google рекомендует веб-сайтам стремиться к показателю CLS 0,1 или меньше.

Если свести к центральной доктрине, можно просто утверждать: скорость побеждает.

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

В этом суть показателя SI (индекс скорости): насколько быстро визуально отображается содержимое страницы.

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

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

Восприятие и уникальная взаимосвязь LCP и CLS

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

Для опытных интернет-ветеранов по-настоящему трудные воспоминания связаны с ужасной эпохой коммутируемого доступа.

Те, кто пережил те темные времена, могли слышать звуки интернет-соединения America Online (AOL) во сне.

В Америке происходит постепенное развертывание мобильных сетей 5G и беспроводного интернета 5G.

В результате молниеносная скорость влияет на все аспекты современной жизни; скорость ожидания.

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

Это негативно влияет на их восприятие вашего бренда и часто заставляет их полностью уйти.

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

LCP может показаться пугающим, но это довольно просто.

По сути, он спрашивает: как быстро загружается наиболее значимый контент веб-страницы?

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

LCP подчеркивает важность пользовательского восприятия.

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

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

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

Концентрированные усилия по минимизации LCP позволяют посетителям быстрее просматривать веб-сайт и работать с ним!

И это здорово.

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

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

Здесь событие взаимодействия с пользователем, измеряемое как CLS, дает о себе знать.

Как и в случае с LCP, восприятие пользователем играет центральную роль в важности CLS.

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

Основное внимание здесь уделяется совокупности и степени неожиданного изменения опыта посетителя.

Независимо от того, сколько времени посетитель проводит на странице, он должен ожидать плавного взаимодействия без повторяющихся, раздражающих корректировок.

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

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

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

Эта система включала, помимо многих факторов, окна сеансов, перерывы в сеансах и количество смещений макета.

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

Оптимизация изображений занимает центральное место в стратегиях LCP и CLS

Усилия по оптимизации для LCP и CLS подчеркивают необходимость понимания и реализации оптимизации изображений.

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

Чтобы предоставить веб-сайт с качеством Core Web Vitals, владельцы должны быть целеустремленными в своем подходе.

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

Важность оптимизации изображения для LCP

Оптимизация и сжатие изображений являются особенно важными факторами, влияющими на LCP.

Это особенно актуально для владельцев веб-сайтов, которые не могут настроить время отклика своего сервера.

Оптимизация изображений направлена ​​на использование наиболее эффективных атрибутов изображений.

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

Самый последний и наиболее эффективный формат изображения — Google WebP, который обеспечивает оптимальное сжатие без потерь и с потерями для веб-изображений.

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

Атрибуты ширины и высоты являются критическими факторами в предотвращении кумулятивного смещения макета

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

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

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

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

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

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

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

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

Эта мера применяется к рекламным изображениям и видео, подчеркивая важность резервирования достаточного места для рекламы в CSS.

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

Оптимизация производительности CWV для максимизации отчета CrUX

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

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

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

Чтобы не только выжить в этом мире, но и преуспеть, лидеры должны понимать Core Web Vitals.

Им необходимо понять взаимосвязанные элементы Core Web Vitals и то, как они влияют на производительность.

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

Легко увидеть преимущества того, что отчет CrUX расскажет о передовом опыте и направит его.

Дополнительные ресурсы:

---

Рекомендуемое изображение: Saxarinka/Shutterstock