Use Replay data to advise users how to optimize <head> element #67146
Description
Problem Statement
How you order elements in your HTML <head> element can have an effect on the (perceived) performance of the page. A newly released library, capo.js helps identify which elements are out of order, so you can fix those performance issues.
https://rviscomi.github.io/capo.js/ is released under the Apache 2.0 License.
Thanks to @timfish for showing me capo!
Solution Brainstorm
We have access to the information about <head> element in Replay data + we can connect that replay data to pageload transactions/resource spans.
We should use capo.js + replay data to advise people how restructure <head> so that it becomes more performant.
Options:
- Make it a new tab in replay details page
- Make it a performance issue that gets generated
- Make it a breadcrumb similar to hydration errors
Product Area
Replays