Shader Warm-Up and Impeller Migration
Eliminate first-run shader jank by precompiling shaders and adopting the Impeller renderer.
Why First-Run Jank Happens
The first time a Flutter app draws a particular effect, the GPU backend has to compile the underlying shader program on the device. With the legacy Skia backend this compilation happens lazily, right in the middle of the frame that needs it.
- A shader compile can take tens of milliseconds.
- That blows the 16ms budget of a 60fps frame, producing a visible stutter called shader jank.
- It is worst on the very first run because nothing is cached yet.
Animations, page transitions, and BackdropFilter blurs are the usual culprits.
Where the Time Goes
A jank frame caused by shader compilation shows up clearly in DevTools' Performance view as a tall raster-thread bar with a ShaderCompilation event.
To reproduce and measure it reliably, run in profile mode (never debug mode, which is much slower and misleading):
- Profile mode gives release-like performance with tracing hooks.
- The DevTools timeline marks shader compile events so you can confirm the root cause before optimizing.
// Run the app in profile mode to capture realistic frame timings.
// flutter run --profile
// Then open DevTools > Performance and look for
// 'ShaderCompilation' events on the raster thread.
// flutter run --profile --trace-skiaAll lessons in this course
- The Three Trees: Widget, Element, and RenderObject
- Profiling Jank with the DevTools Timeline
- RepaintBoundary, Const Widgets, and Rebuild Pruning
- Shader Warm-Up and Impeller Migration