Performance optimization ensures smooth transitions, responsive interactions, and reliable long-running operation. SpinetiX players are purpose-built for digital signage — they handle typical content beautifully. Performance issues arise from content that exceeds the player's capabilities: oversized images, complex animations, multiple simultaneous videos, or JavaScript memory leaks. The fix is always in the content, not the hardware.
Optimization Areas
Image Optimization
- Resize images to target resolution: 1920×1080 for HD screens — not 4000×3000
- JPEG at 80–90% quality for photos (visually identical, 50%+ smaller)
- Use SVG for logos, icons, and geometric graphics (smaller, scalable, crisp)
- Remove EXIF metadata from images (unnecessary data adds file size)
Animation Performance
- Use CSS transforms (translate, scale, rotate) — hardware-accelerated
- Avoid animating layout properties (width, height, top, left) — triggers reflow
- Limit simultaneous animated elements to 5–10 on screen
- Use opacity transitions for fade effects — very lightweight
Video Optimization
- One video zone maximum at full quality — two videos double the decode load
- H.264 codec at 8–15 Mbps for 1080p (optimal quality/performance)
- Pre-encode to exact display resolution — no runtime scaling
- Constant frame rate (CFR), not variable (VFR)
Memory Management
- Avoid JavaScript memory leaks — clear timers, event listeners, and data arrays
- Limit data feed history in templates — don't accumulate indefinitely
- Schedule weekly proactive reboots if running complex JavaScript content
- Monitor memory usage via REST API — alert above 85%
Performance Checklist
| Check | Target | Impact |
|---|---|---|
| Image resolution | Match display (1920×1080) | 50%+ memory reduction |
| Image format | JPEG photos, SVG graphics | Smaller files, faster load |
| Video codec | H.264, 10 Mbps | Smooth hardware decode |
| Animation method | CSS transform / opacity | Hardware-accelerated rendering |
| Simultaneous videos | Maximum 1 at full quality | Prevent decode overload |
| JS memory cleanup | No leaks, bounded arrays | Stable long-running operation |
Key Parameters
| Parameter | Value | Why It Matters |
|---|---|---|
| CPU target | Under 60% average | Headroom for transitions |
| Memory target | Under 70% usage | Prevents OOM issues |
| Image target | Display resolution exactly | No wasted decode/memory |
| Animations | CSS transform-based | GPU-accelerated, smooth |
Common Mistakes
- Using Photoshop files directly. Raw PSD/TIFF files are 10–100× larger than optimized JPEGs. Export assets at target resolution and appropriate quality before adding to projects.
- Complex SVG with hundreds of nodes. A detailed SVG illustration with 500+ paths overwhelms the renderer. Simplify SVGs — reduce node count, flatten layers, and remove invisible elements.
- Running multiple data feeds at high frequency. Ten data feeds each polling every second creates constant network and parsing load. Stagger feed intervals and use appropriate refresh rates (15 minutes for weather, 5 minutes for news).
- No performance testing before deployment. Content that looks smooth in Elementi preview may perform differently on the player. Always test on an actual player before deploying to production screens.
SpinetiX Reference
Content optimization, performance monitoring, and best practices.