Optimizing Custom Components for Better Core Web Vitals Performance on Pages

Technical Questions
1

Hello,
I’m experiencing performance issues on my Builder.io pages, with Core Web Vitals scores significantly lower than my non-Builder pages, where I consistently get 90+ and green scores.

I suspect the issue is related to the many custom components I use on my Builder pages. Currently, I’m loading these components using defineAsyncComponent to improve performance, but I feel this approach might still be causing delays or unnecessary overhead.

Is there a recommended way to optimize these components further? For instance:

Can components be loaded more selectively, only when they are needed for rendering?
Are there other techniques or best practices specific to Builder.io and Vue for improving page performance while using custom components?

Any advice or insights would be greatly appreciated. Thank you!

1 Like
2

Hi Behzad​,

Thank you for contacting Builder.io Support! I look forward to helping you with your request.

While I start looking into this, feel free to share any additional information you think might be relevant. Your input is important to helping ensure that I understand and respond to your concerns effectively.

Thanks,

3

Hello Behzad,

We have this documentation with best practices for good performance:

Could you check these recommendations?

Let us know how it goes.

Thank you,

1 Like
4

:wrench: Builder.io Performance Optimization Tips

:rocket: 1. Improve Page Load Times

  • Use Static Site Generation (SSG) via Next.js/Nuxt.
  • Lazy-load images and non-critical content.
  • Use Builder’s Image component for auto-optimized images.

:chart_decreasing: 2. Reduce JavaScript & CSS Size

  • Avoid large or unnecessary custom components.
  • Use tree shaking and dynamic imports.
  • Remove unused CSS (use PurgeCSS or Tailwind optimizers).

:card_index_dividers: 3. Caching Strategies

  • Enable Incremental Static Regeneration or edge caching.
  • Cache API responses and use CDNs for static assets.

:gear: 4. Optimize Dynamic Content

  • Use targeting sparingly to avoid extra JS.
  • Use Symbols and content scheduling to avoid page duplication.

:bar_chart: 5. Third-Party Scripts

  • Always load third-party scripts async/defer.
  • Use lightweight analytics (e.g., Plausible), or server-side GTM.