Building Sub-0.01ms Interactive Hubs: Lessons from Synynom Games

When the Synynom Games team approached Ryla Labs, they had a daunting technical challenge: aggregate over 300 lightweight web games into a single web portal while ensuring players experience near-zero latency from click to interactive gameplay.

In web performance engineering, a 2-second delay in initial asset loading can lead to a 50% drop in user retention. For gaming platforms, that threshold is even tighter—if a user clicks "Play", the canvas needs to initialize immediately.

The Architectural Challenge

Aggregating hundreds of third-party games presents three primary hurdles:

1. Bundle Bloat: Including asset bundles or script tags for hundreds of titles in the main bundle destroys page performance.
2. Security & Sandbox Isolation: Third-party games can leak global variable state, pollute DOM events, or run untrusted scripts if not properly isolated.
3. Cross-Device Input Consistency: Mobile touch devices and desktop keyboards emit different event lifecycles that need unified mapping.

Our Approach: The Micro-Runtime Shell

To solve these challenges, we built a lightweight, zero-dependency micro-runtime shell. Here is how it works under the hood:

1. Lazy-Loaded Dynamic Iframes with Security Attributes

Instead of executing game logic inside the top-level window context, each game is dynamically mounted into a sandboxed iframe with strict permissions (sandbox="allow-scripts allow-same-origin"). Assets for game $B$ are never fetched until the player explicitly initiates interaction.

2. Edge Preconnecting & Speculative Prefetching

When a user hovers over or scrolls past a game card in the library grid, the shell issues speculative <link rel="preconnect"> and resource hints for the game's manifest assets. By the time the user clicks "Play", DNS resolution and TLS handshakes are already complete.

3. Unified Touch & Input Normalization

We designed an input bridge that translates touch gestures, gamepads, and keyboard events into standardized motion vectors. Games plug into this bridge with a two-line configuration manifest.

// Lightweight Input Adapter
window.addEventListener('message', (event) => {
  if (event.origin !== ALLOWED_GAME_ORIGIN) return;
  if (event.data.type === 'GAME_READY') {
    initializeInputBridge(event.source);
  }
});

Results & Impact

• 0.01ms First-Frame Target: Speculative preconnecting dropped initial session start times below perception thresholds.
• Dramatically Reduced Bounce Rates: Players remain engaged because there are no spinner delays.
• Zero Cross-Game Pollution: Isolated runtime sandboxing prevents memory leaks from accumulating across multiple game sessions.

Interested in optimizing your interactive web platform or media hub? Reach out to hello@rylalabs.com to explore custom performance solutions.