We’re getting subpar pagespeed scores on our Builder.io pages, example:
https://pagespeed.web.dev/analysis/https-onceupon-photo-sv-se-fotobocker/nospdaim0j?form_factor=mobile
Would really appreciate help on how to optimize!
Hi Henrik,
Here’s a detailed article on the topic, which I hope will help you address your Insight Score:
Thanks for the quick reply Stephane! I’m looking for guidance on our specific issues though 
While each site is built differently, and our recommendations can be generic, switching between mobile and desktop on the tool you used to measure performance does seem to indicate a significantly higher score on Desktop than mobile.
Here is an article which should help:
CLS is not as big of a problem as LCP is. I would really appreciate some on hands help to get this resolved
Relaying a post from my colleague @veronikapilipenko which did not publish:
My name is Veronika and I am a Customer Engineer here at Builder. I was able to take a look at the Metrics you sent over and can see that the LPC is taking 7.4 seconds to load.
I have also taken a look at the diagnostics that PageSpeed Insights provided and have gathered some ideas on optimizing site performance. Based on the metrics, the screenshot I added of the carousel is your LPC.
One way we can look into optimizing the carousel is utilizing responsive layouts and ensuring that the carousel is responsive to different screen sizes. You can use attributes such as aspect-ratio and object-fit to maintain the image’s aspect ratio and adjust the image scaling. This prevents layout shifts that might adversely affect user experience and performance. Another way to try and do this this is by implementing the srcset attribute to serve appropriately sized images based on the user’s device, which would improve latency.
Another thing you can do for image content to use attributes such as lazy loading (loading=“lazy” ) and fetchpriority="low” for non-critical images. This will improve initial load times. I can see the carousel has an attribute of fetchpriority="high" meaning it’s important, but perhaps the other content on the page can have lower priority, improving performance.
Also, are you using any third-party scripts in your application? Using web-workers can help free up the main thread for rendering critical issues.
Some other things to consider may be to use the defer attribute to delay the execution of non-essential JS, allowing main content to load first.
Another thing to look out for are hydration errors - which can negatively impact your page performance by forcing client-only rendering. One of the biggest performance gains you can achieve is by using SSR (server side rendering). Since SSR pre-renders content on the server, this reduces the load on the client’s side and improves initial load times.
Let me know if you try any of these and have any further questions, I’m happy to continue digging into this for specific use cases and if you have any other LPC that you feel is slowing down site performance, I’m happy to look into that as well.
Thank you,
