В постоянно меняющемся ландшафте SEO тем, кто хочет оставаться заметным и актуальным для своих клиентов и посетителей, постоянно нужно работать над улучшением своего веб-сайта. Это довольно банально, но, как ни странно, правда: то, что вчера было основой поисковой оптимизации, сегодня практически ничего не значит.
Это означает, что владельцы сайтов, которые хотят оставаться на желанной «первой странице в поиске Google», должны идти в ногу со всеми тенденциями ранжирования на 2021 год и должны использовать все оружие в своем цифровом арсенале.
Если вы регулярно следите за последними тенденциями в области SEO, то, вероятно, знаете, что кумулятивный сдвиг макета становится основным фактором ранжирования. Таким образом, вы должны следить за ним и узнавать о нем все, чтобы оптимизировать свой веб-сайт для решения новых задач в 2021 году.
Во-первых, что такое кумулятивный сдвиг макета или CLS? По сути, это показатель, который Google использует для измерения события взаимодействия с пользователем.
С точки зрения непрофессионала, CLS измеряет количество «Эй, я хотел нажать на это! Почему он сдвинулся?»- моменты, которые есть на вашем сайте. Итак, этот основной показатель Web Vitals измеряет, насколько стабильным или нестабильным является ваш контент, путем суммирования оценок сдвигов по сдвигам макета, которые выпадают из 500 мс пользовательского ввода. CLS смотрит на количество видимого содержимого, которое сместилось в области просмотра, а также на расстояние, на которое смещались затронутые элементы.
Излишне говорить, что эти изменения могут действительно отвлекать и отталкивать пользователей. Только представьте себе: вы просто сели, чтобы прочитать статью, а затем из ниоткуда элементы на странице начали сдвигаться, заставляя вас терять свое место и вам приходилось заново искать последнее предложение.
Эти сдвиги наиболее распространены в случае видео, контактных форм, кнопок, изображений, шрифтов и многих других типов контента.
Это довольно распространенная проблема в Интернете и даже для таких важных сайтов, как новостные порталы. Кроме того, это может удерживать пользователей от совершения покупки, если они просто не могут нажиматькнопки «Добавить в корзину» или «Поиск». Минимизация сдвигов является важным фактором для каждого веб-сайта, который хочет продолжать генерировать трафик, поскольку элементы, которые перемещаются непредсказуемо, могут быстро снизить пользовательский рейтинг, даже если CLS не является фактором ранжирования.
В общем, когда у сайта плохая оценка CLS, могут быть проблемы с кодированием, которые могут быть легко решены.
Google выделяет пять основных причин, вызывающих кумулятивные сдвиги макета:
Изображения
Изображения, не имеющие размеров, могут испортить пользовательский опыт вместе с вашим рейтингом. Итак, чтобы этого избежать, убедитесь, что каждое изображение и видео на вашем веб-сайте действительно имеет размеры по ширине и высоте, объявленные в HTML. Когда вам нужно иметь дело с адаптивными изображениями, просто убедитесь, что разные размеры изображений для разных окон просмотра работают с одинаковым соотношением сторон.
Для этого вы можете использовать несколько различных инструментов (AspectRatioCalculator.com), ускоряя процесс и экономя ваше время.
Присмотритесь к рекламе
Некоторым веб-сайтам нужна реклама, поскольку они являются их основным источником дохода. Однако какая польза от рекламы на вашем сайте, если она отпугивает тот же трафик, который, как предполагается, приносит с нее деньги?
Избавиться от CLS, когда дело касается рекламы, может быть немного сложно, но возможно. Отличный способ сделать это - стилизовать элемент, на котором должно показываться объявление.
Допустим, вы настраиваете свой div так, чтобы он имел определенные размеры по ширине и высоте, тогда ваше объявление будет автоматически ограничено указанными размерами.
У вас также есть разные маршруты, когда не хватает инвентаря и ваша реклама не показывается.
Если вы сталкиваетесь с рекламой, которая не показывает указанное объявление, вы можете настроить его так, чтобы альтернативный баннер или что-то другое заполняло пространство (например, изображение-заполнитель).
Кроме того, для некоторых макетов, как вы знаете, те, в которых объявление имеет тенденцию заполнять полную строку в верхней части столбца (либо в левом, либо в правом желобе страницы), и это не будет иметь значения, независимо от того, на компьютере это или на мобильном телефоне. Однако вы должны знать, что это будет сильно зависеть отдизайна. Обязательно протестируйте перед запуском рекламы и посмотрите, есть ли проблемы сдвига страницы.
Работа с динамически вводимым контентом
Лучший способ избежать CLS с динамически вводимым контентом - избегать вставки нового контента поверх уже существующих частей контента, если это не является ответом на взаимодействие с пользователем. Таким образом, смещение макета ожидаемо и не вызовет никаких проблем.
Вы, вероятно, также заметили, что сдвиги макета иногда происходят из-за всплывающих окон пользовательского интерфейса, которые появляются внизу или вверху области просмотра, когда вы пытаетесь загрузить данное веб-приложение. Как и в случае с рекламой, это часто происходит с формами и баннерами, которые в конечном итоге имеют тенденцию сдвигать остальной контент на странице.
Веб-шрифты
Загруженные шрифты могут привести к появлению FOIT или Flash невидимого текста и Flash без стиля или FOUT.
Вы можете решить эту проблему, используя rel = ”preload” в ссылке перед загрузкой шрифта. Кроме того, если у вас возникли проблемы с этим, удобные инструменты, такие как Lighthouse, могут помочь вам обнаружить и диагностировать, что именно вызывает сдвиги.
CLS в процессе разработки
Чаще всего ресурсы, необходимые для отображения страницы, загружаются в кеш браузера, и в следующий раз, когда разработчик или владелец сайта посетит страницу, которая все еще находится в стадии разработки, никаких изменений не произойдет, поскольку элементы сайта уже загружены.
Вот почему крайне важно запускать тесты перед запуском веб-страницы, чтобы потом не было неприятных сюрпризов.
Расчет совокупных сдвигов макета
Когда вы захотите рассчитать CLS, вы заметите, что он в основном сводится к двум основным событиям или метрикам: доле воздействия и доле расстояния.
Эта переменная измеряет, сколько места на экране или в области просмотра (что вы видите, когда находитесь на веб-сайте) занимает смещающийся нестабильный элемент.
Когда элемент успевает загрузиться и вскоре после этого начинает сдвигаться, общее пространство, которое занимает элемент, от места, которое он занимал на экране от первого рендеринга до конечного местоположения, когда сайт рендерится.
Google использует пример элемента, который занимает около 50% области просмотра, а затем падает до 25%. В этом случае все складывается, значение 75% - это доля воздействия, и этот балл выражается как балл 0,75.
Второе измерение в строке - это доля расстояния, и это, по сути, размер пространства, на которое элементы страницы переместились из своего исходного положения в окончательное место, которое они занимают в области просмотра.
Чтобы оставаться в соответствии с приведенным выше примером, элемент страницы переместился на 25% (0,25), поэтому оценка CLS должна быть рассчитана путем умножения двух дробных оценок. 0,75 × 0,25 = 0,1875
В общем, это не так просто, поскольку есть и другие соображения, о которых вам следует знать перед расчетом, не говоря уже о том, что вам нужно сделать еще немного математики. Что здесь наиболее важно, так это то, что это более или менее один из способов измерить этот важный фактор UX, который вот-вот станет ключевым компонентом высокого ранжирования.
Измерение совокупных сдвигов макета
Как правило, CLS измеряется двумя способами. Один из них находится «в лаборатории», а другой метод называется «в полевых условиях».
Измерение в лаборатории в основном означает имитацию пользователя, загружающего веб-страницу. Для этого Google использует моделирование Moto G4 для генерации окончательной оценки CLS в лабораторных условиях. Выполнение этих лабораторных тестов - прекрасная возможность понять, как страница и макет контента могут действовать, прежде чем фактически подтолкнуть их к пользователям для использования в реальном времени. Это не что-то совершенно новое и дает возможность устранить проблемы с макетом.
Кумулятивные сдвиги в макете станут важным фактором ранжирования в 2021 году.
5 советов по продвижению для интернет-магазинов | Как вывести ваш новый сайт в топ результатов поисковых систем?
