Unoptimized SVG usage
- Images & Media
Problem Summary
SVGs are scalable but can become bloated with unnecessary metadata, editor comments, and unused definitions. Unoptimized SVGs have large file sizes that slow page load, especially when embedded inline multiple times.
Performance Impact
- Larger page weight: Unoptimized SVGs can be 2-10x larger than needed
- Blocking render: Inline SVGs delay page paint
- Increased parsing time: Complex SVG DOM takes longer to process
- Cache inefficiency: Repeated inline SVG code isn’t cached
How to Detect
- PageSpeed Insights: Flags large image files
- SVGOMG: Check file size reduction potential
- Chrome DevTools Network: See actual file sizes
- GTmetrix: Identifies unoptimized images
Solutions
1. Optimize with SVGOMG
Use SVGO or SVGOMG to remove:
- Editor metadata
- Comments and hidden elements
- Unused definitions
- Precision decimals
2. Use SVG Sprites
<svg><use href="#icon-name"></svg>3. Inline Critical SVGs Only
Only embed small, frequently-used icons inline. Load others as images.
4. Set Proper MIME Type
AddType image/svg+xml .svg5. Add Expiry Headers
location ~* \.svg$ { expires 1y; add_header Cache-Control "public";}