Shipping a production-ready Flutter Web app requires going beyond default settings. This guide covers renderer selection, deferred imports, image optimization, profiling, and build-time optimizations — all with practical code examples.

1. CanvasKit vs HTML Renderer

Flutter Web ships two renderers. Picking the right one is the highest-leverage decision you can make.

Aspect CanvasKit HTML

Rendering quality High (Skia) Medium (CSS/SVG)

Initial bundle size +~1.5 MB Smaller

Animation smoothness Excellent Limited

Text rendering Consistent OS font dependent

SEO friendliness Hard Easier

# Development — specify renderer flutter run -d chrome --web-renderer canvaskit flutter run -d chrome --web-renderer html

# Production builds flutter build web --web-renderer canvaskit --release flutter build web --web-renderer html --release

# auto: CanvasKit on desktop, HTML on mobile flutter build web --web-renderer auto --release

# WASM compilation (Flutter 3.24+, experimental) flutter build web --wasm…