Quick Start
Get WebPerformanceBeacon running on your site in under 5 minutes. You'll install the browser SDK, configure your project, and see your first metrics in the dashboard.
Step 1: Install the SDK
1
Install the browser package from npm:
# npm
npm install @wpbeacon/browser --save
# yarn
yarn add @wpbeacon/browser
# pnpm
pnpm add @wpbeacon/browser
Step 2: Initialize
2
Add the initialization call in your app's entry point:
import { init } from '@wpbeacon/browser';
init({
projectId: 'wpb-prod-7xk2m9',
// Optional: only report on production
enabled: process.env.NODE_ENV === 'production',
});
That's it. The SDK automatically captures LCP, CLS, INP, and TTFB for every page view.
Step 3: Verify in the dashboard
3
Open the WebPerformanceBeacon dashboard and check the real-time feed. Your first event should appear within 60 seconds.
Script tag alternative
If you don't use a bundler, add this script tag to your <head>:
<!-- WebPerformanceBeacon -->
<script
src="https://cdn.webperformancebeacon.com/v2/beacon.min.js"
data-project="wpb-prod-7xk2m9"
defer
></script>
Next steps
Once metrics are flowing, explore performance budgets and CI/CD integration to block regressions before they reach production.