#7-201. Кумулятивный сдвиг макета – Cumulative Layout Shift. Правка

'#6. Тексты : texts';

'Library_ChapterController_actionUpdate_';

'#library_chapter_update_';

VirtualityCMS

Что такое Largest Contentful Paint

Идентификатор ссылки (англ.)	vigbo-copy
Статус:	Активен

Описание

Идентификатор ссылки (англ.)	chto-takoye-largest-contentful-paint-81042
Статус:	Активен

Описание

201. Кумулятивный сдвиг макета – Cumulative Layout Shift. Правка

Активен

Экспресс-правка Разметка ред. Summernote ред. Quill ред. CKEditor ред. Trumbowyg ред. Imperavi ред. Jodit

Общая информация

Название

Том: Руководство по Core Web Vitals

ID Тома: 21

Статус: Активен
Глава: №4

ID Главы: 201

Статус: Активен
Время действия не указано

Всего знаков в главе: 10499

id (статус)	201 (3)
Идентификатор ссылки (англ.)	kumulyativnyy-sdvig-maketa-cumulative-layout-shift-80468
Сайт (ID сайта)	. #3
Смотреть на сайте	https://panel.kb77.ru/texts/rukovodstvo-po-core-web-vitals/kumulyativnyy-sdvig-maketa-cumulative-layout-shift-80468/
Время последнего обновления	22-03-2024 в 18:58:53
Ссылка в БД	https://panel25.seowebdev.ru/seowebdev.ru/texts/rukovodstvo-po-core-web-vitals/kumulyativnyy-sdvig-maketa-cumulative-layout-shift-80468/

Полное название и описание

Полное название

Описание главы

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!

Ключевое слово (главное):

Персонажи:

Метки:

Комментарии:

Примечания:

Полный текст < > & " ' « » – — … • · ← → ↑ ↓ ↔

Юридические: © ® ™

Валюты: € £ ¥ ¢

Типографика: § ¶ ° ± × ÷

Дроби: ½ ⅓ ⅔ ¼ ¾ ⅛ ⅜ ⅝ ⅞

Греческие: α β γ δ ε λ μ π σ ω Δ Σ Ω

Математические: ≈ ≠ ≤ ≥ ∞ √ ∑ ∫ ∂ ∇

