How to optimize CLS (Google Page Speed)?

• 0
  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

  
  Can you think of something better and more universal?

  JavaScript Ian Hardy, Apr 29, 2019

---

1 Answers
• 0
  Register the width and height attributes

  Anonymous

---