What is shader compilation jank and how do you fix it?
TL;DR: Shader compilation jank: the first time an animation runs, the GPU compiles the shader on-the-fly, causing a 16ms+ hitch. Fix with: (1) Impeller (Flutter 3.10+ on iOS, preview on Android — pre-compiles shaders), (2) SkSL shader warm-up, (3) warm-up widgets in SplashScreen.
Full Answer
Shader compilation jank is notorious in Flutter apps. The first scroll, first Hero animation, or first animated widget causes a visible hitch because the GPU driver is compiling the shader for the first time.
Impeller (the modern fix)
Impeller pre-compiles all shaders at build time. No runtime shader compilation = no jank. Impeller is the default on iOS (Flutter 3.10+) and in preview on Android. Jank from shaders effectively disappears with Impeller.
SkSL Warm-up (legacy)
Before Impeller, the fix was to record shader usage (flutter run --cache-sksl), bundle the SkSL shader cache, and warm it up at startup. This is now mostly obsolete with Impeller.
Check if Impeller is enabled: flutter run --enable-impeller (on Android). If your iOS app still has shader jank, check if Impeller is being disabled by a platform plugin incompatibility.
Code Examples
// Impeller: zero runtime shader compilation // ShaderWarmUp: pre-compiles critical shaders at splash // SkSL bundling: records and replays GPU shader compilation
Common Mistakes
- ✗Disabling Impeller to fix a plugin incompatibility — investigate the plugin instead; losing Impeller means accepting shader jank
- ✗Warm-up with ShaderWarmUp in release mode without Impeller — only effective if you warm up the exact shaders used
Interview Tip
Shader jank was Flutter's biggest UX problem until Impeller. Show you know the history: SkSL → Impeller. Mentioning that Impeller pre-compiles shaders at build time (not runtime) shows you understand the root cause.