Как определить причину «сдвига макета» во время гидратации изображения в React/Next.js ⇐ CSS

[Anonymous]

Я работаю над улучшением основных веб-показателей для рабочего сайта: https://calycopaints.com/
По данным Lighthouse, я получаю высокий балл Совокупный сдвиг макета (CLS), особенно в разделах главной страницы и продукта. Я предоставил атрибуты ширины и высоты для своих тегов и использую соотношение сторон в своем CSS, но сдвиг все равно происходит в тот момент, когда JavaScript увлажняется.
Поведение: Когда страница загружается, макет выглядит стабильным в течение доли секунды, но как только изображения завершают загрузку/увлажнение, содержимое под ними «спрыгивает» примерно вниз 20–30 пикселей.
Мой CSS для контейнеров изображений:
CSS

Код: Выделить всё

.image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
}

.image-wrapper img {
width: 100%;
height: auto;
object-fit: cover;
}

Проблема: я не могу увидеть конкретную причину на вкладке «Производительность» Chrome DevTools, потому что сдвиг происходит очень быстро.

• Есть ли способ «заморозить» состояние DOM в ту миллисекунду, когда происходит сдвиг?
• Глядя на ссылку на сайт выше, является ли это результатом шрифта загрузка (FOIT/FOUT) или это определенно контейнеры изображений?

Я ищу систематический способ отладки этого конкретного сдвига, а не просто «угадываю», какое свойство CSS изменить.

Подробнее здесь: https://stackoverflow.com/questions/798 ... react-next