(function() { const endpoint = '/api/vitals'; function send(metric) { try { navigator.sendBeacon && navigator.sendBeacon(endpoint, JSON.stringify(metric)); } catch(e) {} } // CLS let clsValue = 0, clsEntries = []; new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { clsEntries.push(entry); clsValue += entry.value; } } }).observe({ type: 'layout-shift', buffered: true }); document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { send({ name: 'CLS', value: clsValue, id: Date.now().toString(), rating: clsValue < 0.1 ? 'good' : clsValue < 0.25 ? 'needs-improvement' : 'poor' }); } }); // LCP new PerformanceObserver((list) => { const entries = list.getEntries(); const last = entries[entries.length - 1]; if (last) send({ name: 'LCP', value: last.startTime, id: last.element || Date.now().toString(), rating: last.startTime < 2500 ? 'good' : last.startTime < 4000 ? 'needs-improvement' : 'poor' }); }).observe({ type: 'largest-contentful-paint', buffered: true }); // FCP new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.name === 'first-contentful-paint') { send({ name: 'FCP', value: entry.startTime, id: Date.now().toString(), rating: entry.startTime < 1800 ? 'good' : entry.startTime < 3000 ? 'needs-improvement' : 'poor' }); } } }).observe({ type: 'paint', buffered: true }); // INP (approximated via event timing) new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (entry.interactionId && entry.duration > 0) { send({ name: 'INP', value: entry.duration, id: entry.interactionId.toString(), rating: entry.duration < 200 ? 'good' : entry.duration < 500 ? 'needs-improvement' : 'poor' }); } } }).observe({ type: 'event', buffered: true, durationThreshold: 0 }); // TTFB window.addEventListener('load', () => { const nav = performance.getEntriesByType('navigation')[0]; if (nav) { send({ name: 'TTFB', value: nav.responseStart, id: nav.name || Date.now().toString(), rating: nav.responseStart < 800 ? 'good' : nav.responseStart < 1800 ? 'needs-improvement' : 'poor' }); } }); })();

Turn any video into your personal knowledge base