Mobile performance is not optional for casino slots in 2024. Over 70% of Australia online casino sessions happen on mobile devices, and mid-range Android handsets — not iPhones — represent the median device. If your slot can't hit 80+ on Google Lighthouse mobile, you're losing players to competitors every day.
Here are the specific optimisations we apply to every slot we ship that consistently get us above 80 without compromising visual quality.
1. Asset Pipeline: The Biggest Win
Asset weight is the number one performance killer in slot games. Our target is a maximum 8MB initial load on mobile, with deferred loading for win animations and bonus features. Steps we take:
- WebP everywhere with PNG fallback — WebP delivers 25–35% smaller files with identical visual quality
- Sprite atlases — all symbols packed into a single atlas reduces HTTP requests from 20+ to 1–2
- TexturePacker with "allow rotation" and "trim" enabled — typically saves another 15–20% on atlas size
- Audio: OGG with MP3 fallback, compressed to 96kbps for ambient loops, 128kbps for win fanfares
2. Lazy Loading Bonus Assets
Bonus feature art — free spin backgrounds, jackpot celebration assets, pick-and-click screens — is typically not needed until triggered. We load these assets asynchronously after the initial game load completes, using a background preloader that runs silently during idle frames. If a bonus triggers before preloading finishes, we show a brief loading indicator (which also creates dramatic pause before the bonus reveal).
3. Critical Rendering Path
For the HTML loader/wrapper page:
-
Inline critical CSS (loading screen styles) in the
<head> - Defer all non-critical scripts
- Preload the first sprite atlas and the game engine script
-
Use
font-display: swapfor any custom fonts
4. RequestAnimationFrame Discipline
Every animation in our games runs through a single master
requestAnimationFrame loop. We never use
setInterval or setTimeout for visual
updates. The master loop checks whether the page is visible
(using the Page Visibility API) and pauses all animation when
the tab is backgrounded — a significant battery saver that
players notice.
5. GPU Layer Promotion
For elements that animate frequently (reel strips, win line
highlights, particle systems), we promote them to their own GPU
compositing layer using will-change: transform.
This prevents the rest of the canvas from being redrawn on every
frame. Used judiciously, this is one of the highest-leverage
performance optimisations available.
6. Target Device Testing
We test on physical devices, not just Chrome DevTools emulation. Our mobile test matrix includes: Samsung Galaxy A52 (Android 12), Xiaomi Redmi Note 11 (Android 11), iPhone SE 3rd gen (iOS 16), and iPhone 14 (iOS 16). Lighthouse scores are measured on the Galaxy A52 as our "must pass 80" baseline.
"A slot that loads in 1.8 seconds and runs at 58fps on a mid-range Android is worth more commercially than a slot that scores 95 on desktop and stutters on the device your median player is actually using." — Lucas Beaumont, Lead Designer
Typical Results
Applying all of the above consistently produces Lighthouse mobile scores between 82–91 for our production slots, with LCP (Largest Contentful Paint) under 2.2 seconds on 4G and FID (First Input Delay) under 80ms. These scores hold even for our most visually complex WebGL titles.
If you want us to audit your existing slot's mobile performance or architect a new title for optimal mobile scores, let's talk.