Google объясняет, как измеряется совокупный сдвиг макета (CLS)

Как опытный веб-мастер с более чем двадцатилетним опытом работы за плечами, я могу с уверенностью сказать, что понимание Cumulative Layout Shift (CLS) изменило правила игры в моем пути в области SEO и веб-разработки. Разъяснения Барри Полларда о том, как измеряется CLS, предоставили ценную информацию об улучшении пользовательского опыта и видимости в поиске.

Барри Поллард, эксперт по веб-производительности Google, объяснил метод, используемый для расчета совокупного сдвига макета (CLS).

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

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

Как это измеряется? Поллард затронул этот вопрос в теме на X.

Что касается основных веб-показателей, совокупное смещение макета (CLS) измеряется как максимальное смещение, которое происходит в течение всего процесса загрузки веб-страницы. Значение 0,1 или меньше считается средним, но не идеальным. Значение больше 0,25 считается плохим и указывает на значительную нестабильность макета вашей веб-страницы. Эти цифры отражают величину визуального движения, которое испытывают пользователи при загрузке страницы. Более низкие значения указывают на более стабильное взаимодействие с пользователем и меньшее количество неожиданных сдвигов макета.

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

1/12

— Барри Поллард (@tunetheweb), 10 октября 2024 г.

Понимание измерения CLS

Поллард начал с объяснения природы измерения CLS:

«CLS не имеет единиц измерения, в отличие от LCP и INP, которые измеряются в секундах/миллисекундах».

Далее он уточнил:

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

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

Как объяснил Поллард:

Переместить всю область просмотра в самую нижнюю точку более проблематично, чем переместить вниз только половину ее. Небольшое перемещение всего окна просмотра не так важно, как значительное.

Худший сценарий

Поллард описал наихудший сценарий для одного изменения планировки:

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

Это дает оценку смещению макета 1,0 и, по сути, является худшим типом смещения».

Однако он напоминает нам о накопительной природе CLS:

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

Поллард объяснил причину создания 5-секундного окна измерений:

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

Он также отметил теоретический максимальный балл CLS:

Учитывая, что каждый компонент может двигаться только во время рендеринга кадра, максимальная продолжительность которого составляет 5 секунд, а большинство устройств работают со скоростью 60 кадров в секунду, это подразумевает теоретический предел для CLS (непрерывный сдвиг задержки) в 5 секунд * 60. кадров в секунду * максимальный сдвиг 1,0 равен 300.

Интерпретация результатов CLS

Поллард рассказал, как интерпретировать результаты CLS:

Как опытный веб-мастер, я хотел бы поделиться полезным мнением о накопительном сдвиге макета (CLS). По сути, рассматривайте CLS как меру процента перемещения контента на вашей веб-странице. Порог «хорошего» CLS равен 0,1, что примерно соответствует перемещению страницы примерно на 10%. Однако эта цифра не обязательно означает, что вся страница переместилась на 10%; это также может означать, что половина страницы переместилась на 20 % или к любому из этих процентов добавились многочисленные небольшие корректировки.

Что касается конкретных пороговых значений, Поллард объяснил:

Вот можно перефразировать это предложение: «Почему мы считаем 0,1 «хорошим», а 0,25 — «плохим»? Это потому, что учитывается баланс наших ожиданий (CLS = 0!) и того, что осуществимо. На самом деле в среднем 0,05 было реально достижимо, но для многих мест это не так, поэтому мы стремились немного выше.

См. также: Как измерить основные показатели Интернета

Почему это важно

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

При работе с CLS имейте в виду следующие моменты:

CLS не имеет единиц измерения и рассчитывается на основе долей удара и расстояния.
Он является накопительным и измеряет сдвиги в течение 5-секундного окна.
«Хороший» порог 0,1 примерно соответствует 10% перемещения области просмотра.
Баллы CLS могут превышать 1,0 из-за суммирования нескольких смен.
Пороговые значения (0,1 для «хорошо», 0,25 для «плохо») обеспечивают баланс между идеальной производительностью и достижимыми целями.

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

Смотрите также

2024-10-14 21:08