PageSpeed Insights API Tester

\n \n

Note: This tool uses the PageSpeed Insights API without authentication, which has usage limits. For higher quotas, consider using an API key.

Results

\n {results && (\n

{JSON.stringify(results, null, 2)}

\n )}\n

Page Preview

\n {previewUrl && (\n \n )}\n

Performance Metrics

\n {performanceMetrics && (\n

Used CDN/Cloud: {performanceMetrics.cdn}
TTFB: {performanceMetrics.ttfb}
Page Size: {performanceMetrics.pageSize}
Number of Images: {performanceMetrics.images}
Number of Videos: {performanceMetrics.videos}

\n )}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n \n if (url.pathname === \"/api\") {\n const testUrl = url.searchParams.get(\"url\");\n if (!testUrl) {\n return new Response(JSON.stringify({ error: \"URL parameter is required\" }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(testUrl)}`;\n\n try {\n const response = await fetch(apiUrl);\n const data = await response.json();\n return new Response(JSON.stringify(data.error ? { error: data.error } : data), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: { message: \"Failed to fetch PageSpeed Insights\" } }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(`\n \n \n PageSpeed Insights API Tester\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" },\n });\n}\n\nconst css = `\n body {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n color: #333;\n max-width: 1200px;\n margin: 0 auto;\n padding: 20px;\n }\n .container {\n background-color: #f4f4f4;\n border-radius: 5px;\n padding: 20px;\n }\n h1, h2 {\n color: #2c3e50;\n }\n form {\n margin-bottom: 20px;\n }\n input[type=\"url\"] {\n width: 70%;\n padding: 10px;\n margin-right: 10px;\n }\n button {\n padding: 10px 20px;\n background-color: #3498db;\n color: white;\n border: none;\n cursor: pointer;\n }\n button:disabled {\n background-color: #bdc3c7;\n }\n .content-wrapper {\n display: flex;\n gap: 20px;\n }\n .results-container {\n flex: 1;\n background-color: white;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n overflow-x: auto;\n }\n .right-column {\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n .preview-container {\n background-color: #e8f5e9;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n }\n .metrics-container {\n background-color: #fff9c4;\n border: 1px solid #ddd;\n border-radius: 5px;\n padding: 20px;\n }\n .note {\n font-size: 0.9em;\n color: #666;\n margin-bottom: 15px;\n }\n pre {\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n iframe {\n width: 100%;\n height: 300px;\n border: 1px solid #ddd;\n }\n ul {\n list-style-type: none;\n padding: 0;\n }\n li {\n margin-bottom: 10px;\n }\n footer {\n margin-top: 20px;\n text-align: center;\n }\n`;","deleted","label","children",[],[99],"files",[153],"counts",{"_175":32,"_176":177,"_178":177,"_179":32},"pulls","branches",1,"forks","envVars","contents",[],"file",{"_104":154,"_95":99,"_155":116,"_156":-5,"_157":141,"_158":101,"_159":22,"_106":184,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":185},["D",1728375069466],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":194,"_151":199,"_171":203,"_182":204,"_180":206,"_207":-5,"_208":22,"_209":-5,"_210":-5,"_211":-5,"_212":213},{"_104":105,"_95":96,"_106":195,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":116,"_117":118,"_119":-5,"_120":121,"_16":122,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_23":196,"_135":197,"_138":198,"_150":22},["D",1746226304663],{"_93":94,"_133":134},{"_93":94,"_137":134},{"_100":140,"_95":43,"_104":141,"_142":105,"_143":-5,"_144":-5,"_145":-5,"_146":-5,"_147":-5,"_148":96,"_149":94},[200],{"_104":154,"_95":99,"_155":116,"_156":-5,"_157":141,"_158":101,"_159":22,"_106":160,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":201,"_98":202},[],[99],[200],{"_104":154,"_95":99,"_155":116,"_156":-5,"_157":141,"_158":101,"_159":22,"_106":184,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":205},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]

eligosmlytics

pageSpeedAPI