Portfolio Site Load Speed Badge

WHAT IT DOES This script measures the real-world page load performance of any website using the Navigation Timing API and Performance API. It calculates key Core Web Vitals metrics—First Contentful Paint (FCP), Largest Contentful Paint (LCP), Total Blocking Time (TBT), Time to Interactive (TTI), and full load time—then displays a compact floating badge with a color-coded grade (A through F) based on Google's recommended thresholds. Click the badge to expand into a detailed panel showing all metrics with good/bad indicators, actionable recommendations for improvement, and a historical performance trend chart. Toggle between compact badge and expanded view at any time, export performance data as CSV, and reset stored measurements per domain. WHERE IT RUNS Works on any webpage—portfolio sites, personal websites, blogs, e-commerce stores, or any site you want to monitor. The script captures performance data using standard browser APIs and does not rely on external services, so measurements are immediate and private. HOW TO USE The script automatically measures page load performance when the page finishes loading. A compact badge appears showing the grade (A-F) and key metrics. The grade color indicates performance: green (A/B) = good, yellow (C) = average, orange (D) = needs improvement, red (F) = poor. Click the expand button (▼) to switch to the detailed view showing all metrics in a grid, recommendations for improvement, and a mini bar chart of recent performance history for the current domain. Use the "Measure Now" button to manually retest performance at any time. The "Reset Data" button clears stored history for the current domain. Toggle "Auto-measure on load" to control whether the script runs automatically on each page visit. Export your performance history as CSV for tracking improvements over time or sharing with developers. TECHNICAL MECHANISM: NAVIGATION TIMING API WITH CORE WEB VITALS CALCULATION The script uses the Navigation Timing API to capture navigation start, domInteractive, domContentLoadedEventEnd, responseEnd, and loadEventEnd. It then calculates FCP from PerformanceObserver paint entries (or falls back to an estimate based on responseEnd + 200ms). LCP is captured from largest-contentful-paint entries, falling back to a reasonable estimate. TBT is calculated by summing the duration of all long tasks (entries of type "longtask") that exceed 50ms, subtracting 50ms from each. TTI is estimated using a conservative formula: domInteractive plus half the difference between domContentLoaded and domInteractive (adding 300ms as a buffer if no positive difference exists). All measurements are stored per domain with timestamps, and historical data is used to generate trend visualizations (mini bar charts) showing the last 10 measurements. The grading system uses a weighted 100-point scale: FCP (25 points, good