Improve performance

[pliant tapir]

How I could minimize main thread work with Astro?

[tame ruin]

Hi @pliant tapir. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Astro helps minimize main thread work by generating static HTML and removing unused JavaScript from your website. By default, Astro renders your site with zero client-side JavaScript. When you use frontend UI components from frameworks like React, Svelte, or Vue, Astro automatically renders them to HTML ahead of time and strips out all of the JavaScript, keeping your site fast and lightweight.

For interactive UI components that require client-side JavaScript, Astro allows you to create "islands" of interactivity. Instead of turning your entire page into a JavaScript-heavy SPA, you can selectively load JavaScript only for the components that need it using the client:load directive:

<!-- This component is now interactive on the page!  
 The rest of your website remains static and zero JS. -->
<MyReactComponent client:load />

Astro also supports features like partial hydration and automatic deferral of components until they become visible on the page with the :visible modifier:

<!-- client:visible -- low priority, only load when visible on the page -->
<MyHeavyReactImageCarousel client:visible />

By using Astro's built-in optimizations, you can minimize main thread work and improve your website's performance.

Sources:

• Why Astro? (https://docs.astro.build/en/concepts/why-astro)
• Introducing Astro (https://astro.build/blog/introducing-astro)
• Astro Islands (https://docs.astro.build/en/concepts/islands)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: