Google Web Performance Advocate уточняет измерение совокупного смещения макета (CLS), помогая веб-разработчикам оптимизировать основные веб-показатели.
- Поклонник веб-производительности Google, Барри Поллард, дает подробные объяснения CLS.
- Это уточнение имеет значение, поскольку CLS является основным жизненно важным для Интернета.
- Понимание расчетов CLS помогает разработчикам оптимизировать веб-сайты для лучшего пользования.
Поклонник разработчиков веб-производительности Google, Барри Поллард, объяснил, как измеряется совокупное смещение макета (CLS).
CLS количественно определяет, насколько неожиданное изменение макета происходит, когда человек просматривает ваш сайт.
Этот показатель важен для поисковой оптимизации, поскольку он является одним из основных веб-показателей Google. Страницы с низкими показателями CLS обеспечивают более стабильную работу, потенциально способствуя лучшей видимости поиска.
Как это измеряется? Поллард обратился к этому вопросу в теме на X.< /p>
Что такое CLS измеряется для основных веб-показателей? Почему 0,1 считается плохим, а 0,25 — плохим, и что означают эти цифры?
За последние 24 часа я имел 3 отдельные разговора на эту тему с разными людьми, поэтому решил, что пора еще раз углубить тему, чтобы объяснить ~
🧵 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 или электронной почтой). Измерение всех сдвигов означало, что за достаточное время даже самые лучшие страницы выйдут из строя!~~~~~~~~~~~~~~~ :
“Поскольку каждый элемент может смещаться только во время рисования кадра, и мы имеем 5-секундное ограничение, и большинство устройств работают со скоростью 60 кадров/с, это дает теоретическое ограничение для CLS 5 секунд * 60 кадров в секунду * 1,0 максимальный сдвиг = 300.
Интерпретация результатов CLS
Поллард обратился к тому, как интерпретировать результаты CLS:
<цитата>
“… это помогает думать о CLS как о проценте движения. Хороший порог 0,1 означает, что страница перемещена на 10%. Это может означать, что вся страница перемещена на 10%, или половина страницы перемещена на 20%, или многие небольшие движения были эквивалентны любому из этих случаев. ”
О конкретных пороговых значениях Поллард объяснил:
“То почему 0,1 ‘хорошо’ и 0,25 “плохо” ? Это объяснено здесь как комбинация того, чего мы хотели бы (CLS = 0!) и того, что достижимо &help; 0,05 на самом деле было достижимо по среднему значению, но для многих сайтов это было бы не’, поэтому было немного выше.
См. также: Как можно измерить основные веб-показатели
Почему это важно
Информация Полларда предоставляет веб-разработчикам и специалистам по SEO более четкое понимание измерения и оптимизации для CLS.
При работе с CLS помните о следующем:
- CLS является безразмерным и рассчитывается с частиц удара и расстояния.
- Это совместное, измерение сдвигов в течение 5-секундного окна.
- “хорошо” пороговое значение 0,1 примерно равно 10% движения окна просмотра.
- Оценки CLS могут превышать 1,0 из-за суммирования нескольких изменений.
- Пороговые значения (0,1 для “хорошо”, 0,25 для “плохо”) балансируют между идеальной производительностью и достижимыми целями.
Благодаря этой информации вы можете вносить изменения, чтобы достичь порога Google’.