CLS (Cumulative Layout Shift)

CLS (Cumulative Layout Shift) — суммарный сдвиг видимых элементов страницы во время загрузки. Измеряется как сумма произведений «доля viewport, на которую сдвинулся элемент × дистанция сдвига».

Порог 2026: хорошо если < 0.1, плохо если > 0.25.

Главные виновники:

• Изображения без width и height атрибутов.
• Реклама и embed’ы без зарезервированного места.
• Шрифты без font-display: swap (FOIT/FOUT).
• Динамически вставляемый контент сверху страницы.
• iframe без явного размера.

Что помогает: всегда указывать width/height или CSS aspect-ratio, резервировать место под рекламу/embed’ы через placeholder, использовать font-display: swap, не вставлять контент над уже видимым.

Связано: Core Web Vitals, LCP.