Why does PageSpeed Insights keeps returning a high TTI (Time to Interactive) for a simple game?

Question

I submitted my app/game/PWA to PageSpeed Insights and it keeps giving me TTI values > 7000ms and TBT values > 2000ms, as it can be seen in the screenshot below (the overall score for a mobile experience is around 63):

I read what those values mean over and over, but I just cannot make them lower!

What is most annoying, is that when accessing the page in a real-life browser, I don't need to wait 7 seconds for the page to become interactive, even with a clear cache!!!

The game can be accessed here and its source is here.

What comforts me is that Google's own game, Doodle Cricket also scores terribly. In fact, PageSpeed Insights gives it an overall score of "?".

Summing up: is there a way to tell PageSpeed Insights the page is actually a game with only a simple canvas in it and that it is indeed interactive as soon as the first frame is rendered on the canvas (not 7 seconds later)?

UPDATE: Partial Solution

Thanks to @Graham Ritchie's answer, I was able to detect the two slowest points, simulating a mid-tier mobile phone:

• Loading/Compiling WebAssembly files: there was not much I could do about this, and this alone consumes almost 1.5 seconds...
• Loading the main script file, script.min.js: I split the file into two, since almost two thirds of this file are just string constants, and I started loading them asynchronously, both using async to load the main script and delay loading the other string constants, which has saved more than 1.2 seconds from the load time.

The improvements have also saved some time on better mobile devices/desktop devices.

The commit diff is here.

UPDATE 2: Improving the Tooling

For anyone who gets here from Google, two extra tips that I forgot to mention before...

• Use the CLI Lighthouse tool rather than the website (both for localhost and for internet websites): npm install -g lighthouse, then call lighthouse --view http.... (or use any other arguments as necessary).
• If running on a notebook, make sure it is not running on the battery, but actually connected to a power source

Answer 1

Summing up: is there a way to tell PageSpeed Insights the page is actually a game with only a simple canvas in it and that it is indeed interactive as soon as the first frame is rendered on the canvas (not 7 seconds later)?

No and unfortunately I think you have missed one key piece of the puzzle as to why those numbers are so high.

Page Speed Insights uses throttling on the Network AND the CPU to simulate a mid-tier mobile phone on a 4G connection.

The CPU throttling is your issue.

If I run your game within the "performance" tab on Google Chrome Developer Tools with "4x slowdown" on the CPU I get a few long tasks, one of which takes 5.19s to run!

Your issue isn't page weight as the site is lightweight it is JavaScript execution time.

You would have to look through your code and see why you have a task that takes so long to run, look for nested loops as they are normally the issue!

There are several other tasks that take 1-2 seconds total between them but that 5 second task is the main culprit!

Hopefully that clears things up a bit, any questions just ask.