Preloader animated loader with CLS

[ghost]

hello
I have a site with a preloader animated loader like https://www.5ldwn.tk/ but much faster.
The reason to use the preloader animated loader is to speed up the site dramatically. When I check my site on Lighthouse it loads in 0.5s, But the problem is that CLS is 0.8 and this is very bad.

Will this affect the user experience, the quality of my site, or the search engines? Is there a way to solve this problem?

Note: The latency of the preloader animated loader on my site is less than 0.1s on Lighthouse and GTmetrix but the problem is CLS 0.8.

Check: https://googlechrome.github.io/lighthouse/viewer/?psiurl=https://mtamhi.github.io/profile/

[adamraine]

Will this affect the user experience, the quality of my site, or the search engines?

Yes generally a high CLS will produce a bad user experience: https://web.dev/cls/.

As for search engines, you should refer to public docs from Google search to see how CLS can affect page ranking: https://support.google.com/webmasters/answer/9205520?hl=en

Is there a way to solve this problem?

Lighthouse has additional audits for this. The report has a filter that can help you focus on audits affecting CLS: