/** @jsxImportSource https://esm.sh/react */ import React, { useState, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function Popup({ isOpen, onClose, content }) { const [convertedImages, setConvertedImages] = useState({}); const [converting, setConverting] = useState({}); const convertToWebP = async (url, index) => { setConverting(prev => ({ ...prev, [index]: true })); try { const response = await fetch(url); const blob = await response.blob(); const img = await createImageBitmap(blob); const canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0); const webpBlob = await new Promise(resolve => canvas.toBlob(resolve, 'image/webp')); const webpUrl = URL.createObjectURL(webpBlob); setConvertedImages(prev => ({ ...prev, [index]: { url: webpUrl, size: webpBlob.size } })); } catch (error) { console.error("Error converting image:", error); } setConverting(prev => ({ ...prev, [index]: false })); }; const formatSize = (bytes) => { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; }; if (!isOpen) return null; return (

{content.type === 'images' && ( <>

Images

{item.url.split('/').pop()} - {formatSize(item.transferSize)} Download {!convertedImages[index] && ( )} {convertedImages[index] && (

WebP Size: {formatSize(convertedImages[index].size)}
Download WebP
)}

)} {content.type === 'videos' && ( <>

Videos

{item.url.split('/').pop()} - {formatSize(item.transferSize)} Download

)}

); } function HTMLPreview({ html, isFullView, toggleView }) { return (

Page HTML Preview

Preview Full View

        {isFullView ? html : html.slice(0, 500) + (html.length > 500 ? '...' : '')}

); } function App() { const [url, setUrl] = useState(''); const [results, setResults] = useState(null); const [loading, setLoading] = useState(false); const [previewUrl, setPreviewUrl] = useState(""); const [performanceMetrics, setPerformanceMetrics] = useState(null); const [popupContent, setPopupContent] = useState(null); const [isPopupOpen, setIsPopupOpen] = useState(false); const [htmlContent, setHtmlContent] = useState(''); const [isFullView, setIsFullView] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setPreviewUrl(url); setResults(null); setPerformanceMetrics(null); setHtmlContent(''); try { const response = await fetch(`/api?url=${encodeURIComponent(url)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error.message || "An error occurred"); } setResults(data); const metrics = extractPerformanceMetrics(data); setPerformanceMetrics(metrics); await fetchHtmlContent(url); } catch (error) { console.error("Error fetching results:", error); setResults({ error: error.message || "Failed to fetch results" }); } setLoading(false); }; const fetchHtmlContent = async (url) => { try { const response = await fetch(`/html?url=${encodeURIComponent(url)}`); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const html = await response.text(); setHtmlContent(html); } catch (error) { console.error("Error fetching HTML content:", error); setHtmlContent("Failed to fetch HTML content"); } }; const extractPerformanceMetrics = (data) => { if (!data.lighthouseResult) { return null; } const { audits, categories } = data.lighthouseResult; const resourceSummary = audits['resource-summary']?.details?.items || []; const images = resourceSummary.find(item => item.resourceType === 'image') || { requestCount: 0, transferSize: 0 }; const videos = resourceSummary.find(item => item.resourceType === 'media') || { requestCount: 0, transferSize: 0 }; const totalBytes = resourceSummary.reduce((sum, item) => sum + (item.transferSize || 0), 0); const networkRequests = audits['network-requests']?.details?.items || []; const imageItems = networkRequests.filter(item => item.resourceType === 'Image' || item.resourceType === 'image'); const videoItems = networkRequests.filter(item => item.resourceType === 'Media' || item.resourceType === 'media'); const detectCDN = () => { const cdnHeaders = ['cloudflare', 'akamai', 'fastly', 'amazon cloudfront']; for (const request of networkRequests) { const headers = request.responseHeaders || []; for (const header of headers) { const headerString = `${header.name}: ${header.value}`.toLowerCase(); for (const cdn of cdnHeaders) { if (headerString.includes(cdn)) { return cdn.charAt(0).toUpperCase() + cdn.slice(1); } } } } return 'Not detected'; }; return { cdn: detectCDN(), fcp: audits['first-contentful-paint']?.displayValue || 'N/A', lcp: audits['largest-contentful-paint']?.displayValue || 'N/A', tbt: audits['total-blocking-time']?.displayValue || 'N/A', cls: audits['cumulative-layout-shift']?.displayValue || 'N/A', performance: categories.performance ? `${Math.round(categories.performance.score * 100)}%` : 'N/A', images: { count: images.requestCount || 0, size: ((images.transferSize || 0) / 1024 / 1024).toFixed(2), items: imageItems }, videos: { count: videos.requestCount || 0, size: ((videos.transferSize || 0) / 1024 / 1024).toFixed(2), items: videoItems }, totalSize: `${(totalBytes / 1024 / 1024).toFixed(2)} MB` }; }; const handleResourceClick = (type) => { setPopupContent({ type, items: performanceMetrics[type].items }); setIsPopupOpen(true); }; const toggleHtmlView = () => { setIsFullView(!isFullView); }; return (

Page Insights

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

Results

{results && ( results.error ?

{results.error}

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

)}

Page Preview {previewUrl && ( ({new URL(previewUrl).hostname}) )}

{previewUrl && }

Performance Metrics

{performanceMetrics ? (

CDN/cloud service: {performanceMetrics.cdn}
First Contentful Paint (FCP): {performanceMetrics.fcp}
Largest Contentful Paint (LCP): {performanceMetrics.lcp}
Total Blocking Time (TBT): {performanceMetrics.tbt}
Cumulative Layout Shift (CLS): {performanceMetrics.cls}
Performance Score: {performanceMetrics.performance}
Images: handleResourceClick('images')}>{performanceMetrics.images.count} ({performanceMetrics.images.size} MB)
Videos: handleResourceClick('videos')}>{performanceMetrics.videos.count} ({performanceMetrics.videos.size} MB)
Total Estimated Size: {performanceMetrics.totalSize}

) : (

No performance metrics available

)}

{htmlContent && ( )}

setIsPopupOpen(false)} content={popupContent} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const url = new URL(request.url); if (url.pathname === "/api") { const testUrl = url.searchParams.get("url"); if (!testUrl) { return new Response(JSON.stringify({ error: "URL parameter is required" }), { status: 400, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }, }); } const apiUrl = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(testUrl)}`; try { const response = await fetch(apiUrl); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return new Response(JSON.stringify(data), { headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }, }); } catch (error) { return new Response(JSON.stringify({ error: error.message || "Failed to fetch PageSpeed Insights" }), { status: 500, headers: { "Content-Type": "application/json", "Access-Control-Allow-Origin": "*" }, }); } } if (url.pathname === "/html") { const testUrl = url.searchParams.get("url"); if (!testUrl) { return new Response("URL parameter is required", { status: 400 }); } try { const response = await fetch(testUrl); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const html = await response.text(); return new Response(html, { headers: { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "*" }, }); } catch (error) { return new Response("Failed to fetch HTML content", { status: 500 }); } } return new Response(` Page Insights

`,{ headers: { "Content-Type": "text/html" }, }); } const css = ` body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 1200px; margin: 0 auto; padding: 20px; } .container { background-color: #f4f4f4; border-radius: 5px; padding: 20px; } h1, h2 { color: #2c3e50; } form { margin-bottom: 20px; } input[type="url"] { width: 70%; padding: 10px; margin-right: 10px; } button { padding: 10px 20px; background-color: #3498db; color: white; border: none; cursor: pointer; } button:disabled { background-color: #bdc3c7; } .content-wrapper { display: flex; gap: 20px; } .results-container { flex: 1; background-color: white; border: 1px solid #ddd; border-radius: 5px; padding: 20px; overflow-x: auto; } .right-column { flex: 1; display: flex; flex-direction: column; gap: 20px; } .preview-container { background-color: #e8f5e9; border: 1px solid #ddd; border-radius: 5px; padding: 20px; } .domain-name { font-size: 0.8em; color: #666; margin-left: 10px; } .metrics-container { background-color: #fff9c4; border: 1px solid #ddd; border-radius: 5px; padding: 20px; } .html-preview-container { background-color: #e3f2fd; border: 1px solid #ddd; border-radius: 5px; padding: 20px; } .note { font-size: 0.9em; color: #666; margin-bottom: 15px; } pre { white-space: pre-wrap; word-wrap: break-word; } iframe { width: 100%; height: 300px; border: 1px solid #ddd; } ul { list-style-type: none; padding: 0; } li { margin-bottom: 10px; } footer { margin-top: 20px; text-align: center; } .error { color: #e74c3c; font-weight: bold; } .clickable { cursor: pointer; color: #3498db; text-decoration: underline; } .popup-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; } .popup { background-color: #fff; padding: 20px; border-radius: 5px; max-width: 80%; max-height: 80%; overflow-y: auto; position: relative; } .close-btn { position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 1.5em; cursor: pointer; } .popup-content { margin-top: 20px; } .download-btn, .convert-btn { margin-left: 10px; padding: 5px 10px; background-color: #3498db; color: white; text-decoration: none; border-radius: 3px; font-size: 0.9em; border: none; cursor: pointer; } .download-btn:hover, .convert-btn:hover { background-color: #2980b9; } .convert-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; } .toggle-container { display: flex; align-items: center; margin-bottom: 10px; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin: 0 10px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:checked + .slider:before { transform: translateX(26px); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .preview { max-height: 200px; overflow-y: auto; } .full-view { max-height: 500px; overflow-y: auto; } `;

lovableVioletLandfowl