I highly doubt your google rankings have fallen because of a layout shift on your page, when everything is perfectly fine on the page and all your Core Web Vitals are perfectly fine:
The issues you are showing could be anything including old indexed urls are different than the new ones.
Google won’t stop indexing and crawling your pages just because some text and images pushed the content down - that is something happening in pretty much every site out there.
Where does your content come from, database or external API?
I load everything from my server and database
You said it yourself:
There’s nothing much you can do about this.
You insert long dynamic text that “shifts” the layout when the page loads. So the intro div, for example, changes its height from 0px to almost 900px when the data is loaded. This is why the Large Layout Shifts score is lower.
what can I do here?
That makes no sense?
Node is server rendered unlike php which is browser rendered. text should be rendered into the page at server level before it is delivered to the browser
What i am saying is layout shifts are not the reason for google to stop indexing your pages. You need to check the old indexed urls and if they are different then redirect them properly to the new ones.
Thats not the case here, the user is not using server side rendering on his pages. He’s using the regular Server Connect → App Connect workflow as you normally do.
As far as Google knows your site content is offline as it is trying to follow non existent links (previously existed but no longer exist) and this hits the rank hard. You need to follow Teodors instructions. It has nothing to do with layout shifts or rendering whatsoever.
Google documentation:
You also need to add a sitemap.xml file to your robots.txt file. Also if you have a current sitemap.xml file make sure it is not full of non existant links as Google will be reading this file if it exists.
New rules are being introduced by the big G in March, looks like they will be paying much closer attention to issues mentioned above:
https://support.google.com/webmasters/answer/9205520?hl=en
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?
