Для Google пользовательский опыт (UX) является одним из главных приоритетов, именно поэтому в июне 2021 года был запущен кумулятивный сдвиг компоновки Cumulative Layout Shift (CLS), а также два других Core Web Vitals.

Однако, как и некоторые другие аспекты пользовательского опыта, Cumulative Layout Shift мало кто понимает. Именно поэтому сайты часто забиты навязчивой рекламой и баннерами, которые полностью портят впечатление от страницы, но Core Web Vitals призваны изменить эту ситуацию.



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

Хотя изначально вы собирались проверить статью по ее источникам, теперь вы попали в другое, неизвестное место, наполненное предложениями кредитных карт, потому что вместо этого вы нажали на рекламу.

Если вы не очистите свой кэш cookie, вы будете видеть рекламу MasterCard до конца времен. Если бы не этот сдвиг макета, всей этой проблемы можно было бы избежать, и Google с этим согласен.

Что такое кумулятивный сдвиг компоновки (CLS)?

С тех пор, как Google поместил метрику ранжирования в пользовательский опыт, владельцы сайтов задаются вопросом: «Что такое кумулятивный сдвиг макета?» и "»Как я могу использовать его для влияния на рейтинг моего сайта?»

Cumulative Layout Shift - это метрика Core Web Vital, которая суммирует все смещения макета на странице, за исключением тех, которые не вызваны взаимодействием с пользователем, с помощью расчета, зависящего от скорости.

CLS учитывает пропорцию затронутой области просмотра и расстояние перемещения.

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

Когда элементы начинают смещаться по странице, это отталкивает пользователей и затрудняет их маневрирование на сайте. Некоторые сайты настолько перегружены рекламой, что она может сместить ваш курсор в сторону кнопки «Добавить в корзину» или «Купить», что может привести к случайной покупке.

Такой опыт визуально раздражает и производит плохое первое впечатление. Чтобы пользователи не плавали по содержимому вашей страницы, начните отслеживать показатель CLS вашего сайта.

Как рассчитывается кумулятивный сдвиг компоновки (CLS)?

Порог CLS также определяет показатель сдвига макета и ваш фактор ранжирования. Кумулятивный сдвиг макета - это значимая метрика для пользовательского опыта и, следовательно, влияет на ваши SEO-показатели.

Из шести показателей, которые отслеживает Google PageSpeed, CLS составляет 15%, что делает его 3-й по значимости метрикой, основанной на скорости.

CLS суммирует все неожиданные смещения контента, которые происходят на странице. Чтобы пройти оценку Google, пользователям необходим высокий балл CLS.

• Хорошо - ниже 0,1;

• Требует улучшения - от 0,1 до 0,25;

• Poor - выше 0,25.

Числовое значение для CLS отражает серьезность каждого движения. Когда происходит смещение макета, Google подсчитывает, на какое расстояние переместилось содержимое в пределах области просмотра за время жизни страницы.

Каков идеальный пороговый показатель CLS?

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

С помощью кода вы можете добавить на страницу несколько объявлений, баннеров и форм и при этом избежать больших смещений макета.

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

Помните, что сдвиги макета регистрируются только в том случае, если под воздействием какого-либо фактора видимые элементы меняют свое положение на странице. Если добавляются новые элементы объектной модели документа (DOM-элементы) или изменяется размер существующих элементов, оценка CLS не влияет.

Баллы за сдвиг макета определяются двумя измерениями сдвига макета: долей влияния и долей расстояния. Перед определением доли воздействия необходимо рассчитать область воздействия.

Расчет доли влияния

Рассчитайте область воздействия, или пространство, на которое влияют сдвиги макета, получив числовое значение для области воздействия. Затем, чтобы определить долю воздействия, разделите область воздействия на область области просмотра. Область просмотра - это участок страницы, который остается видимым без прокрутки вниз.



Фракция воздействия учитывает только само движение и не учитывает, насколько оно отвлекает. Фракция расстояния вместе с расстоянием перемещения решает эту проблему.

Расчет фракции расстояния

Сначала определите расстояние перемещения, определив, насколько далеко переместились элементы. Затем разделите максимальное расстояние перемещения на общую высоту видового экрана, чтобы определить долю расстояния.



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

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

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

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

Затем сдвиги макета суммируются в рамках окна сессии, что означает, что оценка CLS влияет только на продолжительность сессии.

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

Другие расчеты

В CLS учитывается еще несколько элементов, в том числе:

1. Преднамеренные изменения макета: Окно исключения ввода игнорирует сдвиги, которые происходят в течение полусекунды после ввода пользователем текста.

2. Сдвиги макета и анимации: Google игнорирует изменения трансформации CSS и анимации.

