feat: move performance to dedicated tab, fix 0/99999 metrics bug

Performance metrics moved from dashboard into a new Performance tab.
Fixed null handling so "No data" shows instead of misleading zeros.
Script no longer sends INP=0 when no interaction occurred.

CHANGELOG.md

@@ -8,6 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Added
 
+- **Dedicated Performance tab.** Core Web Vitals (LCP, CLS, INP) have moved from the main dashboard into their own "Performance" tab. This gives you a full-page view with your overall performance score, individual metric cards, and a "Slowest pages by metric" table you can sort by LCP, CLS, or INP. The tab includes its own date range picker so you can analyze performance trends independently.
+
 - **BunnyCDN integration.** Connect your BunnyCDN account in Settings > Integrations to monitor your CDN performance right alongside your analytics. A new "CDN" tab on your dashboard shows total bandwidth served, request volume, cache hit rate, origin response time, and error counts — each with percentage changes compared to the previous period. Charts show bandwidth trends (total vs cached), daily request volume, and error breakdowns over time. A geographic breakdown shows which countries consume the most bandwidth. Pulse only stores your API key encrypted and only reads statistics — it never modifies anything in your BunnyCDN account. You can disconnect and fully remove all CDN data at any time.
 - **Smart pull zone matching.** When connecting BunnyCDN, Pulse automatically filters your pull zones to only show the ones that match your tracked site's domain — so you can't accidentally connect the wrong pull zone.
 
@@ -20,6 +22,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ### Fixed
 
+- **Performance metrics no longer show "0 0 0" when no data exists.** Previously, if no visitors had reported Web Vitals data, the Performance section showed "LCP 0 ms, CLS 0, INP 0 ms" and rated everything as "Good" — which was misleading. It now clearly says "No data" when no metrics have been collected, and shows a helpful message explaining when data will appear.
+- **Performance metrics no longer show inflated numbers from slow outliers.** A single very slow page load could skew the entire site's LCP or INP average to unrealistically high values. Pulse now uses the 75th percentile (p75) — the same methodology Google uses — so a handful of extreme outliers don't distort your scores.
+
 - **BunnyCDN logo now displays correctly.** The BunnyCDN integration card in Settings previously showed a generic globe icon. It now shows the proper BunnyCDN bunny logo.
 - **Your BunnyCDN API key is no longer visible in network URLs.** When loading pull zones, the API key was previously sent as a URL parameter. It's now sent securely in the request body, just like when connecting.
 

app/sites/[id]/page.tsx

