Getting started

Quickstart

Get your first Core Web Vitals data flowing into Pulsecadence in under 5 minutes. No build step required.

Step 1 — Create an account

Sign up at pulsecadence.com/login/signup. The Hobby tier is free, no credit card required. After sign-up, you will land in your dashboard where you can create a project.

Step 2 — Create a project and get your snippet key

In your Pulsecadence dashboard, click New Project, give it a name (e.g. "production"), and copy your project key. It looks like:

pcd_proj_k2m9x8a3...

Step 3 — Add the snippet to your page

Add the following <script> tag to the <head> of every page you want to monitor. It must be loaded before any render-blocking resources to accurately capture LCP start:

<script
  async
  src="https://cdn.pulsecadence.com/v1/pcd.js"
  data-project-key="YOUR_PROJECT_KEY"
></script>

Replace YOUR_PROJECT_KEY with the key from Step 2. The snippet is approximately 3KB gzip and loads asynchronously — it will not block page rendering.

Step 4 — Verify data is flowing

Open your site in a browser, navigate between a few pages, and return to your Pulsecadence dashboard. Within 30-60 seconds you should see session events appearing in the live feed. Your first LCP, INP, and CLS readings will appear after enough session events to compute p75 (typically 25-50 sessions).

Step 5 — Optional: add custom timing marks

Use the browser's native performance.mark() API to instrument specific milestones in your application. Pulsecadence picks these up automatically:

// In your application code
performance.mark('hydration-start');
// ... your React/Vue/Svelte component mounts ...
performance.mark('hydration-end');

// Pulsecadence will surface:
//   hydration-start, hydration-end
//   + hydration-start→hydration-end delta as a derived metric

Framework notes

  • React / Next.js: Add the snippet to _document.js or app/layout.tsx inside <Head>. The snippet automatically handles React hydration LCP.
  • Vue / Nuxt: Add to app.html or via the head config in nuxt.config.ts.
  • SPA route changes: The snippet uses PerformanceObserver + MutationObserver to detect SPA route navigations automatically. No manual route event firing required.
  • Server-side rendering: Works with all SSR frameworks. The snippet loads after the HTML is parsed; LCP measurement begins from navigation start, not script parse time.

Content Security Policy

If your site uses a CSP, add the following directive to allow the snippet to load and send data:

script-src 'self' https://cdn.pulsecadence.com;
connect-src 'self' https://ingest.pulsecadence.com;

See the Snippet Installation guide for full CSP configuration options.

Next steps