Which Core Web Vitals does it measure?

LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint, replacing FID in March 2024). All three are Google's current search ranking signals.

How is this different from Google PageSpeed Insights?

This tool runs client-side analysis on your own pages. Google PageSpeed Insights uses Lighthouse in Google's infrastructure. Results may differ due to network conditions and server location.

Does it suggest specific fixes?

Yes — each metric issue links to a specific optimization: LCP issues → image preloading, CLS issues → dimension attributes, INP issues → code splitting and input debouncing.

Performance Auditor | DevTools Surf

DevTools Surf

Example: Performance Auditor

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

<html><head><link href="style.css" /><link href="theme.css" /><script src="app.js"></script><script src="util.js"></script><script src="analytics.js"></script></head><body><img src="1.jpg" /><img src="2.jpg" /><img src="3.jpg" /></body></html>

Output

Performance Audit Report
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Performance Score: 61/100

Metrics:
• CSS Files: 2
• JS Files: 3
• Images: 3
• External Requests: 8
• Inline Styles: 0
• Inline Scripts: 0

Recommendations:
• ✓ CSS file count is good
• ✓ JS files optimized
• ✓ Image count reasonable
• ✓ Minimal inline styles
• ⚠️ Consider async/defer for scripts

About Performance Auditor

Performance Auditor preview - Web / Frontend tool

Audit website performance metrics, load times, and resource usage. Part of the DevTools Surf developer suite. Browse more tools in the Web / Frontend collection.

Use Cases

Audit a web page's Core Web Vitals (LCP, INP, CLS) before and after a performance optimization.
Identify render-blocking scripts and stylesheets that delay First Contentful Paint.
Measure Time to Interactive and detect long tasks that block user input responsiveness.
Compare performance across multiple page URLs to prioritize which pages need optimization most.

Tips

Audit performance after every significant feature addition — it's easier to fix one feature's regression than to untangle months of accumulated slowdowns.
Test on throttled CPU (4x slowdown) and network (Fast 3G) to see what median mobile users experience, not just your developer machine.
Check the waterfall chart for render-blocking resources — a single blocking CSS or JS file in the <head> can delay First Contentful Paint by 500-1500ms.

Fun Facts

Google's Core Web Vitals (LCP, FID/INP, CLS), introduced as ranking signals in 2021, made web performance directly measurable in search ranking for the first time — performance became an SEO requirement, not just a UX concern.
A 2019 study by Deloitte found that improving mobile site load time by 0.1 seconds increased retail conversion rates by 8.4% and average order value by 9.2% — quantifying the revenue impact of milliseconds.
The Time to Interactive (TTI) metric measures when the page becomes reliably interactive. Chrome's Long Tasks API (2017) defines any script that blocks the main thread for >50ms as a long task — the most common TTI bottleneck.

FAQ

Which Core Web Vitals does it measure?: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), and INP (Interaction to Next Paint, replacing FID in March 2024). All three are Google's current search ranking signals.
How is this different from Google PageSpeed Insights?: This tool runs client-side analysis on your own pages. Google PageSpeed Insights uses Lighthouse in Google's infrastructure. Results may differ due to network conditions and server location.
Does it suggest specific fixes?: Yes — each metric issue links to a specific optimization: LCP issues → image preloading, CLS issues → dimension attributes, INP issues → code splitting and input debouncing.

Related Web / Frontend Tools

Meta Tags / OG Previewer Tailwind → CSS HTML → React JSX HTML → Markdown SVG → React Component CSS Unit Converter robots.txt Validator Sitemap XML Validator