<стр>Google Web Performance Advocate поясняет измерение совокупного сдвига макета (CLS), помогая веб-разработчикам оптимизировать основные веб-показатели.

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

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

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

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

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

Для Core Web Vitals, что измеряется в CLS? Почему 0,1 считается плохим, а 0,25 – плохим, и что означают эти цифры?

У меня было 3 отдельных разговора на эту тему с разными людьми за последние 24 часа, так что я решил, что пришло время для еще одной темы глубокого погружения, чтобы объяснить…

🧵 1/12 pic.twitter.com/zZoTur6Ad4

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

<п>

Понимание измерений 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 на самом деле было достижимо при медиане, но для многих сайтов это было невозможно, поэтому оно было немного выше.”

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

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

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

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

<ул>

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

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