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

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

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

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

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

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

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

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

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

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

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

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

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

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

«Максимальный сдвиг макета — это если 100% области просмотра (доля воздействия = 1,0) перемещается на одну полную область просмотра вниз (доля расстояния = 1,0).

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

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

«CLS — это совокупное изменение макета, и первое слово (совокупное) имеет значение. Мы берем все отдельные смены, происходящие за короткий промежуток времени (максимум 5 секунд), и суммируем их, чтобы получить оценку CLS».

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

«Изначально мы суммировали ВСЕ изменения, но это на самом деле не измеряло UX — особенно для страниц, открытых в течение длительного времени (например, SPA или электронная почта). Измерение всех сдвигов означало, что при наличии достаточного количества времени даже самые лучшие страницы могут выйти из строя!»

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

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

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

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

«…полезно думать о CLS как о проценте движения. Хороший порог 0,1 означает, что страница переместилась на 10 %, что может означать, что вся страница переместилась на 10 %, или половина страницы переместилась на 20 %, или множество небольших движений были эквивалентны любому из этих значений».

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

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

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

ЧИТАТЬ  Как выбрать маскировочную сетку для беседки? -Airbuzz

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

Идеи Полларда дают веб-разработчикам и SEO-специалистам более четкое понимание измерения и оптимизации CLS.

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

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

Обладая этой информацией, вы можете внести коррективы, чтобы достичь порога Google.

Рекомендуемое изображение: Рыбин26/Шаттерсток





Source link