Metrics · Scores + sizes · PNG + SVG

Show your numbers with pride.

Paste Lighthouse scores, Core Web Vitals or a bundle-size readout and Codeshot colors them by threshold — green for great, amber for okay, red for needs-work — ready to share.

Code Terminal API Logs Schema SQL Regex Git Tree Env Session Milestone HTTP Diff Tests ASCII Tree Metrics

Theme

Backdrop

Font

Padding48pxSize15px

Title

lighthouse

Lighthouse · codeshot.io

Performance         98
Accessibility      100
Best Practices      96
SEO                100

First Contentful Paint   0.6 s
Largest Contentful Paint 1.1 s
Total Blocking Time      20 ms
Bundle (gzipped)         142 kB

Lighthouse · codeshot.io

Performance         98
Accessibility      100
Best Practices      96
SEO                100

First Contentful Paint   0.6 s
Largest Contentful Paint 1.1 s
Total Blocking Time      20 ms
Bundle (gzipped)         142 kB

Click the content to edit it directly. Adjust the controls, then export.

What is the Performance Metrics generator?

A performance metrics image tool colors Lighthouse scores, Core Web Vitals and bundle sizes by threshold — green for great, amber for okay, red for needs-work. Turn a benchmark or audit into a shareable image for a launch post, a report or a brag.

Codeshot is free and runs entirely in your browser — no account, no watermark, and nothing you paste is uploaded. Export a retina PNG or a scalable SVG, or copy the image straight to your clipboard.

When to use it

Launch and performance posts
Lighthouse and audit reports
Before/after optimization results
Stakeholder status updates

Why use Codeshot for performance metrics image?

Threshold coloring

Scores of 90+ turn green, 50–89 amber and below red, just like Lighthouse.

Sizes & timings

kB, MB, ms and seconds are highlighted so readouts read at a glance.

Brag-worthy

Share a launch's metrics as a clean image instead of a cropped screenshot.

How to turn performance metrics into an image

01
Paste the metrics
Drop in Lighthouse scores, Web Vitals or bundle sizes.
02
Frame the shot
Pick a theme, backdrop and font.
03
Export & share
Save a PNG or SVG, or copy to clipboard.

Performance Metrics — frequently asked questions

How are scores colored?+

By Lighthouse-style thresholds: 90 and above is green, 50 to 89 is amber, and below 50 is red. Sizes and timings are highlighted in amber.

What can I paste?+

Any label-and-number readout — Lighthouse categories, Core Web Vitals, bundle sizes or your own benchmarks.

What can I export, and is it free?+

Export a high-resolution PNG or a scalable SVG, or copy straight to your clipboard. Codeshot is completely free — no account, no watermark, no limits.

Explore all 17 Codeshot tools

One studio, 17 focused generators — each with its own controls, content and look.

Code Snippet→Terminal Window→API Response→Error & Log→Database Schema→SQL Query→Regex→Git Commit→Project Structure→Environment Variables→Terminal Session→Developer Milestone→HTTP Request→Git Diff→Test Results→ASCII Tree→Performance Metrics●