Identifying the full attribution target in CWV Widgets
By Philip Tellis on
Table of Contents
A few months ago we announced new Core Web Vitals widgets in mPulse, and we received some good feedback on these widgets. We've just pushed out new versions of these widgets that address some of this feedback.
In this post I'll cover the most requested feature - better visibility for attribution.
The problem
The image above shows what the LCP By Url widget looks like when viewed in mPulse. If a URL is too large, then the middle portion is replaced with ellipses which makes it hard to determine the full URL of the LCP element. We see similar issues with CSS selectors as well if they exceed a certain length.
The problem arises from the way C3 renders labels that are too long. It resizes a label to fit within the available space, replacing the middle section with ellipses. This replacement has additional problems, where if two labels were unique only in the portions that were replaced, then they were no longer unique after replacement, and C3 loses its ability to differentiate between them at that point.
Due to these problems, we prefer to do our own ellipses replacement to maintain uniqueness of the labels after replacement, which in turn means that the DOM no longer includes the original label text.
We had to figure out a way to get the original text back into the DOM.
Potential solutions
Our first solution was to show a tooltip when hovering over the element label in the chart, however the charting library we use did not support this method, and we weren't about to switch to a new charting library. The tooltip solution also suffers from the problem that you cannot easily copy the text out of the tooltip -- you'd have to inspect the DOM and copy the text out of there.
A second option was to allow clicking on the label to copy the full text to the clipboard. This solution isn't workable at the moment because of separation of concerns. The backend of our widgets can only pass data over to the frontend, and it's the frontend's responsibility to render that data as necessary. In order to make labels copy-on-click, we'd have to change the C3 library code which would affect all widgets. This was also not a possibility at this time.
Another option was to expand the text itself on a mouseover. We tried using the CSS content property to replace the label text in the :hover
state, however it turns out that the SVG TSPAN element does not support content replacement. We'd also be stuck with the same copy/paste problem
as the tooltip, however that gave us an idea.
Final solution
Since our potential solutions would require the user to inspect the DOM in order to copy the full text out, we decided to at least make it possible to do that while we figure out other alternatives.
The result is that we use the CSS content property to specify the full text of the label knowing that browsers will ignore it because this property
does not work on TSPAN elements. If at some point browsers start supporting it, then the full text will display in the label, which would also be
an improvement.
So, if you use your browser's DOM inspector, to inspect the label that you're interested in, you'll see the actual element is a TSPAN with the trimmed
label, and you'll also see that the CSS content property for this element contains the full text that's also easy to copy.
We figured that anyone interested in the full URL or the CSS selector for the element is most likely a developer with knowledge of the browser's DOM inspector. We realize that it's a bit of an extra step to get to this information, but on the flip side, this makes it easier to copy the text.
We hope this makes the widgets a little more useful.
Other improvements
Most of the other improvements to the widgets should go unnoticed (if we've done our jobs right). They fix edge cases like what to do if a section is completely empty, or other cases where we need to deal with NULLs and empty strings.