@@ -5,7 +5,6 @@ import { logger } from '@/lib/utils/logger'
 import { useCallback, useEffect, useRef, useState, useMemo } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import {
-  getPerformanceByPage,
   getTopPages,
   getTopReferrers,
   getCountries,
@@ -32,7 +31,6 @@ import TopReferrers from '@/components/dashboard/TopReferrers'
 import Locations from '@/components/dashboard/Locations'
 import TechSpecs from '@/components/dashboard/TechSpecs'
 
-const PerformanceStats = dynamic(() => import('@/components/dashboard/PerformanceStats'))
 const GoalStats = dynamic(() => import('@/components/dashboard/GoalStats'))
 const Campaigns = dynamic(() => import('@/components/dashboard/Campaigns'))
 const PeakHours = dynamic(() => import('@/components/dashboard/PeakHours'))
@@ -556,20 +554,6 @@ export default function SiteDashboardPage() {
         />
       </div>
 
-      {/* Performance Stats - Only show if enabled */}
-      {site.enable_performance_insights && (
-        <div className="mb-8">
-          <PerformanceStats
-            stats={dashboard?.performance ?? { lcp: 0, cls: 0, inp: 0 }}
-            performanceByPage={dashboard?.performance_by_page ?? null}
-            siteId={siteId}
-            startDate={dateRange.start}
-            endDate={dateRange.end}
-            getPerformanceByPage={getPerformanceByPage}
-          />
-        </div>
-      )}
-
       <div className="grid gap-6 lg:grid-cols-2 mb-8">
         <ContentStats
           topPages={dashboard?.top_pages ?? []}

app/sites/[id]/performance/page.tsx

@@ -0,0 +1,156 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams } from 'next/navigation'
+import { getDateRange, formatDate } from '@ciphera-net/ui'
+import { Select, DatePicker } from '@ciphera-net/ui'
+import { getPerformanceByPage } from '@/lib/api/stats'
+import { useDashboard } from '@/lib/swr/dashboard'
+import { useMinimumLoading, useSkeletonFade } from '@/components/skeletons'
+import dynamic from 'next/dynamic'
+
+const PerformanceStats = dynamic(() => import('@/components/dashboard/PerformanceStats'))
+
+function getThisWeekRange(): { start: string; end: string } {
+  const today = new Date()
+  const dayOfWeek = today.getDay()
+  const monday = new Date(today)
+  monday.setDate(today.getDate() - (dayOfWeek === 0 ? 6 : dayOfWeek - 1))
+  return { start: formatDate(monday), end: formatDate(today) }
+}
+
+function getThisMonthRange(): { start: string; end: string } {
+  const today = new Date()
+  const firstOfMonth = new Date(today.getFullYear(), today.getMonth(), 1)
+  return { start: formatDate(firstOfMonth), end: formatDate(today) }
+}
+
+function PerformanceSkeleton() {
+  return (
+    <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 animate-pulse">
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <div className="h-7 w-40 bg-neutral-200 dark:bg-neutral-800 rounded mb-2" />
+          <div className="h-4 w-64 bg-neutral-200 dark:bg-neutral-800 rounded" />
+        </div>
+        <div className="h-9 w-36 bg-neutral-200 dark:bg-neutral-800 rounded" />
+      </div>
+      <div className="h-6 w-24 bg-neutral-200 dark:bg-neutral-800 rounded mb-6" />
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        {[1, 2, 3].map(i => (
+          <div key={i} className="h-24 bg-neutral-200 dark:bg-neutral-800 rounded-lg" />
+        ))}
+      </div>
+      <div className="h-64 bg-neutral-200 dark:bg-neutral-800 rounded-2xl" />
+    </div>
+  )
+}
+
+export default function PerformancePage() {
+  const params = useParams()
+  const siteId = params.id as string
+
+  const [period, setPeriod] = useState('30')
+  const [dateRange, setDateRange] = useState(() => getDateRange(30))
+  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
+
+  const { data: dashboard, isLoading: loading } = useDashboard(siteId, dateRange.start, dateRange.end)
+
+  const site = dashboard?.site ?? null
+  const showSkeleton = useMinimumLoading(loading && !dashboard)
+  const fadeClass = useSkeletonFade(showSkeleton)
+
+  useEffect(() => {
+    const domain = site?.domain
+    document.title = domain ? `Performance \u00b7 ${domain} | Pulse` : 'Performance | Pulse'
+  }, [site?.domain])
+
+  if (showSkeleton) return <PerformanceSkeleton />
+
+  if (site && !site.enable_performance_insights) {
+    return (
+      <div className="w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8">
+        <div className="text-center py-16">
+          <h2 className="text-lg font-semibold text-neutral-900 dark:text-white mb-2">
+            Performance insights are disabled
+          </h2>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Enable performance insights in your site settings to start collecting Core Web Vitals data.
+          </p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`w-full max-w-6xl mx-auto px-4 sm:px-6 pb-8 ${fadeClass}`}>
+      {/* Header */}
+      <div className="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-neutral-900 dark:text-white mb-1">
+            Performance
+          </h1>
+          <p className="text-sm text-neutral-500 dark:text-neutral-400">
+            Core Web Vitals from real user sessions
+          </p>
+        </div>
+        <Select
+          variant="input"
+          className="min-w-[140px]"
+          value={period}
+          onChange={(value) => {
+            if (value === 'today') {
+              const today = formatDate(new Date())
+              setDateRange({ start: today, end: today })
+              setPeriod('today')
+            } else if (value === '7') {
+              setDateRange(getDateRange(7))
+              setPeriod('7')
+            } else if (value === 'week') {
+              setDateRange(getThisWeekRange())
+              setPeriod('week')
+            } else if (value === '30') {
+              setDateRange(getDateRange(30))
+              setPeriod('30')
+            } else if (value === 'month') {
+              setDateRange(getThisMonthRange())
+              setPeriod('month')
+            } else if (value === 'custom') {
+              setIsDatePickerOpen(true)
+            }
+          }}
+          options={[
+            { value: 'today', label: 'Today' },
+            { value: '7', label: 'Last 7 days' },
+            { value: '30', label: 'Last 30 days' },
+            { value: 'divider-1', label: '', divider: true },
+            { value: 'week', label: 'This week' },
+            { value: 'month', label: 'This month' },
+            { value: 'divider-2', label: '', divider: true },
+            { value: 'custom', label: 'Custom' },
+          ]}
+        />
+      </div>
+
+      <PerformanceStats
+        stats={dashboard?.performance ?? null}
+        performanceByPage={dashboard?.performance_by_page ?? null}
+        siteId={siteId}
+        startDate={dateRange.start}
+        endDate={dateRange.end}
+        getPerformanceByPage={getPerformanceByPage}
+      />
+
+      <DatePicker
+        isOpen={isDatePickerOpen}
+        onClose={() => setIsDatePickerOpen(false)}
+        onApply={(range) => {
+          setDateRange(range)
+          setPeriod('custom')
+          setIsDatePickerOpen(false)
+        }}
+        initialRange={dateRange}
+      />
+    </div>
+  )
+}

components/dashboard/PerformanceStats.tsx

@@ -1,14 +1,12 @@
 'use client'
 
 import { useState, useEffect } from 'react'
-import { motion } from 'framer-motion'
-import { ChevronDownIcon } from '@ciphera-net/ui'
 import { PerformanceStats as Stats, PerformanceByPageStat, getPerformanceByPage } from '@/lib/api/stats'
 import { Select } from '@ciphera-net/ui'
 import { TableSkeleton } from '@/components/skeletons'
 
 interface Props {
-  stats: Stats
+  stats: Stats | null
   performanceByPage?: PerformanceByPageStat[] | null
   siteId?: string
   startDate?: string
@@ -16,59 +14,61 @@ interface Props {
   getPerformanceByPage?: typeof getPerformanceByPage
 }
 
-function MetricCard({ label, value, unit, score }: { label: string, value: number, unit: string, score: 'good' | 'needs-improvement' | 'poor' }) {
+type Score = 'good' | 'needs-improvement' | 'poor'
-  const colors = {
+
-    good: 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400 border-green-200 dark:border-green-800',
+const getScore = (metric: 'lcp' | 'cls' | 'inp', value: number): Score => {
-    'needs-improvement': 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+  if (metric === 'lcp') return value <= 2500 ? 'good' : value <= 4000 ? 'needs-improvement' : 'poor'
-    poor: 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border-red-200 dark:border-red-800',
+  if (metric === 'cls') return value <= 0.1 ? 'good' : value <= 0.25 ? 'needs-improvement' : 'poor'
-  }
+  if (metric === 'inp') return value <= 200 ? 'good' : value <= 500 ? 'needs-improvement' : 'poor'
+  return 'good'
+}
+
+const scoreColors = {
+  good: 'text-green-600 bg-green-50 dark:bg-green-900/20 dark:text-green-400 border-green-200 dark:border-green-800',
+  'needs-improvement': 'text-yellow-600 bg-yellow-50 dark:bg-yellow-900/20 dark:text-yellow-400 border-yellow-200 dark:border-yellow-800',
+  poor: 'text-red-600 bg-red-50 dark:bg-red-900/20 dark:text-red-400 border-red-200 dark:border-red-800',
+}
+
+const badgeColors = {
+  good: 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900/30 border-green-200 dark:border-green-800',
+  'needs-improvement': 'text-yellow-700 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800',
+  poor: 'text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 border-red-200 dark:border-red-800',
+}
+
+function MetricCard({ label, value, unit, score }: { label: string, value: string, unit: string, score: Score | null }) {
+  const noData = score === null
+  const colorClass = noData
+    ? 'text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 dark:text-neutral-400 border-neutral-200 dark:border-neutral-700'
+    : scoreColors[score]
 
   return (
-    <div className={`p-4 rounded-lg border ${colors[score]}`}>
+    <div className={`p-4 rounded-lg border ${colorClass}`}>
       <div className="text-sm font-medium opacity-80 mb-1">{label}</div>
       <div className="text-2xl font-bold">
         {value}
-        <span className="text-sm font-normal ml-1 opacity-70">{unit}</span>
+        {unit && <span className="text-sm font-normal ml-1 opacity-70">{unit}</span>}
       </div>
     </div>
   )
 }
 
+function formatMetricValue(metric: 'lcp' | 'cls' | 'inp', val: number | null): string {
+  if (val == null) return 'No data'
+  if (metric === 'cls') return val.toFixed(3)
+  return `${Math.round(val)}`
+}
+
+function formatMetricCell(metric: 'lcp' | 'cls' | 'inp', val: number | null): string {
+  if (val == null) return '\u2014'
+  if (metric === 'cls') return val.toFixed(3)
+  return `${Math.round(val)} ms`
+}
+
 export default function PerformanceStats({ stats, performanceByPage, siteId, startDate, endDate, getPerformanceByPage }: Props) {
-  // * Scoring Logic (based on Google Web Vitals)
-  type Score = 'good' | 'needs-improvement' | 'poor'
-  const getScore = (metric: 'lcp' | 'cls' | 'inp', value: number): Score => {
-    if (metric === 'lcp') return value <= 2500 ? 'good' : value <= 4000 ? 'needs-improvement' : 'poor'
-    if (metric === 'cls') return value <= 0.1 ? 'good' : value <= 0.25 ? 'needs-improvement' : 'poor'
-    if (metric === 'inp') return value <= 200 ? 'good' : value <= 500 ? 'needs-improvement' : 'poor'
-    return 'good'
-  }
-
-  // * Overall performance: worst of LCP, CLS, INP (matches Google’s “field” rating)
-  const getOverallScore = (s: { lcp: number; cls: number; inp: number }): Score => {
-    const lcp = getScore('lcp', s.lcp)
-    const cls = getScore('cls', s.cls)
-    const inp = getScore('inp', s.inp)
-    if (lcp === 'poor' || cls === 'poor' || inp === 'poor') return 'poor'
-    if (lcp === 'needs-improvement' || cls === 'needs-improvement' || inp === 'needs-improvement') return 'needs-improvement'
-    return 'good'
-  }
-
-  const overallScore = getOverallScore(stats)
-  const overallLabel = { good: 'Good', 'needs-improvement': 'Needs improvement', poor: 'Poor' }[overallScore]
-  const overallBadgeClass = {
-    good: 'text-green-700 dark:text-green-400 bg-green-100 dark:bg-green-900/30 border-green-200 dark:border-green-800',
-    'needs-improvement': 'text-yellow-700 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-900/30 border-yellow-200 dark:border-yellow-800',
-    poor: 'text-red-700 dark:text-red-400 bg-red-100 dark:bg-red-900/30 border-red-200 dark:border-red-800',
-  }[overallScore]
-
-  const [mainExpanded, setMainExpanded] = useState(false)
   const [sortBy, setSortBy] = useState<'lcp' | 'cls' | 'inp'>('lcp')
   const [overrideRows, setOverrideRows] = useState<PerformanceByPageStat[] | null>(null)
   const [loadingTable, setLoadingTable] = useState(false)
-  const [worstPagesOpen, setWorstPagesOpen] = useState(false)
 
-  // * When props.performanceByPage changes (e.g. date range), clear override so we use dashboard data
   useEffect(() => {
     setOverrideRows(null)
   }, [performanceByPage])
@@ -86,7 +86,35 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
       .finally(() => setLoadingTable(false))
   }
 
-  const cellScoreClass = (score: 'good' | 'needs-improvement' | 'poor') => {
+  const hasData = stats && stats.samples > 0
+  const lcp = stats?.lcp ?? null
+  const cls = stats?.cls ?? null
+  const inp = stats?.inp ?? null
+
+  const lcpScore = lcp != null ? getScore('lcp', lcp) : null
+  const clsScore = cls != null ? getScore('cls', cls) : null
+  const inpScore = inp != null ? getScore('inp', inp) : null
+
+  // Overall score: worst of available metrics
+  let overallScore: Score | null = null
+  if (hasData) {
+    const scores = [lcpScore, clsScore, inpScore].filter((s): s is Score => s !== null)
+    if (scores.length > 0) {
+      if (scores.includes('poor')) overallScore = 'poor'
+      else if (scores.includes('needs-improvement')) overallScore = 'needs-improvement'
+      else overallScore = 'good'
+    }
+  }
+
+  const overallLabel = overallScore
+    ? { good: 'Good', 'needs-improvement': 'Needs improvement', poor: 'Poor' }[overallScore]
+    : 'No data'
+
+  const overallBadgeClass = overallScore
+    ? badgeColors[overallScore]
+    : 'text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700'
+
+  const getCellScoreClass = (score: Score) => {
     const m: Record<string, string> = {
       good: 'text-green-600 dark:text-green-400',
       'needs-improvement': 'text-yellow-600 dark:text-yellow-400',
@@ -95,160 +123,121 @@ export default function PerformanceStats({ stats, performanceByPage, siteId, sta
     return m[score] ?? ''
   }
 
-  const formatMetric = (metric: 'lcp' | 'cls' | 'inp', val: number | null) => {
-    if (val == null) return '—'
-    if (metric === 'cls') return val.toFixed(3)
-    return `${Math.round(val)} ms`
-  }
-
   const getCellClass = (metric: 'lcp' | 'cls' | 'inp', val: number | null) => {
     if (val == null) return 'text-neutral-400 dark:text-neutral-500'
-    return cellScoreClass(getScore(metric, val))
+    return getCellScoreClass(getScore(metric, val))
   }
 
-  const summaryText = `LCP ${Math.round(stats.lcp)} ms · CLS ${Number(stats.cls.toFixed(3))} · INP ${Math.round(stats.inp)} ms`
-
   return (
-    <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+    <div className="space-y-6">
-      {/* * One-line summary: Performance score + metric summary. Click to expand. */}
+      {/* Overall badge + summary */}
-      <button
+      <div className="flex items-center gap-3">
-        type="button"
+        <span className={`rounded-md border px-2.5 py-1 text-sm font-medium ${overallBadgeClass}`}>
-        onClick={() => setMainExpanded((o) => !o)}
+          {overallLabel}
-        className="flex w-full items-center justify-between gap-4 text-left rounded cursor-pointer hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900"
-        aria-expanded={mainExpanded}
-      >
-        <div className="flex items-center gap-2 min-w-0">
-          <ChevronDownIcon
-            className={`w-4 h-4 shrink-0 text-neutral-500 transition-transform ${mainExpanded ? '' : '-rotate-90'}`}
-            aria-hidden
-          />
-          <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">Performance</span>
-          <span className={`shrink-0 rounded-md border px-2 py-0.5 text-xs font-medium ${overallBadgeClass}`}>
-            {overallLabel}
-          </span>
-        </div>
-        <span className="text-xs text-neutral-500 truncate" title={summaryText}>
-          {summaryText}
         </span>
-      </button>
+        {hasData && (
+          <span className="text-sm text-neutral-500">
+            Based on {stats.samples.toLocaleString()} session{stats.samples !== 1 ? 's' : ''} (p75 values)
+          </span>
+        )}
+      </div>
 
-      {/* * Expanded: full LCP/CLS/INP cards, footnote, and Worst pages (collapsible) */}
+      {/* Metric cards */}
-      <motion.div
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-        initial={false}
+        <MetricCard
-        animate={{ height: mainExpanded ? 'auto' : 0, opacity: mainExpanded ? 1 : 0 }}
+          label="Largest Contentful Paint (LCP)"
-        transition={{ duration: 0.25, ease: 'easeInOut' }}
+          value={formatMetricValue('lcp', lcp)}
-        style={{ overflow: 'hidden' }}
+          unit={lcp != null ? 'ms' : ''}
-      >
+          score={lcpScore}
-        <div className="mt-4 pt-4 border-t border-neutral-200 dark:border-neutral-800">
+        />
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <MetricCard
-            <MetricCard
+          label="Cumulative Layout Shift (CLS)"
-              label="Largest Contentful Paint (LCP)"
+          value={formatMetricValue('cls', cls)}
-              value={Math.round(stats.lcp)}
+          unit=""
-              unit="ms"
+          score={clsScore}
-              score={getScore('lcp', stats.lcp)}
+        />
-            />
+        <MetricCard
-            <MetricCard
+          label="Interaction to Next Paint (INP)"
-              label="Cumulative Layout Shift (CLS)"
+          value={formatMetricValue('inp', inp)}
-              value={Number(stats.cls.toFixed(3))}
+          unit={inp != null ? 'ms' : ''}
-              unit=""
+          score={inpScore}
-              score={getScore('cls', stats.cls)}
+        />
-            />
+      </div>
-            <MetricCard
-              label="Interaction to Next Paint (INP)"
-              value={Math.round(stats.inp)}
-              unit="ms"
-              score={getScore('inp', stats.inp)}
-            />
-          </div>
-          <div className="mt-4 text-xs text-neutral-500">
-            * Averages calculated from real user sessions. Lower is better.
-          </div>
 
-          {/* * Worst pages by metric – collapsed by default */}
+      {!hasData && (
-          <div className="mt-6 pt-6 border-t border-neutral-200 dark:border-neutral-800">
+        <div className="text-sm text-neutral-500 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg p-4 border border-neutral-200 dark:border-neutral-700">
-            <div className="flex items-center justify-between gap-4 mb-3">
+          No performance data collected yet. Core Web Vitals data will appear here once visitors browse your site with performance insights enabled.
-              <button
-                type="button"
-                onClick={() => setWorstPagesOpen((o) => !o)}
-                className="flex items-center gap-2 text-left rounded cursor-pointer hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 dark:focus-visible:ring-neutral-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-neutral-900"
-                aria-expanded={worstPagesOpen}
-              >
-                <ChevronDownIcon
-                  className={`w-4 h-4 shrink-0 text-neutral-500 transition-transform ${worstPagesOpen ? '' : '-rotate-90'}`}
-                  aria-hidden
-                />
-                <span className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
-                  Worst pages by metric
-                </span>
-              </button>
-              {worstPagesOpen && canRefetch && (
-                <Select
-                  value={sortBy}
-                  onChange={handleSortChange}
-                  options={[
-                    { value: 'lcp', label: 'Sort by LCP (worst)' },
-                    { value: 'cls', label: 'Sort by CLS (worst)' },
-                    { value: 'inp', label: 'Sort by INP (worst)' },
-                  ]}
-                  variant="input"
-                  align="right"
-                  className="min-w-[180px]"
-                />
-              )}
-            </div>
-            <motion.div
-              initial={false}
-              animate={{
-                height: worstPagesOpen ? 'auto' : 0,
-                opacity: worstPagesOpen ? 1 : 0,
-              }}
-              transition={{ duration: 0.25, ease: 'easeInOut' }}
-              style={{ overflow: 'hidden' }}
-            >
-              {loadingTable ? (
-                <div className="py-4"><TableSkeleton rows={5} cols={5} /></div>
-              ) : rows.length === 0 ? (
-                <div className="py-6 text-center text-neutral-500 text-sm">
-                  No per-page metrics yet. Data appears as visitors are tracked with performance insights enabled.
-                </div>
-              ) : (
-                <div className="overflow-x-auto -mx-1">
-                  <table className="w-full text-sm">
-                    <thead>
-                      <tr className="border-b border-neutral-200 dark:border-neutral-700">
-                        <th className="text-left py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Path</th>
-                        <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Samples</th>
-                        <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">LCP</th>
-                        <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">CLS</th>
-                        <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">INP</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {rows.map((r) => (
-                        <tr key={r.path} className="border-b border-neutral-100 dark:border-neutral-800/80">
-                          <td className="py-2 px-2 text-neutral-900 dark:text-white font-mono truncate max-w-[200px]" title={r.path}>
-                            {r.path || '/'}
-                          </td>
-                          <td className="py-2 px-2 text-right text-neutral-600 dark:text-neutral-400">{r.samples}</td>
-                          <td className={`py-2 px-2 text-right font-mono ${getCellClass('lcp', r.lcp)}`}>
-                            {formatMetric('lcp', r.lcp)}
-                          </td>
-                          <td className={`py-2 px-2 text-right font-mono ${getCellClass('cls', r.cls)}`}>
-                            {formatMetric('cls', r.cls)}
-                          </td>
-                          <td className={`py-2 px-2 text-right font-mono ${getCellClass('inp', r.inp)}`}>
-                            {formatMetric('inp', r.inp)}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </motion.div>
-          </div>
         </div>
-      </motion.div>
+      )}
+
+      {hasData && (
+        <div className="text-xs text-neutral-500">
+          * 75th percentile (p75) calculated from real user sessions. Lower is better.
+        </div>
+      )}
+
+      {/* Worst pages by metric */}
+      <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl p-6">
+        <div className="flex items-center justify-between gap-4 mb-4">
+          <h3 className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Slowest pages by metric
+          </h3>
+          {canRefetch && (
+            <Select
+              value={sortBy}
+              onChange={handleSortChange}
+              options={[
+                { value: 'lcp', label: 'Sort by LCP (worst)' },
+                { value: 'cls', label: 'Sort by CLS (worst)' },
+                { value: 'inp', label: 'Sort by INP (worst)' },
+              ]}
+              variant="input"
+              align="right"
+              className="min-w-[180px]"
+            />
+          )}
+        </div>
+        {loadingTable ? (
+          <TableSkeleton rows={5} cols={5} />
+        ) : rows.length === 0 ? (
+          <div className="py-6 text-center text-neutral-500 text-sm">
+            No per-page metrics yet. Data appears as visitors are tracked with performance insights enabled.
+          </div>
+        ) : (
+          <div className="overflow-x-auto -mx-1">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-neutral-200 dark:border-neutral-700">
+                  <th className="text-left py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Path</th>
+                  <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">Samples</th>
+                  <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">LCP</th>
+                  <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">CLS</th>
+                  <th className="text-right py-2 px-2 font-medium text-neutral-600 dark:text-neutral-400">INP</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r) => (
+                  <tr key={r.path} className="border-b border-neutral-100 dark:border-neutral-800/80">
+                    <td className="py-2 px-2 text-neutral-900 dark:text-white font-mono truncate max-w-[200px]" title={r.path}>
+                      {r.path || '/'}
+                    </td>
+                    <td className="py-2 px-2 text-right text-neutral-600 dark:text-neutral-400">{r.samples}</td>
+                    <td className={`py-2 px-2 text-right font-mono ${getCellClass('lcp', r.lcp)}`}>
+                      {formatMetricCell('lcp', r.lcp)}
+                    </td>
+                    <td className={`py-2 px-2 text-right font-mono ${getCellClass('cls', r.cls)}`}>
+                      {formatMetricCell('cls', r.cls)}
+                    </td>
+                    <td className={`py-2 px-2 text-right font-mono ${getCellClass('inp', r.inp)}`}>
+                      {formatMetricCell('inp', r.inp)}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
     </div>
   )
 }

components/dashboard/SiteNav.tsx

@@ -18,6 +18,7 @@ export default function SiteNav({ siteId }: SiteNavProps) {
 
   const tabs = [
     { label: 'Dashboard', href: `/sites/${siteId}` },
+    { label: 'Performance', href: `/sites/${siteId}/performance` },
     { label: 'Journeys', href: `/sites/${siteId}/journeys` },
     { label: 'Funnels', href: `/sites/${siteId}/funnels` },
     { label: 'Behavior', href: `/sites/${siteId}/behavior` },

lib/api/stats.ts

@@ -22,9 +22,10 @@ export interface ScreenResolutionStat {
 }
 
 export interface PerformanceStats {
-  lcp: number
+  lcp: number | null
-  cls: number
+  cls: number | null
-  inp: number
+  inp: number | null
+  samples: number
 }
 
 export interface PerformanceByPageStat {

public/script.js

@@ -94,12 +94,11 @@
 
     // * Only include Web Vitals when performance insights are enabled
     if (performanceInsightsEnabled) {
-      payload.inp = metrics.inp;
+      // * Only include metrics the browser actually reported. Sending 0 would either be
-      // * Only include LCP/CLS when the browser actually reported them. Sending 0 overwrites
+      // * rejected by the backend (LCP/INP must be > 0) or skew averages.
-      // * the DB before LCP/CLS have fired (they fire late). The backend does partial updates
+      if (lcpObserved && metrics.lcp > 0) payload.lcp = metrics.lcp;
-      // * and leaves unset fields unchanged.
-      if (lcpObserved) payload.lcp = metrics.lcp;
       if (clsObserved) payload.cls = metrics.cls;
+      if (metrics.inp > 0) payload.inp = metrics.inp;
     }
 
     // * Skip if nothing to send (no duration and no vitals)