Как определить Layout Shift?

Как определить Layout Shift?

Layout Shift — это неожиданное смещение элементов на странице после её загрузки. Это критическая метрика Web Vitals (CLS), которую отслеживают поисковые системы.

Что такое Cumulative Layout Shift (CLS)

CLS — сумма всех неожиданных смещений элементов на протяжении жизни страницы:

• 0.1 и менее — отличный результат
• 0.1-0.25 — требует улучшений
• более 0.25 — плохой результат

Причины Layout Shift

1. Изображения без указанных размеров
2. Асинхронные элементы (объявления, iframe)
3. Веб-шрифты (FOUT/FOIT)
4. Динамический контент
5. CSS анимации со смещением
6. Всплывающие уведомления

Измерение через PerformanceObserver

Базовый способ отслеживания Layout Shift:

let clsValue = 0;

const observer = new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      clsValue += entry.value;
      console.log('CLS обновлён:', clsValue);
      entry.sources.forEach(source => {
        console.log('Смещённый элемент:', source.node);
      });
    }
  }
});

observer.observe({ type: 'layout-shift', buffered: true });

Google Web Vitals библиотека

Самый удобный инструмент:

import { getCLS, getLCP, getFID, getFCP, getLWP } from 'web-vitals';

getCLS((metric) => {
  console.log('CLS:', metric.value);
  console.log('Рейтинг:', metric.rating); // good, needs-improvement, poor
});

Решения для предотвращения

Указание размеров для изображений:

<img src="photo.jpg" width="800" height="600" alt="Photo">
<img src="photo.jpg" style="aspect-ratio: 4/3; width: 100%;" alt="Photo">

Preload критических шрифтов:

<link rel="preload" as="font" href="/fonts/Inter.woff2" crossorigin>

Зарезервировать место для динамического контента:

<div style="height: 300px; overflow: hidden;">
  <!-- Объявление или контент загружаются сюда -->
</div>

Использовать transform вместо смещений:

/* Плохо: вызывает Layout Shift */
@keyframes slide { from { margin-left: 0; } to { margin-left: 100px; } }

/* Хорошо: не вызывает смещение */
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }

Мониторинг в production

import { getCLS } from 'web-vitals';

getCLS((metric) => {
  fetch('/api/metrics', {
    method: 'POST',
    body: JSON.stringify({
      metric: 'CLS',
      value: metric.value,
      url: window.location.href
    })
  });
});

Chrome DevTools

1. Открыть вкладку Performance
2. Записать взаимодействие со страницей
3. В разделе Experience посмотреть красные полосы Layout Shift
4. Использовать Web Vitals расширение для быстрой проверки

Best Practices

• Всегда указывай size для images и videos
• Используй font-display: swap для веб-шрифтов
• Preload критичные ресурсы
• Избегай вставки контента выше текущей позиции скролла
• Используй CSS containment (contain: layout)
• Тестируй на медленных устройствах и медленном интернете

Правильная реализация может улучшить SEO рейтинг на 10-20%.