No Placeholders for Images

@topfgartenwelt to prevent CLS caused by images, you’ve to set height and width attributes or set aspect ratio CSS properly. Flying Images can’t do it.

You can use my premium plugin FlyingPress (https://flying-press.com) to fix it.

Dear Gijo, as you can see on the pictures attached – all my images have a defined height and width: https://imgur.com/a/CJsLv3t and https://imgur.com/a/utaMiMl – so this can’t be the problem. Couldn’t be the CDN-Server a problem?

Greetings

@topfgartenwelt try “native only” lazy load

Dear Gijo, unfortunately that doesn’t help too.

On my testsite I doesn’t have the problem with the missing placeholders, but maybe you can
help me here or have an answer: When I load the page at the bottom and scroll up to the beginning, I always get a CLS. When I load the page at the top and scroll down I haven’t any CLS even when I’m scrolling up and down. This is strange – should it be irrelevant if the page is loaded at the bottom or at the top to avoid layout shift?

Greetings Kathrin

• This reply was modified 3 years, 9 months ago by topfgartenwelt.

@topfgartenwelt I tested your site by scrolling up and down, I couldn’t notice any CLS. Google PSI also saying there is no CLS: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.topfgartenwelt.com&tab=mobile

Dear Gijo, you can’t measure this sort of CLS with PSI. PSI just shows the CLS on loading. And on load I don’t have any CLS because I haven’t any picture in the first viewpoint. The CLS happens when I scroll through the page and it can be measured with the Chrome Browser Extension for Web Core Vitals.

On the Load: CLS 0 –> https://imgur.com/a/8iJdljR
After Scrolling from Bottom to Top: CLS over 0,3 –> https://imgur.com/a/0yeIDVF

Why this is happen?

Greetings Kathrin

@topfgartenwelt Flying Images only lazy load and enable Statically CDN.

If you’re seeing CLS, add aspect-ratio to images. This will fix CLS if it’s caused by images.

Adding aspect-ratio is out of the scope of this plugin.