How to Add HTML5 Games to Your Website: Hosting, Iframes and Speed

An HTML5 game is a folder of web files: an HTML page, JavaScript, images and audio. That makes it easy to publish, but how you publish it has a big effect on speed, SEO and how the game feels on a phone. Here is the setup we recommend.

1. Host each game in its own folder

Upload every game to its own path, such as /play/my-game/, keeping the original folder structure. Games load their assets using relative paths, so moving individual files usually breaks them.

A separate subdomain, such as play.yoursite.com, works especially well:

• Game files stay separate from your main site
• You can set caching rules for games without affecting your pages
• Each game's scripts run on a separate origin from your main pages

2. Serve the files properly

Most slow games are a hosting problem rather than a game problem. Check these settings first:

• Use HTTPS. Browsers block many features on insecure pages, and an HTTP game inside an HTTPS page will not load.
• Turn on compression. Enable Brotli or gzip for JavaScript, JSON and other text files.
• Use a CDN. Game assets are static, so a CDN can serve them from close to each player.
• Cache for a long time. Set long cache lifetimes on images, audio and script files, and change the folder or file name when you release an update.

3. Embed with an iframe

An iframe keeps the game separate from your page, so its code and styles cannot interfere with your site.

<iframe
  src="https://play.yoursite.com/my-game/"
  title="My Game"
  allow="autoplay; fullscreen"
  allowfullscreen
  width="800"
  height="600"
></iframe>

Two details matter here:

• Always include a descriptive title, because screen readers use it to announce the frame.
• Set a size or an aspect ratio in CSS, so the page doesn't jump as the game loads.

To keep the frame responsive, use the aspect-ratio CSS property with width: 100%. Portrait games need a different ratio from landscape ones.

4. Load the game on click

This is the single biggest speed win on a game page. Instead of loading the iframe with the page, show a cover image and a play button, then create the iframe when the player clicks.

playButton.addEventListener("click", () => {
  const frame = document.createElement("iframe");
  frame.src = "https://play.yoursite.com/my-game/";
  frame.title = "My Game";
  frame.allow = "autoplay; fullscreen";
  gameBox.replaceChildren(frame);
});

Your page then loads only one image at first, not megabytes of game assets. It also means audio won't start until the player has interacted with the page, which browsers require in most cases anyway.

5. Check it on a real phone

Desktop testing misses most of the problems players actually hit. On a real mid-range phone, check that:

• The game fits the screen without scrolling or zooming
• Touch controls respond, and page scrolling doesn't interfere with them
• Fullscreen works, or that you have a sensible fallback (support varies on iPhones)
• Sound starts after the first tap
• The game recovers when the player switches apps and comes back

6. Give each game a real page

The game itself is mostly invisible to search engines, so the page around it does the SEO work. Each game page should have:

• A unique title and a description you wrote yourself
• A cover image with useful alt text
• Instructions, screenshots and related games
• Structured data, such as the VideoGame type

Aim for good Core Web Vitals on these pages: LCP under 2.5 seconds, INP under 200 milliseconds and CLS under 0.1. Loading the game on click makes these targets much easier to reach.

7. Add your ads and analytics

If you license a game with its source code, your developer can add your ad and analytics SDKs directly. Fire events for game start, level complete and ad views, so you can see which games actually keep players.

Want games that are ready to publish? Browse our catalog, where every game includes HTML5 builds, source files and thumbnails, or see how licensing works.