Build a Website Speed Checker with AI

Build a website speed checker tool as a single-page HTML application with embedded CSS and JavaScript. The tool should let users enter a URL and run client-side performance analysis. Create a prominent URL input field at the top with a large "Test Speed" button. When the user enters a URL and clicks test, load the target site in a hidden iframe and use the browser's Performance API (performance.getEntriesByType('resource'), PerformanceNavigationTiming) to measure loading metrics. Time how long it takes for the iframe to fire its load event to measure total page load time. Use the Resource Timing API to count the number of resource requests (scripts, stylesheets, images, fonts) and estimate their transfer sizes. Display results in a dashboard layout with large metric cards showing: total load time in seconds with a color indicator (green under 2s, yellow 2-4s, red over 4s), number of HTTP requests, estimated total page size in KB or MB, and an overall performance score from 0-100 calculated from these metrics. Render the score inside a circular SVG gauge that fills with color matching the grade. Below the metrics, show a detailed breakdown section with: a waterfall-style bar chart showing resource load timing for the top 20 largest resources, grouped by type (JS, CSS, images, fonts, other). Show each resource name, size, and load duration. Include an optimization suggestions checklist based on the results. If load time is over 3 seconds, suggest lazy loading images. If there are more than 30 requests, suggest bundling resources. If total size exceeds 3MB, suggest image compression. If there are render-blocking scripts, suggest async loading. Show each suggestion with a status icon — green check if passing, yellow warning if borderline, red X if failing. Add a comparison section showing industry benchmarks: "Average website loads in 2.5s", "Top sites load under 1s", "Mobile average is 8.6s". Position the tested site's score relative to these benchmarks on a horizontal scale. Store test history in localStorage so users can see their last 10 tests with URL, date, score, and load time. Include a "clear history" button. Use a dark theme with background #0a0a0f, card backgrounds #12121a, borders #1a1a2a. Performance colors: green #22c55e for good, yellow #eab308 for okay, red #ef4444 for poor. Make the layout fully responsive. Add a note explaining that client-side testing has limitations compared to server-side tools, and results may vary based on the user's connection speed. Read the guide at https://accessagent.ai/api/guide and follow it to deploy the site to AccessAgent.ai. My email is [your@email.com].