Figure out how to test front end performance

### Description

Using solid js as our reactive library simplifies the state management of the front end code, but means it's quite easy to regress and update too frequently. This will continue to work functionally and so all our automated and manual testing will pass, it's likely that the performance will slowly degrade over time unless we catch the regression.

Figure out how to determine how much work is being done when the UI is updated. If possible, automate this check so we can pick up regressions early.

There has been a lot of functionality added to text ranges recently, (eg: markdown, images in labels, and output in translation text) which may have already regressed. Check this by running the new test against each of these revisions.

---

### Checklist
- **Does it need UI/UX design?**
- [ ] Yes. Describe the UI/UX requirements or attach a Figma link in the "Design" section.
- [x] No
- **Does it need API design?**
- [ ] Yes. Specify the endpoints, methods, or data structures needed.
- [x] No
- **Does it need design around state flow?**
- [ ] Yes. Outline the state flow requirements.
- [x] No
- **Does it need a test plan?**
- [ ] Yes. Add the test plan as a comment in this task or attach the document.
- [x] No
---

### User Stories

- **As a** web forms developer,
**I want** to test performance,
**so that** I can be confident I haven't broken anything.

### Additional Notes

Look into [solid-devtools](https://github.com/thetarnav/solid-devtools) which may help count updates.

No files or tests are named. Start by evaluating solid-devtools for counting Solid updates, then inspect the existing text-range behavior for markdown, images in labels, and output in translation text. Done means defining a repeatable performance check and using it to detect regressions across those revisions.

Written by the indexing model from the issue text.