Как удалить CLS на сайте, содержащем рекламу

Question

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

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

Примером может служить эта страница, на которой есть только статический контент:https://www.nookfriends.com/cookie-policy

Когда я запускаю данные по скорости страницы, в нем говорится, что данные поля, которые клиенты видели, CLS равны 0,34, что очень много:https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nookfriends.com%2Fcookie-policy& hl=en_GB

Может ли кто-нибудь помочь выяснить, что вызывает сдвиг и как я могу его уменьшить?

Answer 1

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

Когда я запускаю данные по скорости страницы, в нем говорится, что данные поля, которые клиенты видели, CLS равны 0,34, что очень много: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.nookfriends.com%2Fcookie-policy& hl =en_GB

Осторожный! Данные поля в PSI соответствуют всему происхождению, а не конкретному /cookie-policyстраницу, которую вы тестировали. PSI вернется к данным уровня источника, когда данных уровня страницы недостаточно.

Поскольку вы являетесь владельцем сайта, я бы порекомендовал зайти в отчет Core Web Vitals в Search Console . Этот инструмент поможет вам определить, какие группы страниц имеют проблемы с CWV, и различает посетителей настольных и мобильных устройств. Отсюда вы можете точно сказать, на каких страницах есть проблемы с CLS, и перейти к лабораторным рекомендациям PSI.

Я также предлагаю использовать ваш сайт с установленным расширением Web Vitals , чтобы вы могли видеть в реальном времени, как ваши показатели CWV изменяются в ответ на действия пользователя, такие как прокрутка / щелчок. Это полезно, потому что такие инструменты, как Lighthouse в PSI, не обязательно знают, как вести себя как настоящий пользователь, поэтому им сложно воспроизвести реалистичные значения CWV.