How to optimize CLS (Google Page Speed)?
There are a few pages that have a lousy CLS score in Google Page Speed. Content on pages - text, image, a lot of text. Images on different pages may have different resolutions. In addition, the width of the content block can be different on different devices - the site is responsive. The picture is registered with css - width: 100%; height: auto. After the download is complete, everything looks fine and works.
But the pages are rendered like this - first, all the text is displayed, then the image is loaded and the text below it abruptly shifts down. Page Speed certainly doesn't like this.
So far I haven’t come up with anything better than to reserve space for the image using js, which will have to be adjusted for each image. they are of different sizes.
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
Register the width and height attributesAnonymous
To place the code, please use CodePen or similar tool. Thanks you!