[TRACKING] Benefits web performance improvements

[machikoyasuda]

Tickets

The overall goal is to make the homepage (and by extension all pages) load faster on mobile devices, as tested on Google Lighthouse testing and WebPageTest.org, through the following methods:

• [ ] Remove CA State Web Template https://github.com/cal-itp/benefits/issues/2491
• [x] Improve performance of homepage image: https://github.com/cal-itp/benefits/issues/2490
• [ ] Audit and improve font file performance : https://github.com/cal-itp/benefits/issues/2492
• [ ] Audit blocking resources: https://github.com/cal-itp/benefits/issues/2493
• [ ] Compress/Minifying CSS:

---

Testing

This is a side-by-side comparison I made on WebPageTest.org showing how the site reders with some of the performance fixes listed below, versus how it renders now on a Mobile device:

Lighthouse

Full results: https://pagespeed.web.dev/analysis/https-benefits-calitp-org/rqzk6itbxm?form_factor=mobile

Web Page Test

Full results: https://www.webpagetest.org/result/241029_BiDcSX_ARH/ Suggestions: https://www.webpagetest.org/result/241029_BiDcSX_ARH/2/experiments/

[machikoyasuda]

Wrote this out for @angela-tran so she can add this to the list of front-end fixes we are considering for Q4! Definitely don't think we need to do all of them, but I thought it would be interesting to:

• Benchmark the current app
• Remove CA State Web Template from the app
• Benchmark the app after State Web Template is removed
• Choose a fix to do
• Benchmark again

And keep running these tests until we get our Time To First Byte, First/Largest Contentful Paint numbers down for the homepage. All the fixes we make for anything outside of that large image (like server response times) will help all the other pages as well.

[machikoyasuda]

More resources:

• https://openfolder.sh/django-faster-speed-tutorial
• https://github.com/django-compressor/django-compressor