Совокупное изменение макета: улучшите оценку Google CLS

Вы когда-нибудь были в ситуации, когда кнопка оформления заказа исчезала, когда вы пытаетесь оформить заказ?

Да! Это расстраивает.

Правда в том, что это случается слишком часто и со слишком многими из нас.

К счастью, Google, как всегда, ставит пользовательский опыт выше всего остального.

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

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

Их представляют три показателя:

1. Самая большая содержательная краска (LCP)

2. Задержка первого ввода (FIP)

3. Накопительная смена раскладки (CLS)

Давайте разберемся с CLS как с точки зрения пользователя, так и с точки зрения веб-мастера (SEO).

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

Кумулятивное смещение макета (CLS) отражает визуальную стабильность веб-сайта.

Он измеряет количество незначительных сдвигов макета на странице.

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

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

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

Попробуем разобраться в общем значении и простыми словами определим «Накопительный сдвиг макета»:

Кумулятивный – это увеличение количества.

Макет - Рамка

Сдвиг — это смена положения

Проще говоря, Cumulative Layout Shift — это общая сумма всех изменений отдельных кадров в позициях дизайна веб-сайта.

Изображение получено с web.dev

Стандартный балл CLS должен быть ниже 0,1.

Хорошим порогом для измерения является 75-й процентиль загрузки страниц на мобильных и настольных устройствах.

На изображении выше видно, что согласно Google:

1. Если показатель CLS меньше 0,1, это хороший сигнал. Это означает, что у вашего сайта нет проблем с изменением макета.

2. Если показатель CLS находится в диапазоне от 0,1 до 0,25, это означает, что ваш сайт нуждается в определенных улучшениях в визуальном оформлении.

3. Если показатель CLS больше 0,25, это плохой сигнал, что также означает, что движение зрительного элемента происходит очень часто.

Как рассчитывается совокупное смещение макета?

Google вычисляет CLS страницы, вычисляя долю воздействия и долю расстояния для каждого неожиданного изменения макета.

Ударная фракция CLS

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

Формула для расчета доли воздействия для CLS

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

Как рассчитать ударную долю для CLS?

Графическое представление поможет вам лучше понять ударные доли.

 Доля удара = [Область области воздействия] / [Область области просмотра] Доля удара = [330 x 490] / [375 x 667] Доля удара = [161700] / [250125] Доля удара = 0,645

Дистанционная доля CLS

Это мера пространства, на которое элемент страницы переместился из исходной позиции в конечную позицию, которая в основном смещается в макете.

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

Формула для расчета доли расстояния для CLS

Как рассчитать долю расстояния для CLS?

Графическое представление поможет вам лучше понять долю расстояния.

Доля расстояния = [Макс. Расстояние перемещения] / [Высота области просмотра] Доля расстояния = [120] / [667] Доля расстояния = 0,179

Формула для расчета Google CLS Score

Совокупная оценка макета рассчитывается путем умножения доли воздействия на долю расстояния:

 Совокупное смещение макета (CLS) = Доля удара x Доля расстояния

CLS = 0,645 x 0,179 CLS = 0,1154 .

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

Накопительный сдвиг макета на простом примере.

Вы зашли на сайт и увидели что-то интересное для чтения.

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

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

Источник: nitropack.io

Звучит несправедливо, верно?

Это неожиданное изменение макета.

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

У нас также есть нечто, известное как ожидаемое изменение макета.

Это происходит, когда вы нажимаете на что-то на веб-странице, и это меняет текущий макет страницы.

Например, вы заходите в блог в поисках определенной информации.

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

Источник: nitropack.io

Это ожидаемый результат от веб-страницы, и его можно считать ожидаемым изменением макета.

Что вызывает проблемы с CLS?

Согласно поисковому гиганту Google, существует 5 возможных причин кумулятивного смещения макета :

Изображения и видео без размеров

Желательно всегда указывать ширину и высоту ваших изображений и видео.

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

Объявления, вставки и фреймы без размеров

Размеры объявлений могут увеличить доход за счет высокого CTR.

Однако это может поставить под угрозу качество взаимодействия с пользователем из-за смещения контента вниз по странице.

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

Динамически внедряемый контент

Избегайте вставки любого нового контента поверх существующего, если только это не является ответом на действия пользователя.

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

Веб-шрифты, вызывающие FOIT/FOUT

Попробуйте использовать значения font:display с вашими пользовательскими шрифтами, такими как автоматический, подкачка, блочный, резервный и необязательный, чтобы предотвратить ненужные сдвиги макета.

Чтобы быть уверенным в отсутствии смещения макета, используйте font:display вместе со ссылкой rel=preload.

Любой элемент, использующий этот шрифт, будет скрыт до тех пор, пока ресурс шрифта не будет загружен полностью, что называется FOIT (Flash невидимого текста).

Источник анимации: malthemilthers.com

Отображение запасного шрифта в стеке шрифтов до загрузки пользовательского называется FOUT (Flash of unstyled text).

Действия, ожидающие ответа сети перед обновлением DOM

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

Как реклама влияет на оценку Google CLS?

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

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

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

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

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

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

Как CLS может скользить во время веб-разработки?

Google CLS может проскочить стадию разработки.

Вот что может случиться.

Многие ресурсы, необходимые для отображения веб-страницы, загружаются в кеш браузера.

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

Поэтому рекомендуется проводить измерения в полевых условиях или в лаборатории.

Совокупный тест смещения макета

Совокупные показатели веб-сайта Layout Shift Performance можно измерить любым из следующих способов:

Полевые инструменты

В поле: о реальных пользователях, реально взаимодействующих со страницей. Его можно измерить с помощью следующих полевых инструментов:

Отчет о пользовательском опыте Chrome

Он предоставляет метрики взаимодействия с пользователем, показывающие, как реальные пользователи Chrome взаимодействуют с популярными направлениями в Интернете.

Статистика PageSpeed

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

Search Console (отчет Core Web Vitals)

Search Console показывает эффективность ваших страниц на основе реальных данных об использовании (иногда называемых полевыми данными).

Лабораторные инструменты

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

Инструменты разработчика Chrome

Chrome DevTools может помочь вам редактировать страницы на лету и быстро диагностировать проблемы, что в конечном итоге позволит вам быстрее создавать более качественные веб-сайты.

Маяк

LightHouse — это автоматизированный инструмент с открытым исходным кодом для улучшения качества веб-страниц.

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

У него есть аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.

Веб-страницаТест

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

Согласно web.dev ; Предупреждение. Лабораторные инструменты обычно загружают страницы в синтетической среде и измеряют сдвиги макета только во время загрузки страницы.

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

Быстрые инструменты для проверки совокупного смещения макета

1. CLS в формате GIF от Defaced Tool Криса Джонсона для идентификации проблемного LS.

2. Калькулятор совокупного смещения макета

Ошибка в расчетах CLS

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

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

Сессионные окна для измерения CLS

Google выбрал подход окна сеанса для измерения CLS.

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

Суммарные баллы для каждого окна сеанса — это кумулятивный сдвиг макета, общий сдвиг всей страницы.

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

Обновление делает результаты CLS более точными

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

Показатели Core Web Vitals вот-вот станут фактором ранжирования в мае 2021 года, поэтому важно внести важные изменения в последнюю минуту.

Вывод

Понимание кумулятивного смещения макета (CLS) поможет вам улучшить взаимодействие с пользователем в ближайшие дни.

Поскольку эта метрика является частью Core Web Vitals для улучшения UX и должна стать сигналом ранжирования в 2021 году, важно понимать ее важность и влияние на ваш сайт.