Project Classify pages run slower on the new platform

[eatyourgreens]

Copied over from zooniverse/Panoptes-Front-End#7096. When you measure page performance for FEM vs. PFE project classify pages, FEM pages run significantly slower in the browser (~4s execution time on desktop vs. ~2s for PFE.)

Network and CPU speeds for the measurements here:

• Desktop: Unthrottled CPU with 10,240 kbps network throughput.
• Mobile: 4× CPU slowdown with slow 4G (1,638.4 kbps throughput.)

---

We're not sure how to measure the performance hit. 🤷

Here's a couple of tools you can use, not just for this PR but to measure the performance of your code in general:

• https://webpagetest.org – Web Page Test is pretty much the industry standard performance tool (it even has an O'Reilly book.) Give it a public URL and run performance tests for a variety of devices and connection speeds. The tests include Lighthouse and Core Web Vitals.
• https://pagespeed.web.dev/ – Google's page speed tools. Runs Lighthouse tests and Core Web Vitals for a URL. If tracking data is available for that URL, you'll also be shown real browser performance numbers from tracked Chrome users. If tracking data isn't available for that specific URL, you'll be shown Google's user tracking data for the origin as a whole. I think these tools might also be available inside Chrome Dev Tools.

Here's a couple of example page speed tests for live Zooniverse projects:

• Planet Hunters NGTS (PFE classifier)
• Daily Minor Planet (FEM classifier)

Here are the performance scores from Page Speed Insights for both those pages. To be honest, both Zooniverse React apps are so slow that I suspect any additional slowness introduced by Dan Abramov's patch will be negligible by comparison. The DOM size is reasonably small for both, too.

App	Mobile	Desktop	JS execution (mobile)	JS execution (desktop)	DOM size
Panoptes Front End	7%	21%	8.1s	1.8s	366
Monorepo	26%	32%	11.7s	3.9s	586

Also: kind of interesting that the new classifier is significantly slower to run on both desktop and mobile. I would have expected it to be faster.

Originally posted by @eatyourgreens in zooniverse/Panoptes-Front-End#7096 (comment)

[eatyourgreens]

An FEM project team page executes in ~1.5s in the browser (roughly the same speed as PFE.) It seems like the slowness here is specific to the new classifier.

[eatyourgreens]

Page build time is ~0.7s for the Daily Minor Planet Classify page, so the page must be taking ~3s to run in the browser, after loading.

httpstat https://www.zooniverse.org/projects/fulsdavid/the-daily-minor-planet/classify/workflow/22354
Connected to 2620:1ec:bdf::64:443 from 2a02:c7c:5ca8:d000:c04e:87eb:e15:f722:59742

HTTP/2 200 
date: Fri, 14 Jun 2024 13:35:44 GMT
content-type: text/html; charset=utf-8
content-length: 90662
vary: Accept-Encoding
vary: Accept-Encoding
vary: Accept-Encoding
vary: Accept-Encoding
x-powered-by: Next.js
cache-control: s-maxage=60, stale-while-revalidate
x-middleware-rewrite: /projects/en/production/fulsdavid/the-daily-minor-planet/classify/workflow/22354
x-nextjs-cache: STALE
etag: "l1ri0n8gx71xyc"
strict-transport-security: max-age=15724800; includeSubDomains
x-content-type-options: nosniff
content-security-policy: frame-ancestors 'self'
x-content-security-policy: frame-ancestors 'self'
x-xss-protection: 1; mode=block
x-azure-ref: 20240614T133543Z-15c597bb4f4cqjmkp8bkpwmbw8000000027g00000000h6yd
x-fd-int-roxy-purgeid: 70937748
x-cache: TCP_MISS
accept-ranges: bytes

Body stored in: /var/folders/kp/bltzlkm10fqbm_01nz7c55y80000gn/T/tmpt1fqvwax

  DNS Lookup   TCP Connection   TLS Handshake   Server Processing   Content Transfer
[    36ms    |       8ms      |     37ms      |       640ms       |       19ms       ]
             |                |               |                   |                  |
    namelookup:36ms           |               |                   |                  |
                        connect:44ms          |                   |                  |
                                    pretransfer:81ms              |                  |
                                                      starttransfer:721ms            |
                                                                                 total:740ms

[eatyourgreens]

Styled components are a big part of slow performance in the browser, since they have to compute the classifier's inline styles on-the-fly, see #3380.