Hi,
We are testing the page using PageSpeed Insights and we are getting less performance scores. Also, there are excessive DOM nodes that might be causing the issue. We want to dynamically load the lower sections of the page only when a user scrolls into these sections. There are some2 code components and the rest are developed using Plasmic Studio. For the code components, I am importing them using next.js dynamic. We need to dynamically load the studio components.
Hi, what’s the live URL of that page? And do you have a plasmic project URL for it as well?
You can extract the contents below the fold as a separate component, replacing that part of the main homepage with an empty slot. And then you can wrap it in your own code to dynamically load the inner component as you want.
But I’m curious to look at the actual page and what the performance contributors are.
Hi @yang
Here’s the live URL of the page
https://plasmic-dev.rayobyte.com/dev/pricing-test
And here’s the plasmic project URL
https://studio.plasmic.app/projects/aLd7YPsrusJtnKKQ1K4KhA/branch/main@latest/page/Pricing%20calculator%20page%204
Looks like the main issue is that you don’t have any HTML/CSS up front. Make sure SSR/SSG works.
This is what you see when you load with JS disabled:
You can confirm with just running curl on that command - there’s no markup, only JS.
So to display anything on the screen requires JS hydration first.
Look into your codebase to see what could be causing this - there’s likely something near the top that is opting out of rendering.