Asset Surgeon: 297KB → 3KB in 1-2 Hours
Surgical precision for asset optimization. Icon font → SVG migration delivers 95-99% file size reduction and +8-10 PageSpeed points. Proven on Optymizer.com with measurable, dramatic results.
Icon Font → SVG Migration: 95-99% Reduction
Most websites load entire icon font libraries (200-400KB) to use 15-20 icons. Asset Surgeon surgically extracts only the icons you need as inline SVGs, delivering dramatic file size reductions.
Before
<link href="material-icons.woff2" />
<span class="material-symbols-outlined">
menu
</span>After
<IconSVG name="menu" />
// Component: inline SVG
// Only loads icons used on pageComplete Asset Optimization Capabilities
Icon migration is the signature move, but Asset Surgeon handles all asset optimization with surgical precision.
Icon Font → SVG Migration
Surgical extraction of used icons from Material Icons, Font Awesome, or custom icon fonts. Creates reusable SVG components.
WebP Image Conversion
Convert PNG/JPG images to WebP with JPEG/PNG fallbacks. Maintains quality while reducing file size 25-35%.
CSS Tree-Shaking
Removes unused CSS rules, dead code, and duplicate styles. Scans all templates to identify used classes.
Font Optimization
Subset custom fonts to include only used characters. Converts to woff2 format. Preload critical fonts.
Lazy Loading
Implement native lazy loading for images and iframes. Defer offscreen content until needed.
Asset Compression
Optimize SVG files, minify CSS/JS, enable Brotli/Gzip compression. Reduce asset payload across the board.
How Asset Surgeon Works
Surgical precision with short QA loops. Works with qa-sentinel for safety validation.
Asset Audit & Analysis
Scans codebase to identify all assets: icon fonts, images, CSS files, custom fonts. Analyzes usage patterns and identifies optimization opportunities.
// Scan for icon usage
grep -r "material-symbols-outlined" src/
grep -r "fa-" src/
// Result: 23 unique icons found
// Material Icons font: 297KB loaded
// Efficiency: 1.15% (23/2000 icons used)Surgical Implementation
Creates optimized replacements: SVG components for icons, WebP versions of images, tree-shaken CSS. Implements with zero functional changes.
// Create IconSVG component
// src/components/ui/IconSVG.astro
<svg>{iconPaths[name]}</svg>
// Replace all instances
- <span class="material-symbols-outlined">menu</span>
+ <IconSVG name="menu" />
// Result: 297KB font → 3KB inline SVGsQA Validation Loop
Works with qa-sentinel to verify: all icons render correctly, no broken references, visual regression testing, performance metrics validation.
// qa-sentinel validation
Done: All 23 icons render correctly
Done: No console errors
Done: Visual regression: 0 differences
Done: PageSpeed: 76 → 84 (+8 points)
Done: Asset size: 297KB → 3KB (-99%)Deploy & Monitor
Deploy optimizations to production. Monitor Core Web Vitals, asset loading times, and PageSpeed scores for regression.
// Post-deployment metrics
Mobile PageSpeed: 76 → 84 (+10.5%)
LCP improvement: -1.2s
Asset requests: -1 HTTP call
Total page weight: -294KB
// ROI: $36K+ annual savingsOptymizer.com: 76 → 92 PageSpeed in 4 Hours
Asset Surgeon was deployed on Optymizer.com as part of a comprehensive performance optimization. Icon migration was the highest-impact single change.
Performance Impact
Implementation Breakdown
- • 15min: Asset audit & analysis
- • 45min: IconSVG component creation
- • 20min: Replace all icon instances
- • 10min: QA validation with qa-sentinel
Technical Implementation: IconSVG Component
Complete code example showing how Asset Surgeon replaced Material Icons font with inline SVGs.
Before: Icon Font (297KB)
<!-- Load entire font (297KB) -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"
/>
<!-- Usage in components -->
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">arrow_forward</span>- • Loads 2,000+ icons (only use 23)
- • 297KB additional HTTP request
- • Blocks rendering until font loads
- • Flash of unstyled content (FOUC)
After: Inline SVG Component (3KB)
---
// src/components/ui/IconSVG.astro
interface Props {
name: string;
className?: string;
}
const { name, className = '' } = Astro.props;
const icons: Record<string, string> = {
menu: 'M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z',
search: 'M15.5 14h-.79l-.28-.27A6.47...',
arrow_forward: 'M12 4l-1.41 1.41L16.17...',
// ... only the 23 icons we actually use
};
const path = icons[name] || '';
---
<svg
class={`inline-block ${className}`}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
>
<path d={path} />
</svg>
<!-- Usage in components -->
<IconSVG name="menu" />
<IconSVG name="search" className="text-google-blue-600" />
<IconSVG name="arrow_forward" />- • Only loads icons actually used (23 total)
- • 3KB gzipped (inline in HTML)
- • Zero HTTP requests
- • Renders immediately (no FOUC)
- • Full CSS control (color, size)
- • Type-safe icon names
Automated Migration Script
// Asset Surgeon automated this process
// 1. Find all icon usage
grep -roh 'material-symbols-outlined">[^<]*' src/ | sort -u
// 2. Extract SVG paths from Material Icons
// (Downloads from Google Fonts repo)
// 3. Replace all instances
find src/ -type f -name "*.astro" -exec sed -i '' \
's/<span class="material-symbols-outlined">\(.*\)<\/span>/<IconSVG name="\1" \/>/g' +
// 4. Remove font link from layout
sed -i '' '/material-symbols-outlined/d' src/layouts/MainLayout.astro
// Total time: ~45 minutes (mostly automated)Works With: qa-sentinel for Safety
Asset Surgeon makes surgical changes. QA Sentinel validates zero functional regressions through short QA loops.
Asset Surgeon
qa-sentinel
Short QA Loops = Fast, Safe Deployment
Asset Surgeon → qa-sentinel validation → Deploy → Monitor. Continuous feedback ensures optimizations work perfectly.
Part of 5-Phase Performance Optimization
Asset Surgeon delivers Phase 2 (Asset Optimization) in the comprehensive performance workflow.
Diagnostic
Identify performance bottlenecks
Asset Optimization
Asset Surgeon signature move
Code Optimization
JS/CSS minification, lazy loading
Infrastructure
CDN, caching, compression
Monitor
Continuous Core Web Vitals tracking
Why Sonnet Model for Asset Surgeon?
Asset optimization requires surgical precision and pattern recognition—perfect for Sonnet's balanced reasoning.
Not Haiku
Too complex for mechanical validation. Requires code understanding, pattern recognition, and surgical precision.
Done: Sonnet (Perfect Fit)
Balanced reasoning for code analysis, pattern matching, and surgical implementation. Fast enough for 1-2 hour turnaround.
Not Opus
Overkill for asset optimization. Sonnet handles pattern recognition perfectly. Save Opus for architecture decisions.
Ready for 99% Asset Reduction?
Deploy Asset Surgeon to eliminate unused assets and gain +8-10 PageSpeed points in 1-2 hours.
Content strategy and SEO by Optymizer