/** @jsxImportSource https://esm.sh/react */ import pLimit from "https://esm.sh/p-limit"; import React, { useCallback, useState } from "https://esm.sh/react"; import { hydrateRoot } from "https://esm.sh/react-dom/client"; import { renderToReadableStream } from "https://esm.sh/react-dom/server"; import { extractValInfo } from "https://esm.town/v/pomdtr/extractValInfo"; // Utility functions const performSingleRequest = async (url) => { const start = performance.now(); try { await fetch(url); const end = performance.now(); return end - start; } catch (error) { console.error("Error fetching URL:", error); return null; } }; const performRequests = async (url, count, concurrency, onProgress) => { const limit = pLimit(concurrency); const tasks = Array(count).fill().map(() => limit(() => performSingleRequest(url))); const results = []; for (const task of tasks) { const result = await task; if (result !== null) { results.push(result); onProgress(results); } } return results; }; const calculateStats = (times) => { if (times.length === 0) { return { average: 0, lowest: 0, highest: 0 }; } return { average: times.reduce((a, b) => a + b, 0) / times.length, lowest: Math.min(...times), highest: Math.max(...times), }; }; // Helper function to safely format numbers const safeToFixed = (number, decimalPlaces) => { return number !== undefined && number !== null ? Number(number).toFixed(decimalPlaces) : "N/A"; }; // React components const TestForm = ({ onSubmit, isLoading }) => { const [url, setUrl] = useState(""); const [numRequests, setNumRequests] = useState(5); const [prewarmRequests, setPrewarmRequests] = useState(10); const [concurrency, setConcurrency] = useState(2); const handleSubmit = (e) => { e.preventDefault(); onSubmit({ url, numRequests, prewarmRequests, concurrency }); }; return (

Website URL setUrl(e.target.value)} placeholder="https://example.com" className="w-full p-2 border border-gray-300 rounded-md" />

Number of Requests setNumRequests(parseInt(e.target.value))} min="1" className="w-full p-2 border border-gray-300 rounded-md" />

Pre-Warm Requests setPrewarmRequests(parseInt(e.target.value))} min="0" className="w-full p-2 border border-gray-300 rounded-md text-sm" />

Concurrency setConcurrency(parseInt(e.target.value))} min="1" className="w-full p-2 border border-gray-300 rounded-md text-sm" />

); }; const TestProgress = ({ currentTest }) => { if (!currentTest) return null; const { stage, completedRequests, totalRequests, stats, times } = currentTest; return (

Current Test: {currentTest.url}

{stage === "prewarming" ? (

Pre-warming

{completedRequests} / {totalRequests} requests

) : ( <>

Average

{safeToFixed(stats.average, 2)} ms

Lowest

{safeToFixed(stats.lowest, 2)} ms

Highest

{safeToFixed(stats.highest, 2)} ms

Progress: {completedRequests} / {totalRequests} requests

{times.map((time, index) =>

Request {index + 1}: {safeToFixed(time, 2)} ms

)}

); }; const TestResults = ({ results }) => (

{results.map((result, index) => (

{result.url}

Average

{safeToFixed(result.stats.average, 2)} ms

Lowest

{safeToFixed(result.stats.lowest, 2)} ms

Highest

{safeToFixed(result.stats.highest, 2)} ms

Tested at: {result.timestamp} | Pre-warm: {result.prewarmRequests} | Requests: {result.numRequests}{" "} | Concurrency: {result.concurrency}

{result.times.map((time, index) =>

Request {index + 1}: {safeToFixed(time, 2)} ms

)}

))}

); const PerformanceTester = () => { const [results, setResults] = useState([]); const [currentTest, setCurrentTest] = useState(null); const [isLoading, setIsLoading] = useState(false); const runTest = useCallback(async ({ url, numRequests, prewarmRequests, concurrency }) => { setIsLoading(true); setCurrentTest({ url, stage: "prewarming", completedRequests: 0, totalRequests: prewarmRequests }); // Pre-warm requests await performRequests(url, prewarmRequests, concurrency, (times) => { setCurrentTest(prev => ({ ...prev, completedRequests: times.length })); }); // Actual test requests setCurrentTest({ url, stage: "testing", completedRequests: 0, totalRequests: numRequests, times: [], stats: {} }); const times = await performRequests(url, numRequests, concurrency, (times) => { const stats = calculateStats(times); setCurrentTest(prev => ({ ...prev, completedRequests: times.length, times, stats, })); }); const finalStats = calculateStats(times); setResults(prev => [ { url, stats: finalStats, timestamp: new Date().toLocaleString(), prewarmRequests, numRequests, concurrency, times, }, ...prev, ]); setIsLoading(false); setCurrentTest(null); }, []); return ( Website Performance Tester

Website Performance Tester

View source code on Val Town

); }; const App = () => ; if (typeof document !== "undefined") { hydrateRoot(document, ); } export default async function(req: Request): Promise { const stream = await renderToReadableStream(, { bootstrapModules: [import.meta.url] }); return new Response(stream, { headers: { "content-type": "text/html" } }); }