The recent Afitpilot Lite performance fix was a breakthrough. Early test builds of Afitpilot Lite suffered from extreme slowdowns, with loading times stretching over two minutes.
“It takes over two minutes to load, then just hangs on a white screen.”
For a product built on speed and adaptability, this was unacceptable. Lighthouse wouldn’t even register a First Contentful Paint (FCP). We were staring at the dreaded NO_FCP error. Something was fundamentally broken.
The Symptom: White Screen of Death
- Loading screen stuck on “Loading Afitpilot™ Lite…”
- No network requests firing
- No visible errors in the console
- Lighthouse failing outright
It looked like the app wasn’t even starting.
The Culprit: Tailwind CSS
After digging deeper, we realized JavaScript was fine — the Vue app was trying to mount, but CSS was blocking everything.
Specifically, this in /web/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
Vite’s PostCSS pipeline was hanging indefinitely when processing Tailwind. That meant no CSS, no DOM paint, and no app.
The Afitpilot Lite Performance Fix Explained
The key to the Afitpilot Lite performance fix was replacing Tailwind directives with manual utilities:
- Manual Utility Classes
- We wrote out only the CSS utilities the app actually uses.
- Same utility-first style, but no compilation step.
- Async CSS Loading
- CSS imports now load asynchronously so the app never blocks.
- Extra Optimizations
- Lazy loading for heavy Vue components.
- Timeout protection for network requests.
- Smarter Google Fonts loading (preload + preconnect).
- Firebase auth delayed by 100ms so it doesn’t block the UI.
Results: Instant App
The Afitpilot Lite performance fix reduced loading times from two minutes to under five seconds.
Before:
- Load time: 2+ minutes
- FCP: Never
- User experience: dead white screen
After:
- Load time: < 5 seconds
- FCP: immediate
- User experience: styled, responsive app right away
Lessons Learned
- CSS can kill performance. Don’t assume it’s just “styling.”
- Tailwind is powerful, but not free. If PostCSS hangs, your entire app goes with it.
- Always isolate imports when debugging. CSS was the last thing we expected.
- Non-blocking everything. Fonts, auth, requests, CSS — nothing should stop your app from rendering.
Why This Performance Fix Matters for Afitpilot Lite
In an adaptive coaching app like Afitpilot, trust is everything. If athletes open the app and see a two-minute white screen, they’re gone. Fixing this bottleneck didn’t just improve load times — it made the product usable.
🔧 Technical takeaway: Sometimes the simplest solution (plain CSS) outperforms the trendy one.
🚀 Product takeaway: Never let performance slip below user expectations. Reliability is the first feature.
Leave a Reply