Понимание кумулятивного смещения макета и его оптимизация

Оптимизация веб-сайтов для поисковых систем все чаще становится неотъемлемой частью маркетинговой стратегии людей. Значение SEO многократно возросло, и все больше и больше фирм понимают его последствия. Теперь каждый бренд хочет появиться на первой странице поиска Google. С этим растущим стремлением к SEO конкуренция также многократно возрастает. Много времени и усилий уходит на понимание того, как работает ранжирование, а затем на разработку способов улучшения параметров ранжирования для вашего сайта.

С другой стороны, поисковые системы, такие как Google, действительно достаточно умны, чтобы понимать, что независимо от того, насколько сильны их алгоритмы, маркетологи найдут способ обмануть их. На протяжении всей истории это была закономерность. Google ввел ключевые слова в качестве фактора ранжирования, и пользователи начали наполнять свой контент ключевыми словами. Когда были введены обратные ссылки, пользователи прибегли к черному SEO, чтобы получить тысячи обратных ссылок на свои сайты. Затем Google пришлось настроить качество, а не количество.

В последнем обновлении своих SEO-параметров Google добавил Core Web Vitals в качестве основных показателей рейтинга страницы сайта. Эти параметры измеряют пользовательский опыт веб-сайта. С усилением конкуренции в области SEO Google понял, что качество результатов его поисковой системы снижается. Сегодня пользователи хотят, чтобы контент был максимально релевантен их поисковому запросу, причем в удобной для просмотра и потребления форме. Это стало основой для Core Web Vitals.

Что такое Core Web Vitals:

Основные веб-жизненные показатели составляют более важный набор параметров веб-жизненных показателей, перечисленных Google. В настоящее время общие параметры Web Vitals составляют:

• Основные веб-жизненные показатели:
  • Загрузка Contentful Paint — для количественной оценки процесса загрузки
  • Первая задержка ввода — для измерения скорости взаимодействия
  • Совокупный сдвиг макета — для измерения визуальной стабильности
• Другие веб-жизненные показатели:
  • Мобильный дружественный
  • Безопасный просмотр
  • HTTP
  • Нет навязчивых межстраничных объявлений

Штырь

В то время как другие веб-жизненные показатели больше сосредоточены на таких аспектах, как скорость отклика и безопасность веб-сайта, основные веб-жизненные показатели измеряют взаимодействие с пользователем на веб-сайте. Эти параметры являются новыми для SEO-сообщества, и они быстро поняли, как измеряются эти показатели. Основываясь на их понимании, появилось множество лайфхаков и советов, которые могут помочь пользователям улучшить свои показатели Core Web Vitals.

Расшифровка кумулятивного сдвига макета:

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

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

Штырь

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

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

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

Штырь

Измерение совокупного смещения макета:

CLS рассчитывается очень научным способом. Для понимания процесса нам необходимо знать следующие термины:

• Область просмотра : видимый экран пользователя, на котором пользователь может просматривать веб-страницу и взаимодействовать с ней.
• Визуализированные кадры: так же, как видео состоит из 24 кадров в секунду, веб-сайт состоит из нескольких кадров, скорость которых зависит от параметров загрузки веб-сайта.
• Impact Fraction: это метрика, которая вычисляет влияние нестабильного элемента контента на область просмотра между двумя последовательными кадрами. На изображении ниже показано, как фрагмент контента занимает 50% области просмотра, а затем смещается вниз на 25%. Следовательно, его доля воздействия на область просмотра будет равна 0,75 (50% + 25%).

Штырь

• Distance Fraction: эта метрика показывает, на какое расстояние сместились нестабильные элементы контента относительно окна просмотра. Это может быть горизонтальное или вертикальное направление или даже то и другое. Однако наибольший размер области просмотра считается базовым. На изображении ниже элемент контента сместился на 25% вниз после рендеринга, в результате чего доля расстояния составила 0,25.

Штырь

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

CLS = Доля удара * Доля расстояния

В приведенном выше примере показатель CLS будет равен (0,75*0,25) 0,1875.

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

Штырь

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

• Полевые инструменты:
  • Отчет о пользовательском опыте Chrome
  • Статистика PageSpeed
  • Search Console (отчет Core Web Vitals)
  • JavaScript-библиотека
• Лабораторные инструменты:
  • Инструменты разработчика Chrome
  • Маяк
  • Веб-страницаТест

Как оптимизировать совокупное смещение макета для вашего сайта:

1. Бережное обращение с изображениями:

Штырь

Стандартный способ использования изображений на веб-сайте — определение их высоты и ширины. Некоторые разработчики имеют привычку работать на основе %. Если они хотят использовать изображение в половину его размера, то им будет удобно указать 50% в атрибутах изображения. Но это не даст браузеру важной информации о том, сколько частей области просмотра займет изображение. Поэтому важно упомянуть соотношение сторон. Это будет держать браузер в курсе, и, таким образом, он будет выделять необходимый слот для изображения при отображении веб-страницы. Этот установленный слот не будет мешать другому предварительно загруженному контенту и, таким образом, поможет вам улучшить свой балл CLS.

2. Показать рекламу:

Штырь

Самый большой виновник плохих оценок CLS — реклама на веб-сайтах. Хотя в идеальном мире ни один веб-сайт не захочет размещать рекламу, потому что она всегда имеет тенденцию наносить ущерб пользовательскому опыту. Но это было бы огромным ударом по экономике веб-сайтов, основанной на рекламе. Кроме того, поскольку объявления являются динамическими, они, как правило, занимают разные доли области просмотра при каждой загрузке. Следующие пункты могут помочь вам уменьшить влияние рекламы на показатель CLS:

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

3. iFrame и встроенный контент:

Штырь

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

• Заранее установите макет iFrame и используйте статические коды, чтобы зафиксировать размер слота для iFrame.
• Не используйте бесконечную загрузку или элементы прокрутки, так как они очень динамичны; вместо этого используйте кнопку «Подробнее».
• Избегайте ярких призывов к действию, которые либо всплывают на экране, либо нарушают существующий макет.

4. Использование веб-шрифтов:

Штырь

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

5. Добавление анимации или переходов к веб-элементам:

Штырь

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

6. Не придерживаться вайрфреймов:

Штырь

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

7. Лучшее время отклика сервера:

Штырь

Оценка CLS зависит от способа отображения веб-сайта. На это может повлиять время отклика сервера. Если ваш веб-сайт размещен на очень медленном сервере, то загрузка каждой части контента, особенно изображений и видео, займет больше времени. Как разработчик, вы должны следить за параметром Time To First Byte сервера и пытаться оптимизировать его с помощью следующих хаков:

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

8. Оптимизируйте изображения, CSS и Java-скрипты:

Штырь

Одним из наиболее распространенных советов по улучшению показателей SEO является оптимизация контента веб-сайта. Эта оптимизация также оказывает положительное влияние на оценку CLS. Изображения никогда не должны использоваться на веб-сайте без их оптимизации. Существует много хороших сторонних инструментов, таких как Tiny PNG или Bulk Resize, которые могут помочь вам уменьшить их размер без особого влияния на качество изображения. Точно так же вам следует оптимизировать сценарии CSS и Java, используемые для веб-сайта, поскольку они мало влияют на улучшение оценки CLS.

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