Есть несколько страниц, где никудышный показатель CLS в Google Page Speed. Контент на страницах - текст, изображение, много текста. Изображения на разных страницах могут быть разного разрешения. Кроме того, ширина блока контента может быть разной на разных устройствах - сайт адаптивный. Картинке прописан css - width: 100%; height: auto. После окончания загрузки все выглядит отлично и работает.
Но рендерятся страницы так - сначала выводится все текст, потом загружается картинка и текст который ниже ее скачкообразно сдвигается вниз. Page Speed'у конечно такое дело не нравится.
Пока не придумал ничего лучше, чем резервировать место под изображение с помощью js, который придется корректировать под каждое изображение, т.к. они разного размера.
var pfwidth = document.querySelector('.p-first').offsetWidth; // Определяем доступный размер контейнера
var picf = document.querySelector('.pic-first');
picf.style.width = pfwidth + 'px'; // 1200
picf.style.height = pfwidth / 2 + 'px'; // 600
Можно что-то получше и более универсальное придумать?
Простой
