Astro Performance Review Service

Why Astro Performance Matters

Astro promises exceptional performance through its island architecture—shipping zero JavaScript by default. But many Astro sites don’t achieve this potential due to:

• Overhydration — Using client directives when static HTML would work
• Wrong directives — Using client:load everywhere instead of client:idle or client:visible
• Bundle bloat — Shipping entire UI framework runtimes for simple interactions
• Missing optimisations — Not leveraging astro:assets, View Transitions, or prefetching

The review identifies where your Astro site deviates from optimal patterns.

What We Analyse

Island Architecture

Astro’s partial hydration is powerful but easy to misuse:

Client Directive Audit

• Inventory of all client: directives used
• Assessment of directive appropriateness
• Opportunities to downgrade (load → idle → visible)
• Components that could be fully static

Hydration Efficiency

• JavaScript shipped per page
• Framework runtime overhead
• Component-level bundle analysis
• Unnecessary hydration identification

Build Performance

Slow builds impact developer experience and deployment:

Build Analysis

• Build time profiling
• Content Collections efficiency
• Image processing overhead
• Asset pipeline optimisation

Output Analysis

• Generated file sizes
• Chunk splitting effectiveness
• Dead code elimination
• Tree shaking results

Core Web Vitals

Even fast frameworks need proper implementation:

LCP Optimisation

• Hero image loading strategies
• Above-fold content delivery
• Font loading impact
• Server response times

CLS Prevention

• Image dimension handling
• Layout stability during hydration
• Web font behaviour
• Dynamic content slots

INP Improvement

• Hydration timing impact
• Event handler efficiency
• Main thread blocking
• Interaction responsiveness

Image Handling

Astro’s image optimisation is powerful when used correctly:

astro:assets Review

• Image component usage
• Format optimisation (WebP, AVIF)
• Responsive image implementation
• Build-time vs runtime processing

Loading Strategies

• Lazy loading implementation
• Priority hints for LCP images
• Placeholder strategies
• CDN integration

Common Optimisation Opportunities

Client Directive Improvements

<!-- Before: Hydrates immediately, blocks interactivity -->
<Counter client:load />

<!-- After: Hydrates when visible, better for below-fold -->
<Counter client:visible />

<!-- After: Hydrates when browser is idle -->
<Newsletter client:idle />

Reducing JavaScript Payload

Framework-Specific Components

• Use Astro components for static content
• Reserve React/Vue/Svelte for true interactivity
• Consider lighter alternatives (Preact, Solid)

Selective Hydration

• Hydrate only interactive parts
• Keep static wrappers as Astro components
• Use client:only for client-side-only features

Content Collections Optimisation

Query Efficiency

• Filter early in getCollection calls
• Avoid processing all entries when paginating
• Cache expensive computations
• Use references effectively

Build Performance

• Minimise frontmatter processing
• Optimise schema validation
• Consider incremental builds for large sites

Image Optimisation

Using astro:assets

---
import { Image } from 'astro:assets';
import hero from '../images/hero.jpg';
---
<Image 
  src={hero} 
  alt="Hero" 
  widths={[400, 800, 1200]}
  formats={['webp', 'avif']}
/>

Integration-Specific Guidance

With React

• Use Preact compatibility for smaller bundles
• Hydrate only interactive components
• Keep layout and static content in Astro

With Tailwind

• Purge configuration review
• Critical CSS extraction
• Build-time optimisation

With MDX

• Component import optimisation
• Remark/rehype plugin efficiency
• Bundle impact of MDX features

With View Transitions

• Transition performance
• Prefetching strategy
• State preservation efficiency

What You’ll Receive

Performance Report

• Current Core Web Vitals scores
• Build time analysis
• JavaScript budget assessment
• Page-by-page breakdown

Optimisation Roadmap

• Prioritised recommendations
• Quick wins for immediate improvement
• Strategic changes for maximum impact
• Implementation guidance

Code Examples

• Specific refactoring suggestions
• Configuration improvements
• Component optimisation patterns
• Build script enhancements

Getting Started

To begin an Astro performance review, provide:

• Repository access or code archive
• Current build output and times
• Lighthouse/PageSpeed scores
• Specific performance concerns
• Deployment environment details

A quote will be provided within 24-48 hours based on project scope.