Add expected output examples to all snippets

[ManuelPauloAfonso]

Proposal: Add expected output examples to snippets

Problem

Currently, each snippet shows the JavaScript code to run in DevTools,
but there is no indication of what the output looks like after execution.
This makes it harder for newcomers to know if the snippet ran correctly
or how to interpret the results.

Proposed Solution

Add an "Expected Output" section below each snippet with a realistic
example of what appears in the console. For example:

Snippet: LCP

// Expected output:
LCP: 1240ms  Good

Snippet: CLS

// Expected output:
CLS: 0.05  Good

Benefits

• Helps beginners understand what a "good" result looks like
• Makes it easier to verify the snippet ran correctly
• Improves the learning experience without changing the snippets themselves

Scope

All snippets across all categories (Core Web Vitals, Resources, Scripts, etc.)

Contribution

I am willing to contribute with a PR implementing this improvement
if the proposal is accepted.

[nucliweb]

Hi @ManuelPauloAfonso!

Thank you so much for the proposal; I think it's an excellent idea.

Visual examples help a lot in understanding the value of each snippet at a glance. I would like to go a step further and, instead of uploading manual screenshots, implement automatic generation during build time. This way, the output would be generated from the actual script and updated whenever there are changes, keeping the documentation perfect without manual intervention.

Would you like to collaborate on the implementation?

The idea would be to integrate this automatic output directly into each snippet's individual page. If you have the time and feel like it, it would be great to have your help defining how to capture these outputs and inject them into the corresponding pages during the build process.

If you're up for opening a PR with an initial approach or prefer to discuss the best technical strategy here, I'm all ears!"

[ManuelPauloAfonso]

Hi @nucliweb

Yes, I’d be happy to collaborate on this.

I’ll open a PR with an initial proposal so we can discuss the approach there.

Thanks!