DEV Community

Kui Luo
Kui Luo

Posted on

How to Audit Your Website's Core Web Vitals in Under 10 Minutes

#performance #tooling #tutorial #webdev

Core Web Vitals measure three things: how fast your largest content element paints (LCP), how long before a user can interact with your page (INP), and how much the layout shifts during loading (CLS). Here is a practical guide to auditing all three without expensive tools.

What You Need

Metric Good Threshold Tool
LCP < 2.5 seconds Chrome DevTools Performance
INP < 200 milliseconds Chrome DevTools Performance
CLS < 0.1 Chrome DevTools Elements + Console

No paid subscription required. Chrome DevTools handles everything.

Step 1: Measure LCP

  1. Open your page in an incognito Chrome window
  2. Press F12 to open DevTools
  3. Go to the Performance tab
  4. Check "Web Vitals" in the settings gear
  5. Click the Record button and reload the page (Ctrl+Shift+R for a hard refresh)
  6. Stop the recording after the page finishes loading

Look for the LCP marker in the timeline. If it shows above 2.5 seconds, the largest image or text block is loading too slowly.

Common fixes ranked by impact:

  • Serve images in WebP format (typically 30-50 percent smaller than JPEG)
  • Add loading="eager" and explicit width/height to above-the-fold images
  • Preload the LCP element: <link rel="preload" as="image" href="hero.webp">
  • Move render-blocking CSS to non-critical paths or inline it

Step 2: Measure INP

  1. Stay in the Performance tab
  2. Click Record
  3. Click around the page naturally — open menus, click buttons, fill a form
  4. Stop the recording after 10-15 seconds of interaction

Check the INP value. Each click should show a response within 200 milliseconds. If interactions feel sluggish:

  • Defer non-essential JavaScript with <script defer>
  • Break long tasks (>50ms) using setTimeout chunking or requestIdleCallback
  • Reduce third-party scripts — each one adds to the main thread bottleneck
  • Use web workers for heavy computation

Step 3: Measure CLS

  1. Open the Elements tab
  2. Check for images and embeds without explicit dimensions
  3. Open the Console tab and run: 
new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('CLS shift: ' + entry.value.toFixed(3), entry.sources);
  }
}).observe({ type: 'layout-shift', buffered: true });
Enter fullscreen mode Exit fullscreen mode
  1. Scroll and interact with the page — watch for shift reports

If CLS exceeds 0.1:

  • Add width and height attributes to every <img> and <video>
  • Reserve space for dynamic ads and embeds with CSS containers
  • Avoid inserting content above existing content after initial render
  • Use font-display: swap with size-adjust to prevent text reflow

Quick Reference Checklist

  • [ ] LCP < 2.5s on a simulated 4G connection
  • [ ] INP < 200ms for all interactive elements
  • [ ] CLS < 0.1 with no visible jumps during load
  • [ ] Images have explicit dimensions and use modern formats
  • [ ] Third-party scripts are deferred or loaded asynchronously
  • [ ] CSS critical path is under 15 KB

Run this audit monthly. Core Web Vitals affect search rankings directly — pages that pass all three thresholds see an average 5-10 percent improvement in organic traffic within 60 days according to public data from large-scale studies.

The entire process takes about 8 minutes once you are familiar with the DevTools interface. No setup, no account creation, no export files to interpret.

Top comments (0)