Tabla de contenidos
Невозможно сделать так, чтобы Google был полностью доволен. Я давно отказался от него, хотя есть проблемы, которые нужно исправить, такие как CLS (Кумулятивный сдвиг раскладки).
Кумулятивный сдвиг компоновки
Кумулятивный сдвиг раскладки — это кумулятивное изменение раскладки. Эта метрика важна, поскольку она анализирует визуальная стабильность и частота, с которой посетители сталкиваются с неожиданными изменениями макета
В двух словах, это измерение любого смещения элементов в верхней части страницы во время загрузки.
Достижение низкого CLS помогает обеспечить приятный для глаз вид страницы и предотвратить раздражающие движения, которые могут привести к тому, что читатель потеряет из вида и/или положения важные элементы навигации.
Считается хорошим пользовательским опытом, если CLS не превышает 0,1, до 0,25 он должен улучшиться, а дальше считается плохой оценкой. Это, как Вы, наверное, знаете, может быть измерено несколькими способами. Наиболее часто используемым является PageSpeed Insights.
Как отмечается в документации по Показатели Core Webдокументация, плохой CLS может быть вызван различными элементами, такими как изображение или видео с неизвестными размерами, шрифт, который отображается больше или меньше, чем его альтернатива, или сторонняя реклама или виджет, который динамически изменяет размер
Парадоксально, но некоторые из элементов, которые обычно расчесывают CLS, — это реклама Google Adsense. Особенно если Вы используете автоматические объявления (не рекомендуется). Бывают случаи, когда они даже полностью разрушают скорость загрузки.
Как обнаружить прокрутку
Теперь, когда мы пытаемся решить проблему Adsense, мы можем взглянуть на остальные элементы, которые могут быть причиной ожирения CLS. Существуют различные способы сделать это, вот несколько из них.
Взгляд на
Самый деревенский метод — это простое наблюдение, на глаз. Если движение заметно, Вы увидите его сразу, но есть менее заметные движения, которые требуют более тщательного осмотра.
В Search Console
В GSC, в разделе «Top web metrics», Вы можете получить список URL-адресов с проблемами CLS и LCP, чтобы рассмотреть их по очереди.
С помощью расширения для браузера
Вы можете установить расширение для Chrome CLS Checker — Путешествие дальше и проверьте все те URL, s которых много знаков препинания. Кроме того, расширение дает подсказки в виде красных меток и показывает Вам список элементов и CLS, которые они потребляют. Нажатие на «Toogle» выделяет соответствующий элемент. В моем случае, поскольку проблема с объявлениями Adsense уже была исправлена, появляется только одно.
Видео
После проведения теста на webpagetest.org вы можете посмотреть видеоролики, которые он генерирует.
Приостановка видеозаписи облегчает поиск небольших смещений.
Он также генерирует анимированный gif, как здесь. Если Вы посмотрите внимательно, то и пункты меню, и заголовок, и текст немного прокручиваются из-за того, что кажется изменением размера и/или расположения шрифта, но рекламное пространство над заголовком уже зарезервировано, поэтому оно не прокручивается вниз.
Но это уже другая тема, а сейчас давайте разберемся с поведением объявлений.
Решения для резервирования мест в рекламных блоках
В поисках лучшего и быстрого решения я обнаружил, что добавление минимального значения высоты в обертку (div) вокруг каждого из рекламных блоков для резервирования этого пространства и предотвращения прокрутки после загрузки — это то, что нужно
Однако, кажется, что недостаточно просто использовать класс для указания на это свойство CSS, но также необходимо использовать ID для обертки. Похоже, что по какой-то неизвестной причине Google AdSense JavaScript удаляет директивы минимальной высоты из любого родительского объекта. Однако они не удаляются, если ID используется для таргетинга CSS.
Это объясняется здесь обобщенный и несколько более подробный в документации Google. Поскольку это решение казалось мучительным, так как мне приходилось проверять все блоки, я продолжал искать альтернативу, пока не нашел то, что мне подходит Вставка объявлений. Это были шаги.
Изменение адаптивных объявлений на фиксированный размер
Первое, что нужно было сделать, это перестать использовать адаптивные рекламные блоки. Я изменил все блоки на фиксированные размеры
Это решение Вы должны изучить и оценить Ваш конкретный случай.
Хотя Google утверждает, что адаптивные приносят больший доход (очевидно, из-за возможности показывать разные размеры), этот показатель достаточно эластичен и может меняться в зависимости от различных сценариев. Если Вы выберете самые популярные размеры, Вы всегда будете показывать рекламу.
Отключить оптимизацию размеров
Хотя блоки и так должны иметь фиксированный размер, лучше всего отключить опцию, которая позволяет Google самостоятельно определять размер мобильных объявлений. Эту опцию можно найти в администрации Adsense в разделе Ads/Global Settings.
Таким образом, мы избежим неожиданностей, если пропустим объявление, которое мы разместили вручную. В любом случае, то, что они имеют фиксированный размер, не означает, что они больше не реагируют на изменения.
Резервирование места для объявлений с помощью Ad Inserter
Ad Inserter — это, на мой взгляд, лучший плагин для управления объявлениями, который можно использовать даже для добавления другого контента
Чтобы зарезервировать место для каждого объявления, просто перейдите в раздел «Display» и определите ширину и высоту каждого блока.
Если Вы используете su pRO версиявы также можете проверить Ленивую нагрузку, которая также имеет тенденцию помогать облегчить CLS немного больше.
И пока Вы здесь, Вы можете убедиться, что у Вас нет недостающих размеров в изображениях, это также можно исправить несколькими способами. Некоторые быстрые и простые варианты — использовать Perfmatters o WP Rocket (оба за отдельную плату).
Или плагин Litespeed Cache если Вы размещаете свой блог на сервере Litespeed.
Если все пройдет хорошо, то через несколько часов Вы увидите снижение CLS в полевых отчетах, а через несколько дней — в лабораторных отчетах PageSpeed Insights.
