Смещение макета (Layout Shift) — это внезапные изменения в расположении элементов на веб-странице во время загрузки, вызывающие скачки контента. Информацию о нем можно найти в:
- Google Search Console: В разделе "Core Web Vitals" отображаются данные о CLS (Cumulative Layout Shift) вашего сайта, показывая страницы с плохими показателями.
- Отчеты Lighthouse: Инструмент аудита в Chrome DevTools (и в GSC) включает метрику CLS и предлагает рекомендации по ее улучшению.
- Web Vitals Report (Google): Специализированный отчет, предоставляющий подробные данные о Web Vitals (включая CLS) для вашего сайта.
- PageSpeed Insights: Онлайн-инструмент от Google, анализирующий производительность страницы, включая CLS, и дающий рекомендации.
- Chrome DevTools Performance Tab: Позволяет визуализировать процесс рендеринга и выявлять моменты смещения макета. В разделе "Experience" можно увидеть "Layout Shifts".
- Блог Google Developers: Часто публикует статьи и руководства по оптимизации Web Vitals, включая подробное объяснение CLS и способы его исправления.
- Спецификация Layout Instability API: Техническое описание API, используемого для измерения смещений макета.
- MDN Web Docs: Предоставляет документацию по Layout Instability API и сопутствующим темам.
Примеры инструментов и их использования:
javascript
bash
Отчеты Lighthouse и PageSpeed Insights предоставляют конкретные данные о величине смещения и предлагают потенциальные причины, такие как изображения без указанных размеров, динамически добавляемый контент или шрифты, вызывающие мигание текста (FOIT/FOUT).