Documentation extension ideas

[davidsneighbour]

I saw this web component a while ago and always wanted to include it in one of my projects. Did it today and stumbled over some issues or things I would do differently or things I did not find documented anywhere. The following is a list, please don't treat it as an issue, just some notes that might help you improve the project.

the setup

• a commit where I implement the component to my website
• my website (the component is in the footer)
• the sass styles for the component

ideas, suggestions

• Styling the output is complicated. The fact that the output is done as a definition list makes it hard to style it nicely (for me, on bootstrap 5) because those list tend to be structured vertically in design systems. Making them a nice line from left to right (horizontally) requires lots of display: inline CSS on many elements (see the sass styles). I think that might be the case for other style systems too. Maybe additional options of what tags are used to render labels and values might help, maybe even add a template setting? Might be overkill.
• My website is so fast (hehe), that I can't see anything else than is-final and is-good as classes on the values of the vitals. Sometimes I see three dots when a vital is not calculated and it does not seem that a class is added in those cases. I would expect the system to have some form of traffic light system... yellow for "we are on it", red for "that is bad" and green for "good". Could you either document the classes applied while running/when done or implement some form of system? To me it appears that is-final and is-good are the only classes applied. something along the lines of is-in-progress would be nice. I thought that there might be an is-bad but I didn't come across one of these on my site yet. So... either a better documentation or some new features :)
• the docs also do not say anything about the thresholds that result in an is-good class. I feel like that should be at least documented and maybe even configurable.
• add npm install web-vitals-element and import 'web-vitals-element'; as installation methods. I am using ESBuild (in GoHugo) to build my JS and this is much better than a script tag somewhere on my page.

long story short

I like to gloat and this component helps immensely, thank you :)

[davidsneighbour]

Adding to this:

• it would be nice if the links to web.dev's explainer pages could be opened in new tabs (target attribute configurable)
• it appears that the First Input Delay (FID) value is only displayed when the first interaction with the page is done (even if it's just some milliseconds). Would sending a click event every x seconds help update that autonomously or would it somehow slow down the page?

[stefanjudis]

@davidsneighbour Hmm... what's completed? Are the two issues you filed not a problem anymore?