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

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!