How to debug canvas performance

Hints

We have a little script that logs and highlights potential slow elements. They are videos, iframes, css filters, background blurs and perspective. Any combination of these can make the browser bail out of gpu rendering and slow down panning and zooming.

Debugging

Before you start

Use Chrome. We need to enable a flag that allows to record the canvas (not just the ui), because it’s on a different domain. Go to chrome://flags/#site-isolation-trial-opt-out and Disable. Restart Chrome. Verify it’s disabled like this:

General Overview

Enable these settings in your inspector.

Now do whatever you do to make it slow and watch that GPU memory. If it starts turning red you are running out of memory and weird things start to happen like things only render after a while, reduced performance animation and whole tiles don’t show up at all.

Hardcore Recording

Open your document to reproduce the slowness. Before you reproduce, load the full document, open the inspector and click the record button under the Performance tab (top left).

Now it’s time to record. You want the smallest possible recording of the exact moment of “slowness”. Ideally like 1-2s with the slow event right in the center, so we can clearly see it and dig into what’s causing it.

Reproduce your slowness and click the record button again to stop recording. Click the “Save Profile” button (arrow down or press command-s). Zip the file and attach to ticket.

This is an example:

https://www.dropbox.com/s/xbollnponhb8f00/Profile-20210706T113344.json.zip?dl=0