3. Генерирование сдвигов макета: Если сдвиги макета происходят во время загрузки страницы, они могут негативно повлиять на оценку CLS, если они происходят вне окна исключения.

4. Сдвиги макета выше сгиба: Google учитывает изменения только в пределах видимого окна просмотра.

Для точного отслеживания сдвигов и изменений макета используйте инструмент измерения CLS.

Инструменты для измерения CLS

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

Большинство из перечисленных ниже программных решений интерпретируют лабораторные данные, но PageSpeed Insights от Google также измеряет полевые данные. Search Console предлагает простой отчет Core Web Vitals Report.



Лабораторные данные подразумевают сбор данных о производительности в контролируемой среде, но поскольку они основаны на заранее определенных условиях, большинство оценок лабораторных данных не отражают реальный пользовательский опыт на 100%.

С другой стороны, полевые данные основаны на укрупненных данных, которые получаются путем объединения данных индивидуального уровня. Они часто используются для статистического анализа групп людей и для обобщения бизнес-данных. Хотя полевые данные более точны, они не всегда доступны.

Термины «данные реального пользователя» и «полевые данные» - это одно и то же, но jаvascript API - это своя собственная система. Если у вас есть некоторый опыт кодирования, вы можете использовать jаvascript API для поминутного измерения CLS. Задействуйте API Layout Instability, если вы хотите проверить неожиданные сдвиги макета.

PageSpeed Insights и Search Console помогут вам оптимизировать CLS и избежать больших сдвигов макета. Проверки PageSpeed Cumulative Layout Shift Test для отзывчивого веб-дизайна предоставляют более подробную информацию для веб-разработчиков и помогают при внедрении динамического контента.

Идеальный показатель PageSpeed достигается, когда все показатели скорости в среднем составляют 90 или выше. Если вы заметили, что один или несколько показателей имеют оранжевый цвет, сосредоточьтесь на улучшении этих областей.

• Хорошо: 90 или выше (зеленый);

• Требует улучшения: от 50 до 90 (оранжевый);

• Плохо: ниже 50 (красный).

На вкладке "Производительность" пользователи могут увидеть, как именно PageSpeed Insights измеряет визуальную стабильность.

PageSpeed использует Chrome User Experience Report, свое программное обеспечение для статистического анализа, для совместной работы с метриками, которые полезны для измерения визуальной стабильности, поскольку проверяются отзывчивые изображения, соотношение сторон изображения, веб-шрифт, отображение шрифта, начальная загрузка страницы и многое другое.

Все показатели, размещенные на вкладке "Сводка", имеют разный вес: FID, Speed Index и Time to Interactive оцениваются в 10%, CLS - в 15%, LCP - в 25%, а Total Blocking Time - в 30%. Google не учитывает сдвиги, которые происходят в результате взаимодействия с пользователем.

Не забывайте, что показатели зависят друг от друга. Например, если LCP и Total Blocking Time медленные, то время загрузки, скорее всего, будет идти медленными темпами.

Как уменьшить кумулятивный сдвиг макета (CLS)?

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

Несколько факторов способствуют ухудшению показателей CLS, в том числе:

• Добавление видео и изображений без соблюдения размеров;

• Установка рекламы, iframe и встраиваемых элементов без соблюдения размеров;

• Действия, ожидающие загрузки страницы или ответа сети для обновления элементов DOM (динамически внедряемый контент);

• Веб-шрифты, вызывающие вспышку невидимого текста (FOIT) или вспышку нестилизованного текста (FOUT), медленную работу системных шрифтов, загрузку шрифтов или неудачное отображение шрифтов.

CLS играет важную роль на мобильных устройствах. У 77% американцев есть смартфон, и почти 40% всех покупок в электронной коммерции были сделаны с помощью мобильного устройства. Однако планшеты и смартфоны являются наиболее сложными устройствами для оптимизации.

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

Вам необходимо обеспечить уменьшение атрибутов видео и изображений в зависимости от размера области просмотра.

1. Атрибуты ширины и высоты изображения.

Если вы не укажете атрибуты ширины и высоты для вашего сайта, браузер не будет знать, сколько места необходимо для правильного распределения элементов во время загрузки страницы.

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

Включите размеры изображений и видеоэлементов, чтобы создать нужное пространство.

2. Веб-шрифт FOUT/FOIT.

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

Чтобы решить эту проблему, используйте шрифт предварительной загрузки или системный шрифт, встроенный непосредственно в код.

3. Неспецифические размеры объявлений, айфреймов и встраиваемых элементов.

Еще один способ избежать больших смещений макета - указать размеры объявлений, iframe и embeds. Смещение макета происходит, когда в код сайта встраивается неправильное соотношение сторон объявления.

Хотя при использовании медиазапросов вам, возможно, придется учитывать тонкие различия в размерах объявлений/пейсхолдеров и форм-факторах, вы можете зарезервировать место для предотвращения этой проблемы.

