Template causes extreme Cumulative Shift Layout

[NeilSTSRecycle]

Hello all,

This is Neil Dayton of marketing at STS Electronic Recycling, Inc. and I am posting on this forum because the template for our homepage at https://www.stselectronicrecyclinginc.com/ creates an unacceptable amount of Cumulative Layout Shift, a key metric which Google uses in it's SEO algorithm.

Contained in this message is a video of the issue. The download and upload speed have been throttled for the sake of clarity. Please let me know if there is anything besides login credentials that I need to supply, and I will do so to the best of my ability.

This template was purchased from https://agethemes.com/. We've already reached out to them for support but have only received broken-english responses that we cannot decipher. However, through debugging we believe the issues lies with the template. I'm hoping for more luck from this forum, so if anyone can help I would greatly appreciate it.

Thank you,

Neil Dayton

Here is the video:
https://we.tl/t-ZH4XoK0P7k

[JTema]

To correct this issue it may be necessary to rearrange the whole html and css structure. That is serious work I think.

[JTema]

One another thing: According to the CLS Calculator on this page (https://layoutstability.rocks/) your site produces a 0.232 value that is between 0.1-0.25 and it is acceptable.

[john1924]

I had the same issue. Layout shift occurs when you have css in your index (inlined critical css) and in your css file.
If you move all css in your css file, cumulative layout shift will be 0. I think this happening because it parses the inline css (from index.php) and later it parses the rest css in your css file.
After moving all your css in one file, problem dissapears.

[john1924]

I forgot to say that expept of css in one file, it is necessary, all images above the fold have width and height values.