6 Free Web Performance Monitoring Tools Every Developer Should Know

Performance monitoring does not need to cost thousands of dollars a year. The tooling ecosystem for Core Web Vitals and general web performance has matured to the point where you can build a solid monitoring pipeline using entirely free tools, from real-user measurement in production to automated lab testing in CI.

The challenge is not finding tools. It is knowing which ones solve which problems and how they fit together. Some measure lab performance under controlled conditions. Others capture real-user data from actual visitors. The best monitoring setups use both, and all of the tools below have free tiers generous enough for most teams.

Here are the six I keep coming back to.

1. Google PageSpeed Insights

PageSpeed Insights is the obvious starting point, but most developers underuse it. The key feature that many people miss is the field data section at the top, powered by the Chrome User Experience Report. This is actual data from real Chrome users visiting your site over the past 28 days.

Lab data (the Lighthouse section below it) tells you what could happen under ideal test conditions. Field data tells you what is actually happening for your users. When optimizing for Google's ranking signals, field data is what matters because Google uses CrUX data, not Lighthouse scores, for ranking.

The assessment section shows pass/fail status for each Core Web Vital (LCP, CLS, INP) at both page and origin level. If a metric shows "not enough data," your page does not receive enough Chrome traffic to generate a CrUX record, and you will need to rely on lab testing and your own real-user monitoring setup.

2. WebPageTest

WebPageTest provides the most detailed performance analysis of any free tool. Run a test from multiple global locations using real browsers (Chrome, Firefox) on real devices with throttled connections that simulate mobile network conditions.

The waterfall chart is where WebPageTest shines. It shows every single network request with precise timing, dependencies, and blocking behavior. You can see exactly when the LCP resource starts downloading, how long DNS resolution takes, and which JavaScript files block rendering.

Advanced features worth exploring:

# Run a WebPageTest comparison from the CLI
npx webpagetest test https://your-site.com \
  --location ec2-us-east-1:Chrome \
  --connectivity 4G \
  --runs 3

The filmstrip view shows frame-by-frame rendering progress. Compare two URLs side by side to see exactly where a competitor's page loads faster than yours. The WebPageTest documentation covers scripted testing for multi-step flows like login sequences and checkout processes.

Photo by Daniil Komov on Pexels

3. web-vitals JavaScript Library

The web-vitals library from Google Chrome Labs is a tiny (1.5KB) JavaScript module that measures Core Web Vitals in production using the same APIs that Chrome uses for CrUX reporting.

Installation is straightforward:

import { onLCP, onCLS, onINP } from 'web-vitals';

function sendToAnalytics(metric) {
  // Send to your analytics endpoint
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,  // 'good', 'needs-improvement', or 'poor'
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
  });

  // Use sendBeacon for reliability during page unload
  navigator.sendBeacon('/api/vitals', body);
}

onLCP(sendToAnalytics);
onCLS(sendToAnalytics);
onINP(sendToAnalytics);

The library reports the same values that feed into CrUX, so you get direct visibility into the data Google uses for ranking. Unlike CrUX, which aggregates data over 28 days, web-vitals gives you immediate per-pageview measurements, which makes it invaluable for detecting regressions after a deploy.

The attribution build provides additional diagnostic information about what caused each metric value, including the element responsible for LCP, the source of layout shifts, and the interaction that triggered INP. The web-vitals attribution docs explain the extra data available.

4. Lighthouse CI

Lighthouse CI automates Lighthouse audits in your CI/CD pipeline. Instead of manually running Lighthouse before each deploy, Lighthouse CI runs automatically on every pull request and fails the build if performance drops below your thresholds.

Basic setup with GitHub Actions:

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: pull_request
jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true

The configuration file sets your performance budgets:

{
  "ci": {
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.9 }],
        "largest-contentful-paint": ["warn", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }]
      }
    }
  }
}

Lighthouse CI also includes a free server component called LHCI Server that stores historical results and shows trends over time. Self-host it on any VPS for a free performance dashboard.

"The earlier you catch a performance regression, the cheaper it is to fix. Lighthouse CI in your pull request workflow means you never merge code that makes the site slower without knowing it." - Dennis Traina, 137Foundry

5. Chrome UX Report API

The Chrome UX Report is Google's dataset of real-user performance data collected from Chrome browsers. While PageSpeed Insights surfaces CrUX data for individual URLs, the CrUX API lets you query it programmatically for any URL or origin.

# Query CrUX API for a specific URL
curl "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://your-site.com/",
    "metrics": ["largest_contentful_paint", "cumulative_layout_shift",
                "interaction_to_next_paint"]
  }'

The response includes histogram data showing the distribution of good, needs-improvement, and poor experiences for each metric. The CrUX BigQuery dataset goes even deeper, providing monthly snapshots of performance data for millions of origins that you can query with SQL.

For teams that want hands-on help building performance monitoring into their workflow, the technical performance consultancy 137Foundry has experience integrating CrUX data into custom dashboards and alerting systems.

Photo by Daniil Komov on Pexels

6. Unlighthouse

Unlighthouse is a lesser-known tool that deserves more attention. It crawls your entire site and runs Lighthouse on every page automatically, generating a dashboard that shows performance scores across all routes.

This solves a real problem: most teams test their homepage and a few key landing pages, but performance issues on deeper pages (blog posts, product pages, category archives) go unnoticed until they show up in Search Console.

Run it against any site:

npx unlighthouse --site https://your-site.com

Unlighthouse generates an interactive report showing every page with its Lighthouse scores. Sort by performance to find the worst offenders. The Unlighthouse CI integration lets you run it in your pipeline and set site-wide performance budgets.

For a comprehensive look at diagnosing specific Core Web Vitals failures and the fixes for each metric, this guide to diagnosing and fixing Core Web Vitals walks through the full diagnostic process from field data to production fixes.

How These Tools Fit Together

The most effective monitoring setup uses multiple tools at different stages:

1. Development: Lighthouse in DevTools for quick checks during coding
2. Pull requests: Lighthouse CI to catch regressions before merge
3. Production: web-vitals library for real-user monitoring
4. Periodic audits: Unlighthouse for site-wide crawl, WebPageTest for deep analysis
5. Trend tracking: CrUX API or PageSpeed Insights for 28-day field data trends

No single tool covers everything. Lab tools catch potential issues early, but only real-user monitoring tells you what your actual visitors experience.

Further Reading

• web.dev Core Web Vitals documentation explains the three metrics and their thresholds
• Google Search Console Core Web Vitals report shows how Google groups your URLs by performance status
• Performance budgets with webpack documents how to set bundle size limits directly in your build config
• Calibre's free plan offers limited automated testing if you want a hosted alternative to self-managed tools
• SpeedCurve's performance blog publishes in-depth articles on performance measurement methodology and industry benchmarks