Overview

Frontend Quality Monitor

Lightweight dashboard for Web Vitals, timing, and quick accessibility checks.

Environment Local
Session Started --
Viewport --
Network (est.) --
Last Update --

Overall Status

--

Waiting for first readings.

--

Navigation Snapshot

-- TTFB
-- DOMContent Loaded
-- Load Event

Based on the Navigation Timing entry.

Largest Contentful Paint

--

--

First Contentful Paint

--

--

Cumulative Layout Shift

--

--

Interaction to Next Paint

--

--

Vitals timing

Time-based vitals only (LCP, FCP, INP).

Good Needs Improvement Poor
Your browser does not support canvas.

Navigation timing

Key milestones for the current navigation.

Your browser does not support canvas.
Metric Value
Time to First Byte
Response Duration
DOM Interactive
DOMContentLoaded
Load Event
Transfer Size

Accessibility checks

Quick automated checks to highlight obvious issues. A manual review is still recommended.

-- Checks Passed
-- Potential Issues
-- Manual Review
-- Last Run

Notes

  • Contrast needs real colors and states. Verify with a checker during QA.
  • Keyboard support should include visible focus states and a sane tab order.
  • Landmarks improve screen reader navigation and audit results.

Test interactions

Use these two controls to generate sample interactions.

Keystrokes update INP for this session.