Embedding HTML5 Games Without Hurting Your Core Web Vitals

A game is the heaviest thing most pages will ever load. A script bundle, textures, sound and often an ad request all come in with it. Added carelessly, an embed can drag down the page that is supposed to benefit from it. Our guide to adding an embed covers the markup. This one covers how to keep the page fast once it is there.

The three numbers Google reports

• Largest Contentful Paint (LCP): how quickly the main content appears. Under 2.5 seconds counts as good.
• Cumulative Layout Shift (CLS): how much the page jumps while loading. Under 0.1 counts as good.
• Interaction to Next Paint (INP): how quickly the page responds to taps and clicks. Under 200 ms counts as good.

Games affect all three, and not equally. They rarely become the LCP element themselves, but they compete for bandwidth and processing with the image or heading that is. They are the most common cause of layout shift, and a running game can keep the main thread busy enough to hurt INP.

Reserve the space so nothing jumps

Layout shift happens when an iframe appears and pushes the text below it down. The fix is to give the box its size before the game loads. Wrap the iframe in a container with an aspect ratio, as in the snippet from the partner documentation, so the space exists from the first paint. Landscape games fit a 16:9 box. Portrait games need a tall box with a maximum height, and the catalog lists the orientation of each game so you can choose the right container per game.

Do the same for anything you place beside the game: ad slots, a title row, a related-games strip. If an element's height depends on content that has not loaded, give it a minimum height.

Load the frame late

The cheapest game is the one that is not loaded yet. Add loading="lazy" to the iframe so the browser waits until the visitor scrolls close. For a game that sits at the top of the page, go one step further and use a click-to-play pattern: show a static image and a play button, and create the iframe only after the click. The page then loads like a normal article, and the game costs nothing for visitors who never press play.

If you do load the game immediately because it is the point of the page, add a preconnect hint to the game's host so the connection is ready before the iframe asks for it, and keep other heavy scripts off that page.

One active game per page

A page listing twenty games should not run twenty iframes. Show thumbnails or a card for each game and open one player at a time, either on the same page after a click or on a dedicated game page. Several running games on one page multiply memory use and make the page feel sluggish on a phone.

Keep the main thread free for taps

An iframe from a different origin runs in its own process in modern browsers, which helps, but your page still has to handle scroll, taps and its own scripts. Avoid adding heavy listeners to the page around the game. Test a real phone: scroll past the game, tap a menu and read the page while the game is running. If those feel slow, pause the game when it leaves the screen or when the visitor taps elsewhere.

Measure with real users, not just a lab test

PageSpeed Insights shows two kinds of data. The lab result is a simulated load on a mid-range phone. The field data comes from real Chrome visitors over the last 28 days. Run the lab test on the page with the game, change one thing at a time and compare. Then check the Core Web Vitals report in Search Console after a few weeks to see whether real visitors agree.

A short checklist

• The iframe sits in a container with an explicit aspect ratio or fixed size.
• <code>loading="lazy"</code> is set, or the game loads on click.
• The iframe has a descriptive <code>title</code> and keeps the permissions from the copied snippet, such as fullscreen and gamepad.
• Only one game is active on a page.
• Nothing near the game changes height after load.
• You have measured the page with and without the game and written down the difference.

Once that is in place, you can judge whether the games are helping. Our guide on measuring the effect of embedded games explains how to set up that comparison.