I have build a template page with reusable components and slots thinking I was doing the right thing, after I optimised all image to webp and removed some animations I got a google page speed score of 90 which is good right…
Here’s the catch, I have a LOT of slots/divs since the guide template I’m doing requires a lot of infos.
The page size is over 5MB which is bad (all webp images).
The HTML file size (good is 50KB) mine is 900KB.
DOM elements is 1990.
page speed is 3.5 seconds.
So I made a test because I was thinking that maybe (probably) it’s my structure, there is too much. I removed the main content leaving the page almost empty.
The page size is 1MB (why not less)
The HTML file size is around 800 (why ? since I removed everything)
page speed is 650ms. ( why ? its almost empty)
I know another site that has 4550 DOM elements but kept the page speed at 500ms page size at 2MB html file size at 144KB.
I wanted to know if there is a mistake I made in the project, or is it plasmic behaviour with codegen, please provide some input I’m stuck.
Hello @anthony_de-saint-jorre I’d recommend comparing this with the codegen output of a page from an empty Plasmic project, which should be quite minimal. To provide more specific insights, I’d need your project ID.
Hello, @sarah_ahmed so I had to take some time to do some testing and this is what I found.
For the first case I completly created a new project and created only one page. (I also deleted all the slots and components to make sure the DOM element is not heavy)
I’d like to understand why this behavior ? Is it Plasmic? Codegen? Why when adding other pages performance drops like that ?
PS : I mentioned in another post that I’ll need to know if there is any plasmic limitations regarding the number of page we can create, because I got a project that requires arround 2000 pages I got told that :
“we do not enforce any limits on the number of pages in a project. However, for very large websites like yours, we recommend splitting projects by page path to improve the developer experience.”
If you can investigate please, I’ve been stuck on this for days testing over and over again but its actually the number of pages that decrease my score and if 39 is already too much not sure why I got that reply above.
It seems that Gatsby’s default behavior is to combine CSS from all pages into a single commons.css file, which is causing the gigantic page size when you make so many pages. I’ll look into a solution to solve this.
I believe those issues on Next.js are due to some of your links not having a destination/href. You’ll need to look through your project and find those invalid links.
