Performance Toolkit - Lighthouse Optimization
Everything you need to hit 100/100 Lighthouse scores consistently. Image optimization, font loading, critical CSS, bundle analysis, and Core Web Vitals monitoring.
Performance that's measured, not guessed
The Performance Toolkit gives you the tools and configurations to achieve perfect Lighthouse scores on every build. Instead of manually optimizing assets and chasing metrics, you get pre-configured pipelines that handle it automatically.
Image optimization converts and resizes assets at build time with sharp. Font loading uses the display:swap strategy with preconnect hints for Google Fonts. CSS is scoped per-component with Astro's built-in isolation, eliminating unused styles from the bundle.
Includes a bundle analyzer config for Astro that visualizes your JavaScript footprint, helping you catch regressions before they ship. Pairs perfectly with any Wumty template.
Automatic image optimization
Build-time image processing with sharp. Converts to WebP/AVIF, generates responsive srcsets, and lazy-loads below-the-fold images. Zero runtime cost.
Font loading strategy
Pre-configured font loading with display:swap, preconnect hints, and optional font subsetting. Eliminates layout shift from web fonts.
Bundle analysis
Visualize your JavaScript bundle with integrated analyzer config. Catch bloated imports and unnecessary client-side code before it ships.
Core Web Vitals monitoring
Built-in CWV reporting that logs LCP, INP, and CLS metrics. Track performance across builds and catch regressions early.
Battle-Tested
Battle-tested across real agency deployments.
Lifetime Updates
Every template update is yours forever.
Top Lighthouse Performance
Fastest sites in your market, out of the box.
Technical Specifications
Included with Single Site, Studio & Agency Kits
The Performance Toolkit is included with Single Site, Studio, and Agency Kit purchases at no extra cost. Core performance tooling is too important to be a paid add-on.
Frequently Asked Questions
Common questions about the Performance Toolkit.
Will this work with my existing Astro project?
Does image optimization slow down builds?
Can I use my own image CDN instead?
What Lighthouse score can I realistically expect?
Part of Every Wumty Template
The Performance Toolkit is included with the Single Site, Studio, and Agency Kit. Core optimizations are also in the free Starter Kit. Use alongside the SEO Toolkit for structured data and the Theme System for design tokens. See all options on the pricing page.
How It Works
The Performance Toolkit applies four optimizations that work together to produce consistent 100/100 Lighthouse scores:
Image pipeline. At build time, sharp processes every image asset - converting to WebP and AVIF formats, generating responsive srcset variants at multiple breakpoints, and applying lazy loading attributes to below-the-fold images. The first build processes all images; subsequent builds only handle new or changed files thanks to persistent caching. This eliminates the largest contributor to slow page loads without any manual image optimization work.
Font loading strategy. Web fonts are loaded with font-display: swap to prevent invisible text during load. Preconnect hints for Google Fonts are injected into the document head, reducing connection latency. For projects that need maximum performance, optional font subsetting strips unused glyphs from font files, cutting font payload by up to 80%. The result is zero Cumulative Layout Shift from typography.
CSS scoping. Astro’s per-component style isolation ensures that only the CSS needed for each page ships to the browser. Unlike global stylesheets that grow with every new component, scoped CSS keeps the stylesheet payload proportional to page complexity. Combined with Tailwind CSS 4’s improved tree-shaking, unused utility classes never reach production.
Bundle analysis. An integrated analyzer configuration generates a visual treemap of your JavaScript footprint. It surfaces bloated imports, duplicated dependencies, and unnecessary client-side code before you deploy. Running the analyzer after adding new features catches regressions early and keeps your JavaScript budget under control.
Benchmarks
Across 15+ production sites built with the Performance Toolkit, the typical results are:
| Metric | Before Optimization | With Toolkit |
|---|---|---|
| Lighthouse Performance | 55-75 | 100 |
| Largest Contentful Paint | 2.8-4.2s | 0.6-1.1s |
| Total Blocking Time | 150-400ms | 0-10ms |
| Cumulative Layout Shift | 0.12-0.35 | 0.00-0.01 |
| Total Page Weight | 1.2-3.5 MB | 180-450 KB |
These numbers come from real client deployments measured with Lighthouse CI, not synthetic lab tests. The Performance Toolkit delivers these results consistently because the optimizations are structural - they are built into the build pipeline rather than layered on as afterthoughts.