Boss: Make it fast

Play this quiz

Read the numbers

Shard Garden, phones, 75th percentile
LCP   2.1 sINP   380 msCLS   0.04

Which number needs work first?

  1. INP
  2. LCP
  3. CLS
Show the answer

INP

Good INP is 200 ms or less, so 380 ms needs improvement. LCP is under 2.5 seconds and CLS is under 0.1, so both are already good.

Quick check

Players using Chrome on an iPhone are included in CrUX, Google's field data.

Show the answer

False

CrUX leaves out Chrome on iOS. Our own real user monitoring, with a library like web-vitals, is how we see those players.

Quick check

The LCP breakdown shows a 1.9 second resource load delay for the key art. What is the likely cause?

  1. The key art has loading="lazy" or is only set in CSS, so the browser starts it late
  2. The server is far away
  3. The image is drawn on a canvas
Show the answer

The key art has loading="lazy" or is only set in CSS, so the browser starts it late

Load delay is the wait before the image download even starts. A lazy LCP image or one hidden in CSS starts late; fetchpriority="high" on a real img fixes it.

Quick check

Cache-Control: no-cache tells browsers never to store the file.

Show the answer

False

no-cache lets the file be stored but checked with the server before each reuse. Never storing it is no-store.

Bug hunt

loop.js
function frame(now) {  for (const s of shards) {    s.y += 3; // pixels  }  draw();  requestAnimationFrame(    frame);}

Shards drift twice as fast on 120 Hz phones. Which line is the bug?

  1. Line 3
  2. Line 5
  3. Line 6
Show the answer

Line 3

Line 3 moves a fixed amount per frame, so more frames mean more speed. Movement should use the time since the last frame.

Quick check

A 2048 by 2048 texture is decoded as RGBA8 (4 bytes per pixel). About how much GPU memory does it take, without mipmaps?

  1. 16 MB
  2. 4 MB
  3. The same as its AVIF file
Show the answer

16 MB

2,048 times 2,048 is about 4.2 million pixels, times 4 bytes is about 16 MB, whatever the download size was. GPU compressed formats like those from KTX2 and Basis need far less.

Player message

#bug-reports, @shardsprout
Game is smooth at first but gets choppy after 20 minutes, and my phone gets really warm.

What should the studio build?

  1. Read the phone's thermal headroom or thermal state, and lower frame rate and effects before it throttles
  2. Raise the frame rate so the game feels faster
  3. Show an error asking the player to cool their phone
Show the answer

Read the phone's thermal headroom or thermal state, and lower frame rate and effects before it throttles

This is thermal throttling. Android's thermal headroom and the iPhone's thermal state let the game step down to a level the phone can keep up for a whole session.

Pick the test

A streamer will send thousands of players to Shard Garden in about five minutes. Which load test copies that?

  1. A spike test
  2. A soak test
  3. A smoke test
Show the answer

A spike test

A spike test checks a sudden, short, massive jump in activity. A soak test runs normal load for hours, and a smoke test uses just a few users.