Есть несколько страниц, где никудышный показатель 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
Можно что-то получше и более универсальное придумать?
всем привет! не могу понять как решить эту проблему если есть решения, не работает подсказки и автозаполнения в обратных кавычках в JS файлеможно...
Столкнулся с проблемой отрисовки маркеров в react leafletleaflet заворачивает svg иконку в тег img, от чего мне нужно избавиться
Всем привет! Столкнулся с такой проблемой, на сайте есть js который являеться фильтром и в котором есть Data (объекты с данными)Соответственно...