I am not good with coding so I could be misunderstanding how these things actually work, but from what I picked up when I was running into similar issues is that the problem is the static parts of the page load first and then the dynamic data loads in slightly after due to having to fetch it form the database. This causes things on the page to be pushed around because the static parts of the page don’t know how much room they need to make for the dynamic content until it is loaded.
What I ended up doing was adding a min-height to the containers holding the dynamic content to minimize or completely get rid of the layout shift. You will probably have to set different min heights for each breakpoint. One thing to note is that when I had the min heights stored in styles.css there was still layout shift (I’m assuming because it had to fetch the info from another file, so it was similar to having to wait for the database not again I’m not sure with this stuff) so I ended up just using inline styles which may be incorrect for all I know but it’s what got it working for me.
You could also look into placeholders https://docs.wappler.io/t/using-bootstrap-5-placeholders/39764
or pre loaders https://docs.wappler.io/t/applying-a-page-preloader/2875
but I still had a few issues with those and just went with using min-height
This is the thread where I asked about this a while back if it is any help Question Regarding Server-Side Rendering
As far as I know Wappler sites cannot be made the same way as a Wordpress site where you have dynamic data rendered as static pages. I’m not sure how Redis works, if it will store the dynamic content in a way where it is instantly loaded and will prevent layout shift or if it just speeds up the loading which would still cause the layout shift.
@Teodor Is there any way to have a Wappler site work similar to Wordpress where you can have dynamic data that rarely changes, like the content of a blog post, and have it pre-rendered? Or will it always have to fetch the data from the database?