Накопительный сдвиг макета (CLS): что это такое и как оптимизировать для него свой веб-сайт

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

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

Подпишитесь на наш канал Youtube

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

Нет лучшего способа проиллюстрировать, что представляет собой высокий балл CLS (что означает значение выше 0,10 по данным Google PageSpeed ​​Insights), чем наглядный пример. Вот веб-сайт с макетом, который постоянно смещается при загрузке страницы. Обратите внимание, что при захвате мы вообще не прокручиваем. Наше окно просмотра остается прежним, но страница кардинально меняется сама по себе:

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

И ваши пользователи тоже.

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

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

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

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

CLS - это один из трех основных веб-показателей, которые Google измеряет, чтобы определить, предлагает ли ваш веб-сайт надежный пользовательский интерфейс (UX). Другими важными элементами Core Web являются First Input Delay (FID) и Largest Contentful Paint (LCP), которые также определенно стоят любых усилий, которые вы потратите на оптимизацию.

Как измерить CLS

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

Вы, вероятно, обнаружите, что опыт работы с CLS может сильно отличаться . Это зависит не только от того, насколько оптимизирован ваш сайт, но и от того, какое устройство вы используете. Имея это в виду, лучшим инструментом для измерения CLS вашего сайта является PageSpeed ​​Insights. Это напрямую связано с Core Web Vitals от Google, поэтому вы можете напрямую видеть, как ваш показатель CLS влияет на то, как Google видит ваш сайт.

Эта служба позволяет вам ввести URL-адрес и получить для него общую оценку производительности на основе данных, собранных Google за последние 28 дней. Эта оценка учитывает несколько показателей, включая CLS, FCP и LCP.

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

Обратите внимание, что PageSpeed ​​Insights предлагает процентную разбивку для каждой оценки. В этом случае у 91% пользователей произошел нулевой сдвиг макета при загрузке тестового сайта. Однако у остальных посетителей произошли некоторые сдвиги в макете.

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

Помимо полевых данных, PageSpeed ​​Insights также предлагает так называемые лабораторные данные . Это оценки производительности, основанные на одном тесте, а не на данных, собранных за длительный период времени (которые считаются полевыми данными ).

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

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

Как определить причины сдвигов макета

Если вы хотите определить, какие элементы вызывают сдвиг макета на вашем веб-сайте, вы можете сделать это с помощью инструментов разработчика Chrome. Если вы откроете инструменты (CTRL-SHIFT-I) и перейдете на вкладку « Производительность », вы сможете записывать тесты производительности во время навигации по Интернету.

После того, как вы остановите запись, Chrome Dev Tools вернет временную шкалу, которая показывает время загрузки, отдельные запросы и основные веб-данные. На этой шкале времени вы можете выбрать отдельные события Layout Shift, которые перечислены в разделе « Опыт» . Так вы сможете увидеть, каким элементам они соответствуют.

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

Если вы хотите отслеживать Core Web Vitals своего веб-сайта, мы рекомендуем вам создать учетную запись Google Search Console. Вы сможете отслеживать показатели производительности и основные веб-показатели из Search Console, что является благом, когда дело доходит до поисковой оптимизации (SEO). Мы считаем, что в ваших интересах регулярно отслеживать Search Console, независимо от этого, но никогда не помешает иметь конкретную метрику, которую вы отслеживаете.

Как оптимизировать свой показатель CLS

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

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

Вот как эти атрибуты выглядят в HTML:

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

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

Когда дело доходит до адаптивных изображений, вы можете полагаться на CSS вместо того, чтобы вручную объявлять ширину и высоту. CSS позволяет использовать атрибут max-width, чтобы сообщить браузерам, какой процент области просмотра должно занимать изображение:

img {
max-width: 90vw;
height: auto;
}

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

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

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

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

Cumulative Layout Shift (CLS) Часто задаваемые вопросы

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

Как CLS влияет на производительность моего веб-сайта?

Теоретически у вас может быть очень быстрый веб-сайт, который по-прежнему получает относительно низкую оценку CLS. Как и в случае с другими Core Web Vitals, оценки CLS могут не коррелировать напрямую с общей производительностью сайта. Ваш сайт может быстро развиваться, но при загрузке он разворачивается как гармошка. Даже в этом случае большие сдвиги в макете определенно негативно влияют на UX сайта. Google считает это невероятно важным. Вот почему Google так серьезно оценивает эти данные.

Является ли CLS менее важным, чем результаты FCP или LCP?

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

Все три показателя составляют Google Core Web Vitals. Это означает, что если вы проигнорируете один из них, вы рискуете оказаться ниже в релевантных результатах поиска. Убедитесь, что ваш сайт оптимизирован для низкого уровня CLS, как правило, не имеет ничего, кроме положительного влияния на производительность сайта, такого как LCP и FCP. Если самая большая Contentful Paint опускается на экран, как только пользователь ее видит, насколько полезно такое быстрое время загрузки?

Что такое хороший результат по CLS?

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

Заключение

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

CLS - это один из основных веб-показателей, который Google использует для измерения общего UX вашего сайта. И именно пользователи - это в первую очередь причина, по которой у вас есть веб-сайт. Их опыт является приоритетом 1. Низкий показатель CLS (ниже 0,10) означает, что ваш веб-сайт должен загружаться плавно, и каждый аспект его макета будет отображаться в нужном месте с самого начала.

У вас есть вопросы о CLS или о том, как уменьшить ваш? Давайте поговорим о них в разделе комментариев ниже!

Лучшее изображение через более старшего брата / shutterstock.com