Исправление ошибки CLS в Core Web Vitals в GSC

С введением Core Web Vitals в GSC Google ясно дал понять, что они будут учитывать Web Vitals для страниц как фактор ранжирования. Это будет работать вместе с другими факторами ранжирования Google, такими как скорость страницы, HTTPS, мобильная дружелюбность и безопасный просмотр. Пока не было выпущено много деталей, но Google Search Console уже начала показывать отчеты по Core Web Vitals.

Он состоит из трех метрик производительности веба:

1. LCP: Largest Contentful Paint
2. FID: First Input Delay
3. CLS: Cumulative Layout Shift

Сейчас не так много информации о том, как вы можете исправить эти проблемы, но есть некоторые практики, которые могут помочь вам решить проблему Cumulative Layout Shift (CLS) ‘ Более чем’ для ваших веб-страниц.

Что такое Cumulative Layout Shift?

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

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

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

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

Что вызывает высокий CLS?

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

• Переход контента при ленивой загрузке
• Изображения без размеров
• Внедрение рекламы
• Встраивания и iframe без размеров
• Контент, ожидающий загрузки из-за медленного ответа

Переход контента при ленивой загрузке

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

Внедрение рекламы

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

Элемент, ожидающий загрузки из-за медленного ответа

Иногда из-за медленного HTTP-ответа некоторые элементы могут занять некоторое время для загрузки, вызывая смещение контента вверх или вниз.

Как исправить ошибку высокого CLS в Web Vitals?

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

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

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

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

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

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

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

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

Если у вас есть какие-либо мысли по поводу Исправления ошибки CLS в Core Web Vitals в GSC, не стесняйтесь оставлять их в комментариях ниже. Также, пожалуйста, подпишитесь на наш канал DigitBin на YouTube для видеоуроков. Удачи!