<p style="text-align: right;">автор: <a title="Go to Author Page" href="https://www.searchenginejournal.com/author/roger-montti/">Roger Montti</a></p>
<p><strong>Cumulative Layout Shift (CLS)</strong> &ndash; это метрика Google, измеряющая событие пользовательского опыта и ставшая фактором ранжирования в 2021 году.</p>
<p>Это означает, что важно понимать, что такое CLS и как его оптимизировать.</p>
<h2>Определение Cumulative Layout Shift</h2>
<h3>Что такое Cumulative Layout Shift?</h3>
<p>CLS &ndash; это неожиданное смещение элементов веб-страницы во время её загрузки. Элементы, которые обычно вызывают смещение, включают шрифты, изображения, видео, формы обратной связи, кнопки и другие виды контента.</p>
<p>Минимизация CLS важна, потому что страницы, которые меняют своё положение, могут создавать плохой пользовательский опыт.</p>
<p>Низкий балл CLS указывает на проблемы в коде, которые можно исправить.</p>
<h3>Почему происходит Cumulative Layout Shift</h3>
<p>Согласно Google, есть пять причин, по которым происходит Cumulative Layout Shift:</p>
<ul>
<li>Изображения без указанных размеров.</li>
<li>Реклама, внедрения и фреймы без указанных размеров.</li>
<li>Динамически вставляемый контент.</li>
<li>Веб-шрифты, вызывающие FOIT/FOUT.</li>
<li>Действия, ожидающие ответа сети перед обновлением DOM.</li>
</ul>
<p>Изображениям и видео необходимо иметь указанные высоту и ширину в HTML. В отношении адаптивных изображений убедитесь, что различные размеры изображений для разных видовых порталов используют одно и то же соотношение сторон.</p>
<p>Google рекомендует использовать AspectRatioCalculator.com для расчета соотношений сторон. Это хороший ресурс.</p>
<h3>Реклама может вызвать Cumulative Layout Shift</h3>
<p>Это немного сложно решить. Один из способов справиться с рекламой, вызывающей Cumulative Layout Shift &ndash; это стилизовать элемент, где будет показана реклама.</p>
<p>Например, если вы стилизуете блок с указанием конкретной высоты и ширины, то реклама будет ограничена этими размерами.</p>
<p>Есть два решения, если не хватает рекламных мест и реклама не отображается.</p>
<p>Если элемент, содержащий рекламу, не показывает рекламу, вы можете настроить его так, чтобы использовалась альтернативная баннерная реклама или заполнительное изображение.</p>
<p>В некоторых макетах, где реклама занимает всю строку вверху, возможно, столбец справа или слева от веб-страницы, если страница не отображается, смещения не произойдет. Это не сделает разницы ни на мобильных устройствах, ни на настольных компьютерах. Но это зависит от макета темы.</p>
<p>Вам придется проверить это, если у вас есть проблемы с рекламными блоками.</p>
<h3>Динамически вставляемый контент</h3>
<p>Это контент, который вставляется в веб-страницу.</p>
<p>Например, в WordPress вы можете добавить ссылку на видео на YouTube или твит, и WordPress отобразит видео или твит как внедренный объект.</p>
<h3>Веб-шрифты</h3>
<p>Загруженные веб-шрифты могут вызвать явление, известное как Flash of Invisible Text (FOIT) и Flash of Unstyled Text (FOUT).</p>
<p>Способ предотвратить это &ndash; использовать rel="preload" в ссылке для загрузки этого веб-шрифта.</p>
<p>Lighthouse может помочь вам диагностировать, что вызывает Cumulative Layout Shift.</p>
<h2>CLS может проникнуть в процесс разработки</h2>
<p>Кумулятивный сдвиг макета может возникнуть в процессе разработки. Может произойти так, что многие ресурсы, необходимые для отображения страницы, загружаются в кэш браузера.</p>
<p>Когда разработчик или издатель в следующий раз посещает страницу в процессе разработки, ему не будет заметен сдвиг макета, потому что элементы страницы уже загружены.</p>
<p>Поэтому полезно иметь измерение в лабораторных условиях или в реальных условиях использования.</p>
<h2>Как рассчитывается Cumulative Layout Shift</h2>
<p>Расчет включает две метрики/события. Первая из них называется Impact Fraction (Коэффициент воздействия).</p>
<h3>Impact Fraction</h3>
<p>Коэффициент воздействия &ndash; это измерение того, сколько места занимает нестабильный элемент в области просмотра.</p>
<p>Область просмотра &ndash; это то, что вы видите на экране мобильного устройства.</p>
<p>Когда элемент загружается, занимаемое элементом пространство из места, занятого в области просмотра при первом рендеринге съезжает до конечного положения при рендеринге страницы.</p>
<p>Пример, используемый Google, &ndash; это элемент, который занимает 50% области просмотра, а затем опускается еще на 25%.</p>
<p>Когда эти значения объединяются, получается значение 75%, которое называется Коэффициент воздействия, и оно выражается в виде оценки 0,75.</p>
<h3>Distance Fraction</h3>
<p>Второе измерение называется Коэффициент расстояния. Коэффициент расстояния &ndash; это количество пространства, на которое элемент страницы переместился от изначальной позиции до конечной позиции.</p>
<p>В приведенном выше примере элемент страницы переместился на 25%.</p>
<p>Теперь Cumulative Layout Score рассчитывается умножением Коэффициента воздействия на Коэффициент расстояния:</p>
<p>0,75 x 0,25 = 0,1875</p>
<p>В расчет включено еще некоторое количество математики и других соображений. Важно запомнить, что эта оценка &ndash; это один из способов измерения важного фактора пользовательского опыта.</p>
<h2>Как измерить Cumulative Layout Shift</h2>
<p>Существует два способа измерения Cumulative Layout Shift. Первый способ, по словам Google, называется в лаборатории. Второй способ называется в полевых условиях.</p>
<p>В лаборатории подразумевает симуляцию реального пользователя, загружающего веб-страницу. Google использует симулированный устройство Moto G4 для создания оценки CLS в лабораторных условиях.</p>
<p>Инструменты для лаборатории наилучшим образом подходят для понимания того, как макет может проявить себя перед его размещением в режиме реального времени для пользователей. Это дает издателям возможность проверить макет на наличие проблем.</p>
<p>Инструменты для лаборатории включают в себя Chrome Dev Tools и Lighthouse.</p>
<h2>Понимание Cumulative Layout Shift</h2>
<p>Важно понимать Cumulative Layout Shift. Необязательно уметь самостоятельно проводить расчеты.</p>
<p>Однако понимание того, что это означает и как это работает, является ключевым, поскольку это теперь стало частью фактора ранжирования Core Web Vitals.</p>

Скопировано в буфер!

Вставлено из буфера!

Карточка текста Карточки текста

Тема

Персонажи

Изменить дату действия. 18/02/2026

Выбрать дату

Время: 03:44 .

Идея текста

Сюжет

План действий

Заметки

Редакторские правки

Персонажи

Идея текста

Сюжет

План действий

Заметки

Дополнительные поля
Дополнительные поля отсутствуют

201. Кумулятивный сдвиг макета – Cumulative Layout Shift. Правка

Редактировать комментарии, примечания, метки и персонажи

Дополнительные символы

Кумулятивный сдвиг макета – Cumulative Layout Shift