TTI, LCP, TBT vs Pre-rendering

[AverageNetlifyBoi]

I have a JAMstack app up and running - Angular, SSG with Scully, Netlify Functions, FaunaDB. My main.js bundle on the initial page is 138kb - I spent 16 hours straight to be sure everything is on point, including all the web.dev practices. However there is one thing I can not trick - Google lightouse performance score.

Thanks to SSG I have prerendered pages, blazing fast to my eyes, great experience, but not for Google scoring. My current performance score:

Note: I would love to but I cannot share the site yet.

User pulls a prerendered page, about 2 or 3 seconds laters JS replaces the “bait” and parses an actual app which also takes time. This results in those terrible results I have run the tests on web.dev page. Prod release, master branch, Pro Netlify plan if that matters.

Have anyone came up with some clever idea how to turn those numbers into green ones (keeping app pre-rendering feature on)?

[AverageNetlifyBoi]

Alright I found the issue. I lazy-loaded initial route, which caused metrics to be much worse, chunks had to load. Also I moved critical stylesheets to JS which definitely helped. I could optimize it even more by removing big image which I pre-load on a homepage and create icon sets for Material Icons instead of using its Google font, which is huge, 70kb (for comparision my main bundle is 160kb), which I also preload. This would solve my long max potential first input delay. Disabling NgZone also would help but since I’m using Material, RIP, I cant. Looking good now, went down from 6.1s to 4s, SSG for life

[AverageNetlifyBoi]

I think I’m gonna stop there First input delay, painful metric

[luke]

Hi, @AverageNetlifyBoi, thank you for sharing your journey on this community site. Hopefully others searching for solutions to similar issues will find this information helpful. We appreciate it!

[AverageNetlifyBoi]

Alright, I finally did it Would be easy 100 with Netlify high performance edge

Dashboard with 17 views and lots of shared UI modules. Full Angular 10 with Material (including Animations module), Scully and 50 optimizations in action (Pro plan without high performance edge).

[jonsully]

Baller! Great stuff! Do share when you can Everyone here definitely appreciates good jam

[AverageNetlifyBoi]

@jonsully Thanks! Yes, I will definitely share on this thread after my project goes live!