I have real big problem with the CLS, if my site is reloaded when scrolled to the bottom of the page or I reload the page and an image is in the viewpoint I get really huge CLS. Everything turns red. This happens on mobile as on desktop. The problem is there are no correct defined placeholders for the images. The placeholder for the featured image is too big and is shrinking (to big placeholder in green: https://imgur.com/a/wAX7CQg ,finally loaded picture: https://imgur.com/a/mLJLqJt ) and the other placeholders for images in the post are to small and get bigger (to small placeholder in green: https://imgur.com/a/hnis9aH, finally loaded picture: https://imgur.com/a/ad0s0mN). So the browser hasn’t the right information and that is causing the CLS.
I’m writing my posts with Gutenberg and the Layout is composed with tagdiv-Composer. Concerning the information of my browser the featured image has the size 1200×800 px and the images in the post have the size 696×464 px, the correct thumbnails for the mobile theme are activated.
In the Desktop Layout only the placeholder for the featured image seems to have the right size, all other placeholders are too small.
What is the solution for that problem? I need a solution therefore urgently!!
Greetings Kathrin
Hello !
if my site is reloaded when scrolled to the bottom of the page or I reload the page and an image is in the viewpoint I get really huge CLS. Can you let me know how exactly or where you see this happening live ? We need to investigate and find a solution.
Thank you !
In Chrome Developer Tools: Open devtools, choose desktop or mobile version of the theme, disable cache on devtools, throttle the device to 2g (so you can see what is happening) scroll down to the bottom social media buttons, press strg+r or f5 and start the reload. Than you can see that there are no, really no! fitting thumbnails for images. The whole site is loaded without leaving space for the images, because there are no thumbnails deposited. The only thumbnail that I could find and that is used for post pictures on desktop is tdb_696x0. Here you have set a width. But that doesn’t help anything. You have to define the height to avoid CLS!!! The height is 464px. And 464 px have to be free for every inserted image!
In the mobile theme there is not a single thumbnail defined – not for the featured image and not for the other images in the posts, for example a thumb sized 330x220px.
I wright my articles with the Gutenberg Editor. It must be possible that pictures which are inserted by using the Gutenberg Editor get the right thumbnail sizes, so that there is no layout shift?
Here is a video that shows the Layout-Shifts clearly: https://imgur.com/a/c7WeyPf
It’s a mess!!! It’s a disaster!!!
Greetings Kathrin
Hello !
This part too I have tested on our side, Your website is reloading differently on our side. When I reload your website at the bottom the reload is made almost instantly and there is no layout differences as shown in your videos. Also there are no issues as you see here: https://www.screencast.com/t/HZceFazq
Also my recommendation like in the other topic is to start making this investigations on incognito mode, when you are logged out. That is what the Google Crawl robots will see in fact.
Let us know the result after you test this on a incognito mode.
Thank you !
Dear Vlad, I have tested it in incognito mode too and there is no change. The placeholders are missing. I think the problem is that the layout shift doesn’t happen on the load (this is measured by Page Speed Insights and webpagetest.org) it happens out of the first viewboard. You can see it when you use the Chrome Extension for Web Core Vitals. Here you can see the CLS clearly: https://imgur.com/a/izTClDE
Greetings Kathrin
Hi,
Normal if you have the latest theme (v10.3.9.1) and WordPress (v5.6) version then, on images should be add dimension by WordPress -> https://prnt.sc/y02uv9 -> https://wplift.com/cumulative-layout-shift-wordpress -> https://i.imgur.com/qHr0XUl.png also there will be soon a theme update that has the main goal to fix as many problems with CLS.
Thank you for your understanding!
Dear Calin, I know that site. I run WordPress 5.6 and the latest theme, but not all of my pictures have a place in the browser when loading. For example this site: https://www.topfgartenwelt.com/aussaatkalender-januar-7-gemuese-blumen-kraeuter. When I test with Lighthouse the first and the second image have a placeholder but not the third and the last one. I don’t know why.
Placeholder Featured Image: https://imgur.com/a/4nVz0v4
no placeholder for the Pinterest Image: https://imgur.com/a/dj7z4oC
It’s the same post…
Greetings Kathrin
Hello !
The images only have size. They are required only to have height and width. I will pass this to our developers to take a look and see what improvements can be done on this matter.
Thank you !
The problem is a Gutenberg-Bug. If you use a classic block for uploading the picture instead an image block the problem is gone and there is no problem in with the browser anymore.
Greetings Kathrin