4. Анимация и динамический контент.

Действия, которые ждут отклика сети веб-сервера до того, как они заполнятся, также вызывают сдвиги.

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

Чтобы узнать, как решить проблемы со сдвигом макета в WordPress, перейдите к следующему разделу.

Как исправить проблемы кумулятивного сдвига макета в WordPress?

У кодеров есть несколько методов, которые они могут использовать для устранения проблем со сдвигом макета (Cumulative Layout Shift) в WordPress.

Если вы обладаете навыками грамотного кодирования и хотите уменьшить кумулятивный сдвиг макета, обнаруженный на вашем сайте, то этот 10-шаговый процесс поможет устранить специфические для WordPress проблемы CLS.

Шаг 1: Узнайте, какие элементы сдвигаются.

Такие инструменты, как Cumulative Layout Shift Debugger и PageSpeed Insights, могут показать вам, где именно происходят сдвиги. В качестве альтернативы можно использовать Chrome Dev Tools и включить флажок Layout Shift Regions, где смещенные элементы будут выделены синим цветом.

Шаг 2: Отключите асинхронный CSS или используйте критический CSS.

Большинство плагинов кэширования имеют настройку для асинхронной загрузки CSS, но это может вызвать FOUC и сместить ваш веб-шрифт. Вы можете отключить доставку CSS в настройках вашего плагина.

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

Шаг 3: Хостинг предварительно загруженных локальных шрифтов.

Предварительно загруженные шрифты не позволяют проводить оптимизацию. Чаще всего эти веб-шрифты загружаются очень долго и используют запасной шрифт, прежде чем отобразятся. Всегда размещайте шрифты локально с вашего сайта, используя такие инструменты, как Transfonter или плагин OMGF, чтобы вставлять URL-адреса шрифтов напрямую.

Шаг 4: Добавить отображение шрифта: Переход к шрифтам.

Конкретные веб-шрифты могут по-прежнему загружаться медленно в зависимости от их размера, но добавление font-display:swap в CSS вашего шрифта гарантирует, что ваш макет не будет смещаться из-за FOIT.

Чтобы сохранить активное отображение шрифта, установите String Locator для поиска проблемного шрифта, а затем добавьте &display=swap в код.

Добавьте Font-Display: Swap в раздел Fonts.

Шаг 5: Установите глобальный шрифт на Mulish в Oxygen Builder.

Если вы используете Oxygen Builder, вы можете решить проблемы с CLS, открыв таблицу стилей и добавив 'Mulish' в середине тела текста следующим образом: body { font-family: 'Mulish', Arial; }

Шаг 6: Укажите размеры изображений, видео и фреймов.

Просто вставьте width="000" height="000" после обозначения изображения в коде или width="000" height="000 > после видео или iframe, чтобы обеспечить достаточное пространство для вашего медиа.

Шаг 7: Используйте свойство CSS Transform для анимации.

Анимация может привести к резкому изменению макета, и учет соотношения сторон может не решить вашу проблему. Добавьте свойство CSS transform transform:translate() вместо использования width + height.

Шаг 8: Оставьте место для рекламы и подавайте ее должным образом.

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

Google советует создателям оставлять место для рекламы самого большого размера, настроенной на подачу именно таким образом:



Шаг 9: Установите легкий плагин GDPR.

Программное обеспечение GDPR Cookie Compliance удобно для сайтов, которые хотят оставаться совместимыми с CCPA, но они часто вызывают проблемы с кумулятивным сдвигом макета.

Тяжелые плагины GDPR могут нагромождать элементы друг на друга при загрузке, поэтому для решения этой проблемы используйте легкий GDPR/CCPA.

Шаг 10: Жесткий код заголовков и меню.

Ваши заголовки и меню могут привести к смещению макета вашего сайта. Жесткое кодирование этих аспектов в CSS создаст меньше проблем для веб-страниц. Большинство конструкторов страниц также вызывают смещение заголовков и меню, но Elementor и Divi добавляют элементы жесткого кодирования для пользователей.

В заключение несколько слов про кумулятивный сдвиг макета

Cumulative Layout Shift (CLS) - это один из трех основных показателей Web Vitals, созданных Google для того, чтобы поставить пользовательский опыт на первое место для владельцев сайтов. Хотя к CLS и другим жизненно важным показателям может потребоваться некоторое привыкание, CLS может улучшить производительность сайта и общее время загрузки.

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

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

Еще советуем:

• Редиректы: что это такое, виды, как и когда использовать
• Что такое SEPA: как работает система банковских переводов
• Как бесплатно отследить позиции сайта в Google на Wordpress
• Когда делать посты в Фейсбуке, Инстаграм и Твиттере
• Маркетинг в социальных сетях