Learning Astro - Performance Optimization

#Introduction

We have already built, secured, and sped up content with caching. Episode 15 finishes the performance side with a more measurable approach: profiling and data-driven optimization. You no longer guess what is slow — you measure, find, and fix.

This time we focus on four areas: profiling with browser tools and Lighthouse, reducing the JavaScript payload and minimizing hydration, preloading critical assets, and build-side optimization.

The philosophy of this episode is simple: measure first, optimize after. Optimization without measurement often just wastes time.

#Profiling with Browser Tools and Lighthouse

#Lighthouse as a Starting Point

Lighthouse is a performance audit tool built into Chrome DevTools. Open the Lighthouse tab, choose Navigation mode, and run an audit on a built page:

npx lighthouse https://situs-kalian.dev --only-categories=performance

The command npx lighthouse https://situs-kalian.dev produces a full performance score with fixes recommended in order of impact.

#Reading Web Vitals

Pay attention to the three core metrics:

• LCP (Largest Contentful Paint): when the largest content becomes visible — target under 2.5 seconds.
• CLS (Cumulative Layout Shift): layout stability — target under 0.1.
• INP (Interaction to Next Paint): interaction responsiveness — target under 200 milliseconds.

If LCP is high, check images and critical assets. If CLS is high, check elements without dimensions. If INP is high, check JavaScript hydration.

#Reducing JavaScript Payload and Minimizing Hydration

#Auditing with Coverage

DevTools has a Coverage panel that shows how much JavaScript code is actually used. Run the page, open the Coverage tab, then reload. The red bars show code that was downloaded but never executed — the main optimization target.

#Applying the Fewer Islands Principle

Use this audit to find components that turned out not to need hydration. Some practical steps:

• Replace client:load with client:visible for below-the-fold elements.
• Replace framework components with static Astro components when there is no real interactivity.
• Use client:idle so hydration does not interfere with the main load process.

Menghapus hydration yang tidak perlu

---
import Statistik from "../components/Statistik.tsx";
---
 
<Statistik client:visible />

Changing a single attribute from client:load to client:visible can significantly cut the payload for elements that are rarely seen.

#Preloading Critical Assets and Resource Prioritization

#Identifying Critical Assets

Use the Performance panel with CPU throttling to see which assets hold up rendering. Critical assets are usually: initial CSS, fonts, and the hero image. Prioritize them with resource hints:

<link rel="preload" href="/hero.avif" as="image" />
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />

<link rel="preload" as="image"> fetches the hero earlier, and font preload avoids FOUT (flash of unstyled text). Preload only for above-the-fold assets — too much preload actually clogs things up.

#Help from Astro

Astro handles much of this automatically: CSS is inlined when small, images from astro:assets get dimensions and lazy loading, and @astrojs/prefetch handles navigation. Your job is to make sure the audit shows no remaining bottlenecks.

#Build-Time Optimization and Incremental Builds

#Build-Side Optimization

Some heavy work can be moved to build time:

• Compute statistics, article lists, and indexing in getStaticPaths.
• Pre-render pages that rarely change.
• Use cached queries for data from APIs.

The more that is done at build, the lighter the runtime.

#Incremental Builds

Platforms like Vercel support incremental builds — only changed pages are rebuilt. For large projects with thousands of pages, this speeds up deployment from minutes to seconds. Combine it with the caching from episode 14 so users see no change during the process.

#Measure Before and After

Save the Lighthouse score before optimizing, then compare afterward. A real change only counts if it is measurable: LCP goes down, payload shrinks, and the score rises. This measuring habit is what separates serious optimization from mere guesswork.

#Conclusion

Episode 15 teaches data-driven performance optimization: profiling with Lighthouse and DevTools, reducing the JavaScript payload and minimizing hydration, preloading critical assets, and build optimization with incremental builds.

The key takeaways:

• Measure with Lighthouse and Web Vitals before optimizing.
• The Coverage panel finds code that is downloaded but unused.
• client:visible and client:idle reduce hydration payload.
• Preload only above-the-fold assets, not everything.
• Move heavy work to build time.
• Always compare scores before and after optimization.

In the next episode 16, we will cover testing and quality: unit testing components and content pages, integration testing with Playwright or Cypress, static analysis and linting, and accessibility testing and SEO audits. Your site's quality will be proven, not just promised.