Web Perfomance

TOOLS

Observability

Monitoring

Debugging

joanleon.dev

@nucliweb

@nucliweb.net

nucliresources

vs

Field

Lab

(Syntetic)

(RUM)

Real User Monitoring

Lab Monitoring uses controlled environment tools like Lighthouse to measure web performance metrics under consistent conditions, providing standardized assessments and benchmarks free from real-world variables.

Lab

Field

Field Data captures real-world performance metrics from actual user experiences through tools like PageSpeed Insights, revealing how your website performs across diverse devices, networks, and user conditions in production environments.

Real User Monitoring (Field)

Synthetic Monitoring (Lab)

Real network & browser conditions

Mimics defined network & browser conditions

Requires JavaScript installation

No installation required

Large sample size (up to 100%)

Limited URLs

Geographic spread

Limited test locations

Only measure your own site

Compare any sites (including competitors)

Correlation with other metrics (bounce rate)

Detailed analysis & visuals

Always on monitoring

Scheduled testing (can miss intermittent issues)

Real device diversity (OS, browsers, screen sizes)

Limited device configurations

Captures actual user journeys

Pre-defined test paths

Web Vital

Tools to measure Core Web Vitals

RUM

FID/INP

Google Search Console

Google Search Console

Google Search Console

pagespeed.web.dev

pagespeed.web.dev

pagespeed.web.dev

pagespeed.web.dev

URL (/es)

ORIGIN

CrUX Dashboard

CrUX Dashboard

CrUX Dashboard

CrUX Vis

CrUX Vis

Chrome DevTools

Chrome DevTools

Synthetic Monitoring (Lab)

Synthetic Monitoring (Lab) Tools

Real User Monitoring (Field) Tools

treo.sh/sitespeed

debugbear.com

requestmetrics.com

requestmetrics.com

speedcurve.com

speedcurve.com

@s-ui/react-web-vitals

import WebVitalsReporter from '@s-ui/react-web-vitals'

export default function App() {
  const handleReport = metric => {
    console.log(metric) // do something
  }

  return (
    <WebVitalsReporter onReport={handleReport}>
      <main />
    </WebVitalsReporter>
  )
}
<script>
  (function () {
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.iife.js';
    script.onload = function () {
      // When loading `web-vitals` using a classic script, all the public
      // methods can be found on the `webVitals` global namespace.
      webVitals.onCLS(console.log);
      webVitals.onFID(console.log);
      webVitals.onLCP(console.log);
    };
    document.head.appendChild(script);
  })();
</script>

web-vitals

web-vitals#browser-support

  • onCLS(): Chromium
  • onFCP(): Chromium, Firefox, Safari 14.1+
  • onFID(): Chromium, Firefox (with polyfill: Safari, Internet Explorer)
  • onINP(): Chromium
  • onLCP(): Chromium
  • onTTFB(): Chromium, Firefox, Safari 15+ (with polyfill: Safari 8+, Internet Explorer)

Browser Support

lighthouse https://web.dev --view

Lighthouse CLI

Lighthouse Parade

Unlighthouse

/unlighthouse.dev/

lighthouse-ci

lighthouse-ci

lighthouse-ci

Lighthouse Plugins

&

Field

Lab

(Syntetic)

(RUM)

Real User Monitoring

Web Performance Observability|Monitoring|Debugging Tools

By Joan León

Web Performance Observability|Monitoring|Debugging Tools

Web Performance Observability, Monitoring, Debugging Tools

  • 65

More from Joan León