DIAGNOSTIC REPORT / DEMO

acme.studio /

EXAMPLE AUDIT · MOBILE LAB TEST

Next.jsTailwind CSSVercelVisit site

SHIPAUDIT SCORESTRESS TEST

/ 100

ROOM TO IMPROVE

Good bones. Room to move faster.

4 failed checks. 6 passing. Start with the highest-impact fixes below.

95 /100 potential+24 pts estimated

Performance

Accessibility

SEO

Best practices

Simulated mobile CPU Throttled 4G Cold cache Snapshot, not field data

01 Start here.

IMPACT → EFFORT

Potential scores are estimates. Gains overlap; they are not additive or guaranteed.

THE DIAGNOSIS

Your content arrives, but the first impression is heavier than it needs to be. A large hero image and a blocking widget delay the main content to 3.8 seconds. Start with those two fixes, then split the charting bundle. The layout is stable and the server responds quickly; keep those wins as you reduce the page weight.

02 The vital signs.

LAB MEASUREMENTS

LCPNeeds work

3.8s

Largest contentful paint

Good ≤ 2.5s · Poor > 4.0s

INPUnavailable

—

Interaction to next paint

Needs interaction data. A navigation-only lab test can’t measure it.

CLSGood

0.032

Cumulative layout shift

Good ≤ 0.100 · Poor > 0.250

FCPNeeds work

2.2s

First contentful paint

Good ≤ 1.8s · Poor > 3.0s

TTFBGood

340ms

Time to first byte

Good ≤ 800ms · Poor > 1.8s

LCP, INP and CLS are Core Web Vitals. FCP and TTFB help diagnose the cause. This is a lab snapshot; INP requires interaction data.

03 The fix queue.

4 FAILED CHECKS

Right-size the hero image

Performance→ LCPModerate

+15 pts

What’s happening

The 2,400px hero image is rendered at 720px. The page transfers 420KB more image data than needed.

Why it matters

This can affect largest contentful paint, especially on a slower mobile device or connection.

Affected resources

/images/hero-studio.jpg

Next.js · suggested fix

Use next/image with responsive sizes="(max-width: 768px) 100vw, 50vw" and explicit width and height. Preload the hero image only if it is the LCP element. Serve AVIF or WebP.

Effort is a rough estimate. Point gains are directional, overlap, and require a re-test.

Clear the critical rendering path

Performance→ FCPQuick fix

+9 pts

What’s happening

A third-party widget loads synchronously before the main page content can paint. Estimated time saved: 620ms.

Why it matters

This can affect first contentful paint, especially on a slower mobile device or connection.

Affected resources

https://widget.example.com/client.js

Next.js · suggested fix

Load the non-essential widget with next/script using strategy="lazyOnload". Keep essential page styles in the critical path and verify the widget still works after deferring it.

Effort is a rough estimate. Point gains are directional, overlap, and require a re-test.

Ship less JavaScript on the first visit

PerformanceInvolved

Review

What’s happening

The initial bundle includes a charting library used only below the fold. Approximately 86KB is unused during page load.

Why it matters

This adds work or friction during page load. Confirm the bottleneck before changing the code.

Affected resources

/_next/static/chunks/charts.js

Next.js · suggested fix

Inspect the bundle with @next/bundle-analyzer. Dynamically import the charting component and load it when needed. Test the loading state and keyboard access.

Effort is a rough estimate. Point gains are directional, overlap, and require a re-test.

Describe the project thumbnails

AccessibilityQuick fix

Review

What’s happening

Two meaningful project images do not have an accessible text alternative.

Why it matters

A barrier here can prevent someone from reading or using the page. A low point estimate does not make accessibility optional.

Affected resources

/images/project-one.webp
/images/project-two.webp

Next.js · suggested fix

Add concise, descriptive alt text to meaningful project thumbnails. Keep decorative images alt="". Verify the gallery with a screen reader.

Effort is a rough estimate. Point gains are directional, overlap, and require a re-test.

6 checks passed

Document has a descriptive titleSEO
HTTPS connection is secureBest practices
Layout stays stable while loadingBest practices
Text has sufficient contrastAccessibility
Links have descriptive namesAccessibility
Viewport is configured for mobileBest practices

1 informational / manual checks

Check keyboard focus order manually
Automated checks cannot fully assess keyboard navigation. Verify the focus order with Tab and Shift+Tab.

04 Under the hood.

IMAGES420KB

estimated excess image data · 1 flagged

Inspect resources

hero-studio.jpg · 420KB excess

THIRD PARTIES210ms

main-thread blocking · 1 services identified

Inspect services

Example widget · 210ms

FONTS0

blocking fonts · 0 missing display strategy

YOUR NEXT COMMITAI FIX PROMPT

Take it to
your editor.

A prioritized fix plan, ready for Cursor, Claude Code, or your favorite coding agent.

Read the full prompt

Improve the mobile performance of https://acme.studio, a Next.js site with Tailwind CSS.

1. Right-size /images/hero-studio.jpg with next/image and a responsive sizes prop. Verify that the hero is the LCP element before preloading.
2. Load the non-essential widget with next/script using strategy="lazyOnload".
3. Inspect the bundle and dynamically import the charting component below the fold.
4. Add descriptive alt text to the project thumbnails.

Keep the current visual design, behavior, and accessibility. Inspect existing code before making changes. Validate with a fresh mobile Lighthouse audit. Current lab LCP: 3.8s; aim for ≤2.5s. Estimated gains are directional and must be verified.

Review AI suggestions before applying them. Re-audit to verify the gain.

Online reports last one hour. Save a local snapshot to revisit it anytime. Open history ↗

THE NEXT DEPLOY

Keep the gains.
Catch the regressions.

Found 4 things to improve? Guard will catch performance regressions after every deploy.

Before / after Regression alerts AI root cause

GUARD · COMING SOON

Get the first signal.

Join the early access list. We’ll email you when Guard is ready.

acme.studio /

Good bones. Room to move faster.

01 Start here.

Right-size the hero image

Clear the critical rendering path

Ship less JavaScript on the first visit

02 The vital signs.

03 The fix queue.

Right-size the hero image

What’s happening

Why it matters

Affected resources

Next.js · suggested fix

Clear the critical rendering path

What’s happening

Why it matters

Affected resources

Next.js · suggested fix

Ship less JavaScript on the first visit

What’s happening

Why it matters

Affected resources

Next.js · suggested fix

Describe the project thumbnails

What’s happening

Why it matters

Affected resources

Next.js · suggested fix

04 Under the hood.

Keep the gains.Catch the regressions.

Get the first signal.

Keep the gains.
Catch the regressions.